Como faço para filtrar dados em MVC vista parcial usando jQuery

Question

Como faço para atualizar dados usando Ajax, jQuery quando eu mudar um menu suspenso na minha página index.aspx? Eu tenho uma página com uma lista suspensa ProjectList que deve mostrar todas as questões relacionadas a esse projeto.

Se eu mudar o valor de retorno na minha ação do controlador, consulte o código comentado, ou ele retira a página mestra e apenas carrega o PartialView Ou não carregar nada. Eu também tentei fazer algo como: PartialView retorno ( "MyIssues", paginatedIssues);

Com o código abaixo eu sou capaz de mudar a página usando Ajax, mas não estou retornando os dados corretos ou html para atualizar a PartialView.

Então, o que estou fazendo de errado ou como eu pode realizar a atualização de dados?

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

Você pode usar o incrível jQuery Form Plugin: http://malsup.com/jquery/form/ e ter o evento de alteração ddl enviar o formulário.

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

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

}); 

Você pode ler na documentação de API como funciona a opção de destino, é tão simples quanto ele ganha embora.

Então leia este tutorial (mas você já parecem saber sobre Request.IsAjaxRequest) ()
http://www.asp.net/learn/mvc/tutorial- 32 cs.aspx

Answer 2

Não tenho certeza isso vai ajudar, mas eu tenho feito semelhante na última semana ou assim.

Eu não fiz $ .ajax eu usei $ .Pôr. Mas o importante, no final vista era para incluir , "json") no final da declaração. Usado que quando voltei dados JSON que eu poderia itterate completamente. No código por trás Então eu tinha que fazer return Json(mydata para que eu pudesse realmente itterate através da coleção retornada.

Eu também fiz um return PartialView("commentList" em outros lugares e no final cliente I

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

Eu não tenho certeza se qualquer um isso ajuda, mas o que me ajudou foi para começar não pequeno, mas muito pequeno e construir a partir daí.

Se você quiser mais, então deixe-me saber e eu vou tentar fornecer. Mas eu não sou nenhum perito Jquery.