我開始使用 MVC 創(chuàng)建我的項(xiàng)目，使用 mvc 創(chuàng)建不同的項(xiàng)目真的很有趣。所以我前段時(shí)間創(chuàng)建了一個(gè)數(shù)據(jù)表，當(dāng)您在單個(gè)下拉列表中選擇值時(shí)過濾數(shù)據(jù)但我仍然對(duì)在單個(gè)視圖中使用多個(gè)下拉列表和兩個(gè)模型過濾數(shù)據(jù)感到好奇我做了什么......首先，我創(chuàng)建了一個(gè)類，可用于使用兩個(gè)模型顯示我的兩個(gè)數(shù)據(jù)表這是我在 mvc 中的課程 public class MyData { public IEnumerable<pmTA_ProjectCategory> ProjectCategory { get; set; } public IEnumerable<pmTA_FundCategory> FundCategory { get; set; } }創(chuàng)建我的類后，我為兩個(gè)數(shù)據(jù)表創(chuàng)建了一個(gè)代碼，使用一個(gè)索引視圖和局部視圖視圖來調(diào)用兩個(gè)數(shù)據(jù)表這是索引視圖和局部視圖視圖的代碼，名稱為“MyPartialView”查看索引： @using myProject.Models; @model MyData <div id="myPartialView"> @Html.Partial("MyPartialView",Model) </div> @if (Model.ProjectCategory != null) { <table class="table table-bordered table-hover "><thead> <tr> <th>id</th> <th>title </th> <th> description </th> </tr></thead><tbody> @foreach (var item in Model.ProjectCategory) { <tr> <td> @Html.DisplayFor(modelItem => item.id) </td> <td> @Html.DisplayFor(modelItem => item.title) </td> <td> @Html.DisplayFor(modelItem => item.description) </td> </tr> }</tbody> </table>}
1 回答
Qyouu
TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超11個(gè)贊
具有多個(gè)下拉列表的多個(gè)表
1）在主視圖中添加兩個(gè)下拉菜單，例如
<div class="dropdown">
@Html.DropDownList("id", (List<SelectListItem>)ViewBag.proj, "--Select id--", new { @onchange = "CallChangefunc1(this.value)" })
</div>
<div class="dropdown">
@Html.DropDownList("id", (List<SelectListItem>)ViewBag.funds, "--Select id--", new { @onchange = "CallChangefunc2(this.value)" })
</div>
2) 添加兩個(gè)局部視圖 1st with name_GetProjectCategory.cshtml和 2nd with name_GetFundCategory.cshtml
確保
第一個(gè)局部視圖@model將是類型@model IEnumerable<WebApplicationMVC1.Controllers.ProjectCategory>
第二部分視圖@model將是類型@model IEnumerable<WebApplicationMVC1.Controllers.FundCategory>
只需在相應(yīng)的部分視圖中添加您的內(nèi)容。
確保您的兩個(gè)部分視圖都包含。
@foreach (var item in Model) { //You table contents }
3）在主視圖中調(diào)用兩個(gè)局部視圖，如
<div id="myPartialView1">
@{Html.RenderPartial("_GetProjectCategory", Model.ProjectCategories);}
</div>
<div id="myPartialView2">
@{Html.RenderPartial("_GetFundCategory", Model.FundCategories);}
</div>
4）然后創(chuàng)建一個(gè)視圖模型
public class ProjectFundViewModel
{
public List<ProjectCategory> ProjectCategories { get; set; }
public List<FundCategory> FundCategories { get; set; }
}
5）您的操作方法將是（其示例代碼并替換為您的代碼）。
public ActionResult Index()
{
//The below query replace by yours
var projects = db.ProjectCategories.ToList();
List<SelectListItem> dropDownItems1 = projects.Select(c => new SelectListItem { Text = c.title, Value = c.id.ToString() }).ToList();
ViewBag.proj = dropDownItems1;
//The below query replace by yours
var funds = db.FundCategories.ToList();
List<SelectListItem> dropDownItems2 = funds.Select(c => new SelectListItem { Text = c.title, Value = c.id.ToString() }).ToList();
ViewBag.funds = dropDownItems2;
ProjectFundViewModel viewModel = new ProjectFundViewModel
{
ProjectCategories = projects,
FundCategories = funds
};
return View(viewModel);
}
6) 將 ajax 調(diào)用添加到您的主視圖中，當(dāng)您在相應(yīng)的下拉列表中更改任何選項(xiàng)時(shí)調(diào)用該調(diào)用
<script>
function CallChangefunc1(id) {
$.ajax({
url: "@Url.Action("GetProjectCategory", "Default")",
data: { id: id },
type: "Get",
dataType: "html",
success: function (data) {
console.log(data);
//Whatever result you have got from your controller with html partial view replace with a specific html.
$("#myPartialView1").html( data ); // HTML DOM replace
}
});
}
function CallChangefunc2(id) {
$.ajax({
url: "@Url.Action("GetFundCategory", "Default")",
data: { id: id },
type: "Get",
dataType: "html",
success: function (data) {
console.log(data);
//Whatever result you have got from your controller with html partial view replace with a specific html.
$("#myPartialView2").html( data ); // HTML DOM replace
}
});
}
</script>
7) 最后你的 ajax 調(diào)用命中了可以渲染各自局部視圖的動(dòng)作方法。
public PartialViewResult GetProjectCategory(int id)
{
var projects = db.ProjectCategories.ToList();
var model = projects.Where(x => x.id == id).ToList();
return PartialView("_GetProjectCategory", model);
}
public PartialViewResult GetFundCategory(int id)
{
var funds = db.FundCategories.ToList();
var model = funds.Where(x => x.id == id).ToList();
return PartialView("_GetFundCategory", model);
}
8）確保你的主要觀點(diǎn)@model是@model WebApplicationMVC1.Controllers.ProjectFundViewModel不IEnumerable。
具有多個(gè)下拉列表的單表
1) 在主視圖中添加兩個(gè)帶有 id 的下拉列表
<div class="dropdown">
@Html.DropDownList("id", (List<SelectListItem>)ViewBag.ids, "--Select id--", new { @onchange = "CallChangefunc1(this.value)", @id = "dropdown1" })
</div>
<div class="dropdown">
@Html.DropDownList("title", (List<SelectListItem>)ViewBag.titles, "--Select title--", new { @onchange = "CallChangefunc2(this.value)", @id = "dropdown2" })
</div>
2）添加名稱GetFilteredData.cshtml為模型的局部視圖@model IEnumerable<WebApplicationMVC1.Controllers.ProjectCategory>。
確保您的部分視圖包含。
@foreach (var item in Model) { //You table contents }
3）在主視圖中調(diào)用您的局部視圖，例如
<div id="myPartialView">
@{Html.RenderPartial("GetFilteredData", Model.ProjectCategories);}
</div>
4) 現(xiàn)在您的第一個(gè)下拉列表包含項(xiàng)目類別中的ids第二個(gè)下拉列表titles。
public ActionResult Index()
{
var projects = db.ProjectCategories.ToList();
List<SelectListItem> dropDownItems1 = projects.Select(c => new SelectListItem { Text = c.id.ToString(), Value = c.id.ToString() }).ToList();
ViewBag.ids = dropDownItems1;
List<SelectListItem> dropDownItems2 = projects.Select(c => new SelectListItem { Text = c.title, Value = c.title }).ToList();
ViewBag.titles = dropDownItems2;
ProjectFundViewModel viewModel = new ProjectFundViewModel
{
ProjectCategories = projects,
};
return View(viewModel);
}
5）從主視圖添加ajax調(diào)用，如
<script>
function CallChangefunc1(id) {
var title = $("#dropdown2").val();
$.ajax({
url: "@Url.Action("GetFilteredData", "Default2")",
data: { id: id, title: title },
type: "Get",
dataType: "html",
success: function (data) {
console.log(data);
//Whatever result you have got from your controller with html partial view replace with a specific html.
$("#myPartialView").html( data ); // HTML DOM replace
}
});
}
function CallChangefunc2(title) {
var id = $("#dropdown1").val();
$.ajax({
url: "@Url.Action("GetFilteredData", "Default2")",
data: { id: id, title: title },
type: "Get",
dataType: "html",
success: function (data) {
console.log(data);
//Whatever result you have got from your controller with html partial view replace with a specific html.
$("#myPartialView").html( data ); // HTML DOM replace
}
});
}
</script>
6) 最后你的 ajax 調(diào)用命中了帶有 2 個(gè)參數(shù)的 action 方法。
public PartialViewResult GetFilteredData(int? id, string title)
{
var query = db.ProjectCategories.ToList();
if (id != null)
query = query.Where(x => x.id == id).ToList();
if (!string.IsNullOrEmpty(title))
query = query.Where(x => x.title == title).ToList();
return PartialView("GetFilteredData", query);
}
- 1 回答
- 0 關(guān)注
- 177 瀏覽
添加回答
舉報(bào)
0/150
提交
取消