¿Cómo filtro los datos en la vista parcial MVC usando jQuery?

Question

¿Cómo actualizo datos usando Ajax, jQuery cuando cambio un menú desplegable en mi página Index.aspx? Tengo una página con una lista desplegable de ProjectList que debería mostrar todos los problemas relacionados con ese proyecto.

Si cambio el valor de retorno en la acción de mi Controlador, veo el código comentado, elimina la página maestra y simplemente carga la Vista parcial o no carga nada. También intenté hacer algo como: return PartialView (" MyIssues " ;, paginatedIssues);

Con el siguiente código, puedo cambiar la página usando Ajax pero no estoy devolviendo los datos correctos o html para actualizar PartialView.

Entonces, ¿qué estoy haciendo mal o cómo puedo actualizar los datos?

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

Podrías usar el impresionante plugin jQuery Form: http://malsup.com/jquery/form/ y que el evento ddl change envíe el formulario.

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

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

}); 

Puede leer en los documentos de la API cómo funciona la opción de destino, aunque es tan simple como parece.

Luego lea este tutorial (pero ya parece saber sobre Request.IsAjaxRequest ())
http://www.asp.net/learn/mvc/tutorial- 32-cs.aspx

Answer 2

No estoy seguro de que esto ayude, pero he estado haciendo algo similar en la última semana más o menos.

No hice $ .ajax Usé $ .Post. Pero lo importante al final de la vista era incluir , " json ") al final de la declaración. Lo usé cuando devolví los datos de Json que pude analizar. En el código que estaba detrás, tuve que hacer return Json (mydata para poder realmente iterar a través de la colección devuelta.

También hice un return PartialView (" commentList " en otro lugar y en el extremo del cliente I

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

No estoy seguro de si algo de esto ayuda, pero lo que me ayudó fue comenzar no pequeño pero realmente pequeño y construir desde allí.

Si quieres más, házmelo saber y trataré de proporcionarte. Pero no soy un experto en Jquery.