jQueryを使用してMVC部分ビューでデータをフィルタリングするにはどうすればよいですか
-
05-07-2019 - |
質問
Index.aspxページのドロップダウンを変更するときに、Ajax、jQueryを使用してデータを更新するにはどうすればよいですか? そのプロジェクトに関連するすべての問題を表示するProjectListドロップダウンがあるページがあります。
コントローラーアクションの戻り値を変更した場合、コメント化されたコードを参照してください。マスターページが削除され、PartialViewが読み込まれるか、何も読み込まれません。私も次のようなことを試みました:return PartialView(" MyIssues&quot ;, 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>
解決
素晴らしいjQuery Formプラグインを使用できます: 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
他のヒント
これが役立つかどうかわかりませんが、私は先週かそこらで同様のことをしてきました。
$。Postを使用して$ .ajaxを実行しませんでした。しかし、ビューの最後で重要なことは、ステートメントの最後に、&quot; json&quot;)
を含めることでした。それを使用して、Jsonデータを返したときに、それを通過することができました。背後にあるコードでは、 return Json(mydata
を実行する必要があったため、返されたコレクションを実際に変更できます。
また、 return PartialView(&quot; commentList&quot;
を他の場所やクライアント側で実行しました
$.post("/jQueryTests/jQueryAddMessageComment", { commentText: commentText }, function(newComment) {
$("#divComments" + id.toString()).html(newComment);
});
これらのいずれかが役立つかどうかはわかりませんが、私を助けたのは、小さくなく、本当に小さく始めてそこから積み上げることでした。
さらに知りたい場合はお知らせください。提供させていただきます。しかし、私はJqueryの専門家ではありません。