私はMVC Razerビューのページテーブルのカスケードドロップダウンフィルタを作成しようとしています。私はAJAXとjQuery経由で2番目のドロップダウンを設定しようとしているので、ユーザーにシームレスな方法でカスケード作業をしたいと思います。ここでMVC 5でAJAX/jQueryポピュレートされたカスケードドロップダウンを使用しました。
public ActionResult IndexByPartyToken(string id)
{
var t_Group = db.T_Group.Where(g => string.IsNullOrEmpty(id) ||
g.T_Party.Contains(db.T_Party.Where(p => p.PartyToken == id).FirstOrDefault()))
.Select(g => new { ID = g.GroupId, GroupText = g.GroupText });
return Json(t_Group, JsonRequestBehavior.AllowGet);
}
である私のRazerビュー
:ここ は私のコントローラのアクションは、テーブルpublic ActionResult Index(int? page, string sortOrder, string partyToken, Guid? groupId, string threadTitle)
{
var parties = db.T_Party.Select(p => new { p.PartyToken, p.PartyName });
var groups = db.T_Group.Where(g => string.IsNullOrEmpty(partyToken) ||
g.T_Party.Contains(db.T_Party.Where(p => p.PartyToken == partyToken).FirstOrDefault()))
.Select(g => new { g.GroupId, g.GroupText });
ViewBag.Parties = new SelectList(parties.AsEnumerable(), "PartyToken", "PartyName",partyToken);
ViewBag.Groups = new SelectList(groups.AsEnumerable(), "GroupId", "GroupText", groupId);
ViewBag.ThreadTitleSortParam = "ThreadTitle";
ViewBag.ImportanceSortParam = "Importance";
ViewBag.ExternalTokenSortParam = "ExternalToken";
ViewBag.GroupNameSortParam = "GroupName";
ViewBag.PartyNameSortParam = "PartyName";
var t_Thread = db.T_Thread.Include(t => t.T_Group).Include(t => t.T_Party).Include(t => t.T_User);
if (!string.IsNullOrEmpty(partyToken))
{
t_Thread = t_Thread.Where(t => t.PartyToken == partyToken);
}
if (!string.IsNullOrEmpty(threadTitle))
{
t_Thread = t_Thread.Where(t => t.ThreadText.Contains(threadTitle));
}
switch (sortOrder)
{
case ("ThreadTitle_desc"):
t_Thread = t_Thread.OrderByDescending(t => t.ThreadText);
break;
case ("Importance"):
t_Thread = t_Thread.OrderBy(t => t.ThreadImportance);
ViewBag.ImportanceSortParam = "Importance_desc";
break;
case ("Importance_desc"):
t_Thread = t_Thread.OrderByDescending(t => t.ThreadImportance);
break;
case ("ExternalToken"):
t_Thread = t_Thread.OrderBy(t => t.ExternalToken);
ViewBag.ExternalTokenSortParam = "ExternalToken_desc";
break;
case ("ExternalToken_desc"):
t_Thread = t_Thread.OrderByDescending(t => t.ExternalToken);
break;
case ("GroupName"):
t_Thread = t_Thread.OrderBy(t => t.T_Group.GroupText);
ViewBag.GroupNameSortParam = "GroupName_desc";
break;
case ("GroupName_desc"):
t_Thread = t_Thread.OrderByDescending(t => t.T_Group.GroupText);
break;
case ("PartyName"):
t_Thread = t_Thread.OrderBy(t => t.T_Group.T_Party.FirstOrDefault().PartyName);
ViewBag.PartyNameSortParam = "PartyName_desc";
break;
case ("PartyName_desc"):
t_Thread = t_Thread.OrderByDescending(t => t.T_Group.T_Party.FirstOrDefault().PartyName);
break;
default:
t_Thread = t_Thread.OrderBy(t => t.ThreadText);
ViewBag.ThreadTitleSortParam = "ThreadTitle_desc";
break;
}
int pageToRender = page ?? 1;
return View(t_Thread.ToPagedList(pageToRender, 20));
}
ここ
私はドロップダウンのためのデータを取得するために使用しているアクションがあるの移入に使用されています
@model IEnumerable<EasyKnowMVC.Models.T_Thread>
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_LayoutMaster.cshtml";
}
@using X.PagedList.Mvc;
@using X.PagedList;
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "searchThread" }))
{
<p>
Seach By Thread Title : @Html.TextBox("threadTitle")
Party : @Html.DropDownList("partyToken", (SelectList)ViewBag.Parties, "All", new { id = "ddlPartySearch" })
Group : @Html.DropDownList("groupId", (SelectList)ViewBag.Parties, "All", new { id = "ddlGroupSearch" })
<input type="submit" value="Search" />
</p>
}
<table class="grid">
<tr class="head">
<th>
@Html.ActionLink(@Html.DisplayNameFor(model => model.ThreadText).ToString(), "Index", new { sortOrder = ViewBag.ThreadTitleSortParam })
</th>
<th>
@Html.ActionLink(@Html.DisplayNameFor(model => model.ThreadImportance).ToString(), "Index", new { sortOrder = ViewBag.ImportanceSortParam })
</th>
<th>
@Html.DisplayNameFor(model => model.IsActive)
</th>
<th>
@Html.DisplayNameFor(model => model.IsLocked)
</th>
<th>
@Html.ActionLink(@Html.DisplayNameFor(model => model.ExternalToken).ToString(), "Index", new { sortOrder = ViewBag.ExternalTokenSortParam })
</th>
<th>
@Html.ActionLink(@Html.DisplayNameFor(model => model.T_Group.GroupText).ToString(), "Index", new { sortOrder = ViewBag.GroupNameSortParam })
</th>
<th>
@Html.ActionLink(@Html.DisplayNameFor(model => model.T_Party.PartyName).ToString(), "Index", new { sortOrder = ViewBag.PartyNameSortParam })
</th>
<th>
@Html.DisplayNameFor(model => model.T_User.PartyToken)
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.ThreadText)
</td>
<td>
@Html.DisplayFor(modelItem => item.ThreadImportance)
</td>
<td>
@Html.DisplayFor(modelItem => item.IsActive)
</td>
<td>
@Html.DisplayFor(modelItem => item.IsLocked)
</td>
<td>
@Html.DisplayFor(modelItem => item.ExternalToken)
</td>
<td>
@Html.DisplayFor(modelItem => item.T_Group.GroupText)
</td>
<td>
@Html.DisplayFor(modelItem => item.T_Party.PartyName)
</td>
<td>
@Html.DisplayFor(modelItem => item.T_User.PartyToken)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.ThreadId }) |
@Html.ActionLink("Details", "Details", new { id = item.ThreadId }) |
@Html.ActionLink("Delete", "Delete", new { id = item.ThreadId }) |
@Html.RouteLink("Posts", new { controller = "Posting", action = "Index", Id = item.ThreadId })
</td>
</tr>
}
</table>
<div>
@Html.PagedListPager((IPagedList)Model, page => Url.Action("Index", new { page }))
</div>
<script type="text/javascript">
$(function() {
$("#ddlPartySearch").change(function() {
$.ajax({
cache: false,
type: "GET",
url: "GroupMaintenance/IndexByPartyToken",
data: { "id": $(this).val() },
success: function (data) {
var ddlGroupSearch = $("ddlGroupSearch");
ddlGroupSearch.empty();
ddlGroupSearch.append(new Option("All", ""));
$.each(data, function (id, option) {
ddlGroupSearch.append(new Option(option.GroupText, option.ID));
});
ddlGroupSearch.trigger("chosen:updated");
},
error: function (xhr, ajaxOptions, thrownError) {
alert('Failed to retrieve groups.');
}
});
});
});
</script>
私は、AJAX呼び出しからデータを取得していますが、dに配置されていません。 ropdown。誰がなぜこれが事実だろうと知っていますか?
の
されている必要があります。 'var ddlGroupSearch = $("#ddlGroupSearch ");'に変更してください。 '#'に注意してください。 – Ozan
ああ、どうしたらそれを見逃しましたか? Derp ....その今働いている。多くのありがとう – Wizardskills
私はViewbagを避け、むしろViewModelを使用します。それ以外の場合、MVCを使用するポイントは何ですか? Webフォームだけを使用することもできます。 –