我对 MVC 非常陌生,刚刚遇到了一个需要帮助的场景。我正在使用 MVC 4 在 ASP.NET、C#.NET 中创建一个网站。因此,根据我的要求,我有两个 DropDowns是 <select>
标签在我的 cshtml
页。
1) selectUniversity
2) selectCollege
我有一个名为 College_table
的数据库表,其字段是:
1) Univ_ID
2) Univ_Name
3) College_ID
4) College_Name
5) College_Address
6) College_Contact
现在在我的selectUniversity
上我列出了所有大学名称,并在selectCollege
中所有学院名称均属于selectUniversity
中选择的大学落下。 WebGrid 内容将根据上述任何下拉列表的选择而变化。
我的代码更改: 查看 JavaScript:
<script type="text/javascript">
function ajaxCallGetColleges() {
var e = document.getElementById("selectUniversity");
var strUniv = e.options[e.selectedIndex].value;
$.ajax({
url: '@Url.Action("GetCollegesActionResult", "CollegeController")',
type: 'POST',
data: { 'data': strUniv },
success: function (ResponceObject) {
alert(ResponceObject);//Need to update this data into WebGrid and selectCollege dropdown.
}
});
}
function ajaxCallGetCollegeDetail() {
var e = document.getElementById("selectCollege");
var strCollege = e.options[e.selectedIndex].value;
$.ajax({
url: '@Url.Action("GetCollegeDetailActionResult", "CollegeController")',
type: 'POST',
data: { 'data': strCollege },
success: function (ResponceObject) {
alert(ResponceObject);//Need to update this data into WebGrid.
}
});
}
</script>
CSHTML 代码:
<table>
<tr>
<td>
<select id="selectUniversity" name="selectUniversity" onchange="ajaxCallGetColleges()">
@{
//Logic for adding University names as options to the dropdown dynamically
}
</select>
</td>
<td>
<select id="searchBy" name="searchBy" onchange="ajaxCall()">
<select id="selectUniversity" name="selectUniversity" onchange="ajaxCallGetCollegeDetail()">
@{
//Logic for adding college names as options to the dropdown dynamically
}
</select>
</td>
</tr>
<tr>
<td colspan="2">
<div id="MyGrid">
@{
WebGrid grid = new WebGrid(source: Model,
defaultSort: "Name",
rowsPerPage: 15);
grid.SortDirection = SortDirection.Ascending;
}
@grid.GetHtml(
fillEmptyRows: false,
mode: WebGridPagerModes.All,
firstText: "<< First",
previousText: "< Prev",
nextText: "Next >",
lastText: "Last >>",
columns: new[] {
grid.Column("Univ_ID",header: "Univ ID", canSort: false),
grid.Column("Univ_Name",header: "Univ Name"),
grid.Column("College_ID",header: "College ID", canSort: true),
grid.Column("College_Name",header: "College Name"),
grid.Column("College_Address", header: "College Address", canSort: true),
grid.Column("College_Contact",header: "Contact"),
grid.Column("", header:"Edit", format: (item) => Html.ActionLink("Edit", "Edit", new { univ_ID=item.Univ_ID })),
grid.Column("", header:"Delete", format: (item) => Html.ActionLink("Delete", "Delete", new { univ_ID=item.Univ_ID}, new { onclick="return confirm('Are you sure?');"}))
})
</div>
</td>
</tr>
</table>
Controller C#.NET 代码:
public ActionResult SearchByBranchStatus(string data)
{
List<CollegesDetail> colleges= _collegeService.GetCollegesDetail();
var RespObject = colleges.Where(c => c.Name == data);
return View(RespObject);
}
public ActionResult GetCollegeDetailActionResult(string data)
{
List<CollegeDetail> colleges= _collegeService.GetCollegeDetail();
var RespObject = colleges.Where(c => c.Name == data);
return View(RespObject);
}
我也浏览了很多 SO 和 MSDN 网站,但没有找到任何帮助。请给我提供任何引用或想法来解决这个问题。我知道与我的问题相关,许多论坛上都提出了很多问题,但我还没有得到答案。可能是最简单的一个,但由于我最近开始研究 MVC 4,所以我对 MVC 4 没有很好的掌握。我急切地等待答案。任何帮助将不胜感激。提前致谢..
注意:- 目前我指的是 MSDN Magazine
更新:- 我已经部分回答了关于如何在 MVC 4 中通过 Ajax 更新 DropDown 选择更改时的 WebGrid 的问题
最佳答案
Finlay 我已经通过使用部分 View 解决了这个问题。现在我填写的很简单。我实现的步骤如下:
- 我创建了两个 View (
MainView
和 _MainView
) - _
MainView
是一个部分 View ,我在其中放置了完整的WebGrid
以及我已与Model
绑定(bind)的WebGrid
>. - 现在在
MainView
中,我将partialview(_MainView
)放入div标签中,并使用Model
(@Html.Partial("_MainView", Model)
) - 在 Ajax 调用中,我按照上面的问题所述调用了
ActionResult
,并在成功时使用返回的部分 View 更新了 div 标签 - 从
ActionResult
中,我没有返回完整的 View ,而是返回了部分 View 以仅更新WebGrid
(return PartialView("_MainView", responceObject);
)。
我有一个正在运行的示例应用程序。如果有人发现获得这个答案有任何困难,可以问我。我可以在这里分享完整的工作代码。感谢大家,特别是 Karthik 回答我的问题和我的所有评论:)
关于c# - MVC 4 中通过 Ajax 更新 WebGrid 和 DropDown,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15740377/