Come filtrare i dati nella vista parziale MVC usando jQuery

Question

Come posso aggiornare i dati usando Ajax, jQuery quando cambio un menu a discesa sulla mia pagina Index.aspx? Ho una pagina con un elenco a discesa ProjectList che dovrebbe mostrare tutti i problemi relativi a quel progetto.

Se cambio il valore di ritorno sulla mia azione del Controller, vedi il codice commentato, rimuove la pagina principale e carica solo PartialView oppure non carica nulla. Ho anche provato a fare qualcosa del tipo: return PartialView (" MyIssues " ;, paginatedIssues);

Con il codice seguente sono in grado di cambiare la pagina usando Ajax ma non sto restituendo i dati corretti o html per aggiornare PartialView.

Quindi cosa sto facendo di sbagliato o come posso eseguire l'aggiornamento dei dati?

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

Potresti usare il fantastico plug-in jQuery Form: http://malsup.com/jquery/form/ e fare in modo che l'evento di modifica ddl invii il modulo.

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

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

}); 

Puoi leggere nei documenti dell'API come funziona l'opzione target, è semplice come sembra.

Quindi leggi questo tutorial (ma sembri già sapere di Request.IsAjaxRequest ())
http://www.asp.net/learn/mvc/tutorial- 32-cs.aspx

Answer 2

Non sono sicuro che questo mi aiuterà, ma ho fatto cose simili nell'ultima settimana circa.

Non ho fatto $ .ajax, ho usato $ .Post. Ma la cosa importante alla fine della vista era includere , " json ") alla fine della dichiarazione. L'ho usato quando ho restituito i dati Json che potevo scorrere. Nel codice dietro ho dovuto quindi fare restituire Json (mydata in modo da poter effettivamente scorrere la raccolta restituita.

Ho anche fatto un restituito PartialView (" CommentList " altrove e alla fine del client I

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

Non sono sicuro che qualcuno di questi aiuti, ma ciò che mi ha aiutato è stato iniziare non piccolo ma davvero piccolo e costruire da lì.

Se vuoi di più, fammelo sapere e proverò a fornire. Ma non sono un esperto di Jquery.