如何使用 jQuery 在 MVC 局部视图中过滤数据答案

【问题标题】：How do I filter data in MVC partialview using jQuery如何使用 jQuery 在 MVC 局部视图中过滤数据
【发布时间】：2009-07-29 21:10:19
【问题描述】：

当我更改 Index.aspx 页面上的下拉菜单时，如何使用 Ajax、jQuery 更新数据？我有一个带有 ProjectList 下拉列表的页面，其中应显示与该项目相关的所有问题。

如果我更改控制器操作的返回值，请参阅注释代码，它要么删除母版页并仅加载 PartialView，要么不加载任何内容。我也尝试过类似的操作：return PartialView("MyIssues", paginatedIssues);

通过下面的代码，我可以使用 Ajax 更改页面，但没有返回正确的数据或 html 来刷新 PartialView。

那么我做错了什么或者我该如何完成数据刷新？

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>

【问题讨论】：

标签： jquery asp.net-mvc asp.net-mvc-partialview

【解决方案1】：

您可以使用很棒的 jQuery 表单插件：http://malsup.com/jquery/form/ 并让 ddl 更改事件提交表单。

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

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

});

您可以在 API 文档中阅读 target 选项的工作原理，它非常简单。

然后阅读本教程（但您似乎已经了解 Request.IsAjaxRequest()）
http://www.asp.net/learn/mvc/tutorial-32-cs.aspx

【讨论】：

【解决方案2】：

不确定这是否会有所帮助，但我在过去一周左右一直在做类似的事情。

我没有做 $.ajax 我使用了 $.Post。但在视图末尾重要的是在语句末尾包含, "json")。当我返回可以迭代的 Json 数据时使用它。在后面的代码中，我必须执行return Json(mydata，这样我才能真正遍历返回的集合。

我还在其他地方和客户端做了一个return PartialView("commentList"

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

我不确定这是否有帮助，但对我有帮助的是从不小，而是从小开始，然后从那里开始。

如果您想要更多，请告诉我，我会尽力提供。但我不是 Jquery 专家。

【讨论】：