Comment filtrer les données dans la vue partielle MVC à l'aide de jQuery

Question

Comment mettre à jour des données avec Ajax, jQuery lorsque je modifie une liste déroulante sur ma page Index.aspx? J'ai une page avec une liste déroulante ProjectList qui devrait montrer tous les problèmes liés à ce projet.

Si je modifie la valeur de retour de mon action Controller, voir le code commenté, il supprime la page maître et ne charge que le PartialView ou ne charge rien. J'ai également essayé de faire quelque chose comme: renvoyer PartialView ("MyIssues", paginatedIssues);

Avec le code ci-dessous, je suis en mesure de changer de page à l'aide d'Ajax mais je ne renvoie pas les données correctes ni le code HTML pour actualiser le PartialView.

Alors, qu'est-ce que je fais de mal ou comment puis-je actualiser les données?

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

Vous pouvez utiliser le plugin de formulaire jQuery génial: http://malsup.com/jquery/form/ et demandez à l’événement ddl change de soumettre le formulaire.

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

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

}); 

Vous pouvez lire dans la documentation de l'API le fonctionnement de l'option cible, c'est aussi simple que cela puisse paraître.

Lisez ensuite ce tutoriel (mais vous semblez déjà être au courant de Request.IsAjaxRequest ())

http://www.asp.net/learn/mvc/tutorial- 32-cs.aspx

Answer 2

Je ne suis pas sûr que cela va aider, mais je fais la même chose la semaine dernière.

Je n'ai pas fait $ .ajax J'ai utilisé $ .Post. Mais l’important à la fin de la vue était d’inclure , "json") à la fin de la déclaration. Utilisé que lorsque j'ai renvoyé des données Json que je pouvais parcourir. Dans le code derrière, je devais alors renvoyer Json (mydata ) pour pouvoir parcourir la collection renvoyée.

J'ai également effectué un retour PartialView ("commentList" & <; code> ailleurs et à la fin du client I

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

Je ne suis pas sûr que cela aide, mais ce qui m'a aidé, c'est de commencer non pas petit mais vraiment petit et de construire à partir de là.

Si vous en voulez plus, faites-le-moi savoir et j'essaierai de vous le fournir. Mais je ne suis pas un expert Jquery.