Wie filtere ich Daten in MVC Teilansicht mit jQuery

Question

Wie aktualisiere ich Daten mit Ajax, jQuery, wenn ich ein Dropdown auf meiner Index.aspx Seite ändern? Ich habe eine Seite mit einem Drop-Down-Project, die alle Fragen im Zusammenhang mit diesem Projekt im Zusammenhang zeigen.

Wenn ich den Rückgabewert auf meiner Controller-Aktion zu ändern, finden Sie in den kommentierten Code, entweder es entfernt die Master-Seite und lädt nur die PartialView Oder nichts laden. Ich habe auch versucht, so etwas wie zu tun: return PartialView ( "MyIssues", paginatedIssues);

Mit dem folgenden Code ich bin in der Lage der Seite mit Ajax zu ändern, aber der Rückkehr bin nicht die richtigen Daten oder html die PartialView zu aktualisieren.

Was mache ich falsch bzw. wie kann ich die Daten aktualisieren erreichen?

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

Sie können die ehrfürchtige jQuery Formular Plugin verwenden: http://malsup.com/jquery/form/ und habe das DDL-Änderungsereignis das Formular aus.

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

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

}); 

Sie können in der API-Dokumentation zu lesen, wie das Ziel Option funktioniert, es ist so einfach, wie es aber bekommt.

Dann lesen Sie dieses Tutorial (aber Sie scheinen bereits über Request.IsAjaxRequest () kennen)
http://www.asp.net/learn/mvc/tutorial- 32-cs.aspx

Answer 2

Nicht sicher, dass dies helfen wird, aber ich habe in der letzten Woche oder so ähnlich zu tun.

Ich habe es nicht $ .ajax I $ .Geben verwendet. Aber das Wichtigste im Blick Ende war , "json") am Ende der Erklärung aufzunehmen. Verwendet, wenn ich Json Daten zurückgegeben, die ich itterate durch konnte. In dem Code hinter mir hatte dann return Json(mydata zu tun, so dass ich eigentlich durch die zurückgegebene Auflistung itterate könnte.

Ich habe auch eine return PartialView("commentList" an andere Stelle und am Client I

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

Ich bin mir nicht sicher, ob irgendetwas davon hilft, aber was half ich war nicht klein zu beginnen, aber wirklich klein und bauen von dort aus.

Wenn Sie mehr wollen, dann lassen Sie mich wissen und ich werde zu schaffen versuchen. Aber ich bin kein Experte JQuery.