jQueryを使用してMVCパーシャルビューのデータをフィルタリングする方法

Question

Index.aspxページのドロップダウンを変更すると、Ajax、jQueryを使用してデータを更新するにはどうすればよいですか？ 私はそのプロジェクトに関連するすべての問題を示すべきProjectListドロップダウンを持つページを持っています。

コントローラアクションの戻り値を変更した場合、コメント付きコードを参照してください。マスターページが削除され、PartialViewがロードされるか、何もロードされません。私はまた、次のようなことを試みました：return PartialView（ "MyIssues"、paginatedIssues）;

以下のコードでは、Ajaxを使用してページを変更できますが、PartialViewをリフレッシュするために正しいデータまたはhtmlが返されていません。

何が間違っているのですか、またはデータ更新をどのように達成できますか？

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

素晴らしいjQueryフォームプラグイン：http://malsup.com/jquery/form/を使用して、ddl changeイベントでフォームを送信できます。

$(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

Answer 2

これは助けになるとは思っていませんが、私は先週ほど似たようなことをしてきました。

私はしなかった$ .ajax私は$。Postを使用しました。しかし、最後の最後には、, "json")を記載することが重要でした。それは、私が繰り返し行うことができるJsonデータを返すときに使用されました。コードの背後で私はreturn Json(mydataをしなければならなかったので、実際に返されたコレクションを繰り返し処理することができました。

私はまた、他の場所でreturn PartialView("commentList"を行なったし、クライアント側I

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

で私は、これのいずれかができますかはわからないが、何を手伝ってくれたことは小さいが、本当に小さくない始めから構築することでしたそこ。

もっと詳しく知りたい場合は、私が提供しようとします。しかし、私はJqueryの専門家ではありません。