如何使用jQuery過濾MVC partialview中的數據

當我更改Index.aspx頁面上的下拉列表時，如何使用Ajax，jQuery更新數據？我有一個ProjectList下拉頁面，它應該顯示與該項目相關的所有問題。如何使用jQuery過濾MVC partialview中的數據

如果我改變我的控制動作的返回值，見註釋代碼，它會刪除該母版頁和公正加載PartialView或者不加載任何東西。我也試圖做這樣的事情：返回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>

來源

2009-07-29 Picflight

你可以使用jQuery的真棒形式插件：http://malsup.com/jquery/form/並有DDL更改事件提交表單。

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

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

});

您可以在API文檔中閱讀目標選項的工作原理，它儘可能簡單。

然後閱讀本教程（但你似乎已經知道Request.IsAjaxRequest（））
http://www.asp.net/learn/mvc/tutorial-32-cs.aspx

來源

2009-08-01 05:37:17 JeremyWeir

不知道這會有所幫助，但在上週左右我一直在做類似的事情。

我沒有做$ .ajax我用$ .Post。但是在結論中最重要的是在發言結束時包括, "json")。當我返回Json數據時，我可以通過它來使用。在後面的代碼中，我不得不做return Json(mydata，這樣我才能真正通過返回的集合進行迭代。

我還做了一個return PartialView("commentList"其他地方，並在客戶端我

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

我不知道是否有任何這有助於但什麼幫助我是開始不小，但非常小，並從建立那裏。

如果你想要更多，那麼讓我知道，我會盡力提供。但我不是Jquery的專家。

來源

2009-07-29 22:06:00 griegs

如何使用jQuery過濾MVC partialview中的數據

回答

相關問題