How do I filter data in MVC partialview using jQuery

Question

How do I update data using Ajax, jQuery when I change a dropdown on my Index.aspx page? I have a page with a ProjectList dropdown which should show all issues related to that Project.

If I change the return value on my Controller action, see the commented code, it either removes the master page and just loads the PartialView Or does not load anything. I also tried to do something like: return PartialView("MyIssues", paginatedIssues);

With the code below I am able to change the page using Ajax but am not returning the correct data or html to refresh the PartialView.

So what am I doing wrong or how can I accomplish the data refresh?

Index.aspx

<label for="ProjectList">Project:</label>
<%= Html.DropDownList("ProjectList", "--All--") %>
<div id="divMyIssues"><% Html.RenderPartial("MyIssues", Model); %></div>
<script type="text/javascript">
$(document).ready(function() {
     $("#ProjectList").change(function() {
         CanIRefresh();
     });
  });
  function CanIRefresh() {
     $.ajax({
         type: "POST",
         url: "/Issue/" + "Index",
         dataType: "html",
         data: {
             page: 5// just changing the page to see if it updates the 
                   //partialView, if it does change I can then pass ProjectId 
                   //to filter.
         },
         success: function(v) {
             RefreshData(v);
         },
         error: function(v, x, w) {
             //Error
         }
     });
 }
function RefreshData(v) {
     $("div#divMyIssues").html(v);
     return;         
 }
</script>

IssueController.cs

public ActionResult Index(int? page)
{
   // Load the Project List
   var projectList = new SelectList(_db.Project.ToList(), "ProjectId", "Name");
   ViewData["ProjectList"] = projectList;
   const int pageSize = 10;
   var myIssues = issueRepository.MyIssues2();
   var paginatedIssues = new PaginatedList<IssueSummary>(myIssues, page ?? 0, pageSize);
   ViewData.Model = paginatedIssues;
   // Adding for returning partial view
   //if (Request.IsAjaxRequest())
   //    return PartialView("MyIssues", paginatedIssues);
   //else
   //    return View(paginatedIssues);
   return View(paginatedIssues);
}

MyIssues.ascx

<ul>
 <% foreach (var m in ViewData.Model)
 { %>
    <li> <a href="<%= Url.RouteUrl("Default",  
       new { id = m.Id, controller = "Issue", action = "Details" })%>">
       <%= m.Title %></a>
  </li>
    <% } %>
</ul>
    <div class="pagination">
    <% if (Model.IsPreviousPage) { %>        
        <%= Html.RouteLink("<<<", "MyIssues", 
            new { page=(Model.PageIndex-1) }) %>        
    <% } %>        
    <% if (Model.IsNextPage) { %>        
        <%= Html.RouteLink(">>>", "MyIssues", 
            new { page = (Model.PageIndex + 1) })%>        
    <% } %>
</div>

Answer 1

Not sure this will help but I've been doing similar in the last week or so.

I didn't do $.ajax I used $.Post. But the important thing at the view end was to include , "json") at the end of the statement. Used that when I returned Json data that I could itterate through. In the code behind I then had to do return Json(mydata so that I could actually itterate through the returned collection.

I also did a return PartialView("commentList" elsewhere and at the client end I

$.post("/jQueryTests/jQueryAddMessageComment", { commentText: commentText }, function(newComment) {
            $("#divComments" + id.toString()).html(newComment);
        });

I'm not sure if any of this helps but what helped me was to start off not small but really small and build up from there.

If you want more then let me know and I'll try to provide. But I'm no Jquery expert.

Answer 2

You could use the awesome jQuery Form Plugin: http://malsup.com/jquery/form/ and have the ddl change event submit the form.

$(document).ready(function() { 
    var options = { 
        target:'#divMyIssues',
    }; 

    $('form').ajaxForm(options); 
    $("#ProjectList").change(function() {
        $('form').submit();
    });

});

You can read in the API docs how the target option works, it's as simple as it gets though.

Then read this tutorial (but you already seem to know about Request.IsAjaxRequest())
http://www.asp.net/learn/mvc/tutorial-32-cs.aspx