代码之家 › 专栏 › 技术社区 › Mike Roosa

如何使用asp.net mvc基于单选按钮切换列表?

asp.net-mvc c#

Mike Roosa · 技术社区 · 16 年前

假设我有一张票单。当用户第一次转到票/索引页面时,我想显示所有打开的票,并选中名为ticketStatus和值为open的单选按钮。

如果用户勾选了“已关闭”单选按钮,其值为“关闭”,名称为“票证状态”,我想进行提交,并将已关闭的票证列表返回到我的票证/索引页面,然后勾选已关闭的单选按钮。

如果您能就从哪里开始提出建议,我们将不胜感激?我可以使用javascript提交,这样我就不需要表单了,还是应该只制作一个表单?

在视图中:

<%= Html.RadioButton("ticketStatus", "Open", true) %>&nbsp;Open&nbsp;&nbsp;  
<%= Html.RadioButton("ticketStatus", "Closed", false) %>&nbsp;Closed (Last 60 Days)

public ActionResult Index()  
{  
    ViewData["Title"] = "Ticket List";  
    IServiceCallService scService = new ServiceCallService();  
    IList<ServiceCall> serviceCalls = scService.GetOpenServiceCalls("");  
    return View(serviceCalls);  
}

2 回复 | 直到 16 年前

smoothdeveloper 16 年前

假设我有一张票单。当用户第一次转到票/索引页面时,我想显示所有打开的票,并选中名为ticketStatus和值为open的单选按钮。

<div class="statusfilter">
<%foreach(TicketStatus status in view.PickableTicketStatus){%>
<input 
   type="radio" 
   name="ticketStatusFilter"
   value="<%=status%>"
   <%= viewlogic.IsSelectedStatusFilter(status) ? "selected='selected'" : "" %>
/>
<%}>
</div>
<ul class="tickets">
<%foreach(var t in view.Tickets){%>
  <li>
    <input type="hidden" name="ticketsToChange" value="<%=t.Key%>" /> 
    <%=t.Title.AsHtmlEncoded()%>
  </li>
<%}%>
</ul>

如果用户勾选了“已关闭”单选按钮,其值为“关闭”,名称为“票证状态”,我想进行提交,并将已关闭的票证列表返回到我的票证/索引页面,然后勾选已关闭的单选按钮。

<!-- with jquery -->
$(document).ready(function(){
  // register anonymous event handler to status radio change
  $('div.statusfilter input[type='radio']")
    .change(function(){
      // see 2:
    });
});

2:你需要将挑选的状态发布到服务器并获得一些响应,有两种解决方案:

ajax请求并获取响应

一些建议:

如果这是您的主窗体:使用a,并对UI的其他部分(搜索框、导航……)使用ajax

想想你为什么要发布数据(ajax或plain),如果只需要显示工单并使用一些控件进行切换,那么你更喜欢以下解决方案之一:

使用纯href并获取url参数

如果你需要更多细节,请随时提出任何具体问题。

希望这有帮助

编辑:

也不要将ajax强加给您的客户端,导航的最高部分应该在初级级别使用get/post处理,然后添加非侵入式ajax进行导航

Mike Roosa 16 年前

所以我做了一点改变,让它发挥作用。不确定这是否是最优雅的解决方案。

<script type="text/javascript">
    $(document).ready(function() {
        $("input[name='ticketStatus']").bind("click", radioClicks)
    });

    function radioClicks() {
        window.location = "/Tickets/" + $(this).val();
    }
</script>

谢谢。