在MVC 4中通过Ajax更新WebGrid和DropDown
本文关键字:更新 WebGrid DropDown Ajax MVC | 更新日期: 2023-09-27 18:06:53
我是MVC的新手,刚刚遇到一个场景,我需要一些帮助。我正在创建一个网站在ASP。净,c#。. NET使用MVC所以根据我的要求,我有两个下拉框,这是<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的内容将根据选择上述任何一个下拉菜单而改变。
我的代码改变了:<<strong>视图/strong>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>
控制器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杂志
更新:- 我已经部分回答了我的问题,如何更新WebGrid上的下拉选择更改通过Ajax在MVC 4
最后我通过使用局部视图解决了这个问题。现在我填满它很简单。我实现的步骤如下:
- 我已经创建了两个视图(
- _
MainView
是一个局部视图,我把完整的WebGrid
和WebGrid
与Model
绑定在一起。 - 现在在
MainView
中,我将部分视图(_MainView
)放入div标签中,并使用Model
(@Html.Partial("_MainView", Model)
) 称为部分视图。 - 在Ajax调用中,我按照上面的问题对
ActionResult
进行了调用,并且在成功时,我使用返回的部分视图更新了div标记 - 从
ActionResult
,而不是返回完整的视图,我返回部分视图更新WebGrid
(return PartialView("_MainView", responceObject);
)。
MainView
和_ MainView
)我有一个运行的示例应用程序。如果有人发现任何困难得到这个答案,然后可以问我。我可以在这里分享完整的工作代码。感谢所有人,特别是Karthik回答我的问题和所有我的评论:)