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

时间:2009-01-22 19:31:11

标签: c# asp.net-mvc

假设我有一张门票清单。当用户第一次进入票证/索引页面时,我想显示所有打开的票证并检查名为ticketStatus的单选按钮和Open值。

如果用户检查Closed单选按钮值为Closed并且ticketStatus名称我想要提交并获取已关闭票证列表返回我的票证/索引页面并检查已关闭的单选按钮。

任何关于从哪里开始的建议都将受到赞赏?我可以使用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 个答案:

答案 0 :(得分:0)

我会根据我的理解做出回应:

  

假设我有一张门票清单。当用户第一次进入票证/索引页面时,我想显示所有打开的票证并检查名为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>
  

如果用户检查Closed单选按钮值为Closed并且ticketStatus名称我想要提交并获取已关闭票证列表返回我的票证/索引页面并检查已关闭的单选按钮。

1:您需要在所有输入类型=“radio”

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

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

  • ajax请求并获得回复
  • plain http refresh

一些建议:

如果它是您的主要表单:使用a并使用ajax用于UI的其他部分(搜索框,导航......)

想想你为什么要发布数据(ajax或plain),如果只需要显示票证和带有一些控件的开关更喜欢其中一个解决方案:

  • 使用plain href并获取url参数
  • 使用故障单列表的部分刷新

使用少量项目状态,使用标签或方便的用户界面来获得更好的设计

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

希望这有帮助

编辑:

  • 只是提到这个问题不会属于asp.net mvc,这是一个通用的html / http /表单场景
  • 也不要将ajax强加给你的客户端,导航的最高部分应该在主要级别使用get / post处理,然后添加非侵入式ajax来导航

答案 1 :(得分:0)

所以我做了一点改变让它运转起来。不确定这是否是最优雅的解决方案。

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

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

感谢。