我開始使用 MVC 創建我的項目，使用 mvc 創建不同的項目真的很有趣。所以我前段時間創建了一個數據表，當您在單個下拉列表中選擇值時過濾數據但我仍然對在單個視圖中使用多個下拉列表和兩個模型過濾數據感到好奇我做了什么......首先，我創建了一個類，可用于使用兩個模型顯示我的兩個數據表這是我在 mvc 中的課程 public class MyData { public IEnumerable<pmTA_ProjectCategory> ProjectCategory { get; set; } public IEnumerable<pmTA_FundCategory> FundCategory { get; set; } }創建我的類后，我為兩個數據表創建了一個代碼，使用一個索引視圖和局部視圖視圖來調用兩個數據表這是索引視圖和局部視圖視圖的代碼，名稱為“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貢獻1786條經驗 獲得超11個贊
具有多個下拉列表的多個表
1）在主視圖中添加兩個下拉菜單，例如
<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) 添加兩個局部視圖 1st with name_GetProjectCategory.cshtml和 2nd with name_GetFundCategory.cshtml
確保
第一個局部視圖@model將是類型@model IEnumerable<WebApplicationMVC1.Controllers.ProjectCategory>
第二部分視圖@model將是類型@model IEnumerable<WebApplicationMVC1.Controllers.FundCategory>
只需在相應的部分視圖中添加您的內容。
確保您的兩個部分視圖都包含。
@foreach (var item in Model) { //You table contents }
3）在主視圖中調用兩個局部視圖，如
<div id="myPartialView1">
@{Html.RenderPartial("_GetProjectCategory", Model.ProjectCategories);}
</div>
<div id="myPartialView2">
@{Html.RenderPartial("_GetFundCategory", Model.FundCategories);}
</div>
4）然后創建一個視圖模型
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 調用添加到您的主視圖中，當您在相應的下拉列表中更改任何選項時調用該調用
<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 調用命中了可以渲染各自局部視圖的動作方法。
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）確保你的主要觀點@model是@model WebApplicationMVC1.Controllers.ProjectFundViewModel不IEnumerable。
具有多個下拉列表的單表
1) 在主視圖中添加兩個帶有 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）在主視圖中調用您的局部視圖，例如
<div id="myPartialView">
@{Html.RenderPartial("GetFilteredData", Model.ProjectCategories);}
</div>
4) 現在您的第一個下拉列表包含項目類別中的ids第二個下拉列表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調用，如
<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 調用命中了帶有 2 個參數的 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 關注
- 187 瀏覽
添加回答
舉報
0/150
提交
取消