title: How do I filter data in MVC partialview using jQuery
body: <p>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.</p>
  
  <p>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);</p>
  
  <p>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.</p>
  
  <p><strong>So what am I doing wrong or how can I accomplish the data refresh?</strong></p>
  
  <p><strong>Index.aspx</strong></p>
  
  <pre><code>&lt;label for="ProjectList"&gt;Project:&lt;/label&gt;
  &lt;%= Html.DropDownList("ProjectList", "--All--") %&gt;
  &lt;div id="divMyIssues"&gt;&lt;% Html.RenderPartial("MyIssues", Model); %&gt;&lt;/div&gt;
  &lt;script type="text/javascript"&gt;
  $(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;         
   }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>IssueController.cs</strong></p>
  
  <pre><code>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&lt;IssueSummary&gt;(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);
  }
  </code></pre>
  
  <p><strong>MyIssues.ascx</strong></p>
  
  <pre><code>&lt;ul&gt;
   &lt;% foreach (var m in ViewData.Model)
   { %&gt;
      &lt;li&gt; &lt;a href="&lt;%= Url.RouteUrl("Default",  
         new { id = m.Id, controller = "Issue", action = "Details" })%&gt;"&gt;
         &lt;%= m.Title %&gt;&lt;/a&gt;
    &lt;/li&gt;
      &lt;% } %&gt;
  &lt;/ul&gt;
      &lt;div class="pagination"&gt;
      &lt;% if (Model.IsPreviousPage) { %&gt;        
          &lt;%= Html.RouteLink("&lt;&lt;&lt;", "MyIssues", 
              new { page=(Model.PageIndex-1) }) %&gt;        
      &lt;% } %&gt;        
      &lt;% if (Model.IsNextPage) { %&gt;        
          &lt;%= Html.RouteLink("&gt;&gt;&gt;", "MyIssues", 
              new { page = (Model.PageIndex + 1) })%&gt;        
      &lt;% } %&gt;
  &lt;/div&gt;
  </code></pre>