How can I toggle a list based on a radio button with asp.net mvc?

Question

Suppose I have a list of tickets. When the user first goes to the tickets/index page I want to show all the open tickets and check the radio button with the name ticketStatus and value of Open.

If the user checks the Closed radio button with value Closed and name of ticketStatus I want to do a submit and get the list of closed tickets return to my tickets/index page and check the closed radio button.

Any suggestion on where to start would be appreciated? Can I use javascript to submit so I don't need a form or should I just make a form?

In the view:

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

In the controller:

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

Answer 1

I'll respond following the flow of my understanding:

Suppose I have a list of tickets. When the user first goes to the tickets/index page I want to show all the open tickets and check the radio button with the name ticketStatus and value of 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>

If the user checks the Closed radio button with value Closed and name of ticketStatus I want to do a submit and get the list of closed tickets return to my tickets/index page and check the closed radio button.

1: you need to handle change event on all inputs type="radio"

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

2: you need to post picked status to the server and get some response, two solutions:

• ajax request and get response
• plain http refresh

some recommandations:

if it's your main form: use a and use ajax for the other parts of the UI (searchbox, navigation...)

think why are you posting data (ajax or plain), if only need to display the tickets and switch with some control prefer one of theeses solution:

• use plain href and get url parameters
• use partial refresh of the ticket list

to get better design with few items for status, use tab or convenient UI

if you need some more detail, feel free to ask any specific question.

Hope this helps

edit:

• just to mention that this question would gain not belong to asp.net mvc, it's a general html/http/form scenario
• also don't impose ajax to your client, the highest part of navigation should be handled with get/post at primary level, then adding non intrusive ajax to navigate

Answer 2

So I made a little change to get it working. Not sure if this is the most elegant solution.

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

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

Thanks.