C# 在MVC4中通过Ajax更新WebGrid和下拉列表

我对MVC非常陌生，刚刚遇到一个需要帮助的场景。我正在ASP.NET中创建一个网站，使用MVC4的C#.NET。因此，根据我的要求，我在我的

cshtml

页面中有两个下拉列表，即

标记

1) selectUniversity
2) selectCollege

我有一个名为

College\u 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>

函数ajaxCallGetColleges（）{
var e=document.getElementById（“selectUniversity”）；
var strUniv=e.options[e.selectedIndex].value；
$.ajax({
url:'@url.Action（“GetCollegesActionResult”，“CollegeController”），
键入：“POST”，
数据：{'data'：strUniv}，
成功：函数（ResponceObject）{
警报（ResponceObject）；//需要将此数据更新到WebGrid中，然后选择College dropdown。
}
});
}
函数ajaxCallGetCollegeDetail（）{
var e=document.getElementById（“selectCollege”）；
var strCollege=e.options[e.selectedIndex].value；
$.ajax({
url:'@url.Action（“GetCollegeDetailActionResult”，“CollegeController”），
键入：“POST”，
数据：{'data'：strCollege}，
成功：函数（ResponceObject）{
警报（ResponceObject）；//需要将此数据更新到WebGrid中。
}
});
}

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>

@{
//将大学名称作为选项动态添加到下拉列表的逻辑
}
@{
//将学院名称作为选项动态添加到下拉列表的逻辑
}
@{
WebGrid=新的WebGrid（来源：模型，
defaultSort:“名称”，
行数：15）；
grid.SortDirection=SortDirection.升序；
}
@grid.GetHtml(
fillEmptyRows:false，
模式：WebGridPagerModes.All，
第一个文本：“，
lastText:“Last>>”，
列：新[]{
网格列（“Univ_ID”，标题：“Univ ID”，canSort:false），
网格栏（“大学名称”，标题：“大学名称”），
grid.Column（“College_ID”，标题：“College ID”，canSort:true），
网格栏（“学院名称”，标题：“学院名称”），
grid.Column（“学院地址”，标题：“学院地址”，canSort:true），
网格栏（“学院联系人”，标题：“联系人”），
grid.Column（“”，标题：“Edit”，格式：（item）=>Html.ActionLink（“Edit”，“Edit”，new{univ_ID=item.univ_ID}）），
grid.Column（“”，标题：“Delete”，格式：（item）=>Html.ActionLink（“Delete”，“Delete”，new{univ_ID=item.univ_ID}，new{onclick=“return confirm（'you sure？'）；”}））
})

控制器 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);
        }

PublicActionResult SearchByBranchStatus（字符串数据）
{
列出学院=_CollegesService.GetCollegesDetail（）；
var RespObject=colleges.Where（c=>c.Name==数据）；
返回视图（对象）；
}
public ActionResult GetCollegeDetailActionResult（字符串数据）
{
列出学院=_collegeService.GetCollegeDetail（）；
var RespObject=colleges.Where（c=>c.Name==数据）；
返回视图（对象）；
}

我也浏览了很多SO以及MSDN网站，但我没有找到任何帮助。请为我提供任何参考或想法来解决这个问题。我知道关于我的问题，在很多论坛上都有很多问题，但我没有得到答案。这可能是最简单的一个，但由于我最近开始研究MVC4，我对MVC4没有很好的理解。我急切地等待着答案。任何帮助都将不胜感激。提前谢谢

注意：-目前我指的是

更新：-

---

我已经部分回答了我的问题，即如何在MVC4中通过Ajax更新WebGrid的下拉选择更改。Finlay我已经通过使用部分视图解决了这个问题。现在我把它填得很简单。我如何实现的步骤如下所述：

我创建了两个视图（

MainView

和{

MainView

）

_

MainView

是一个局部视图，其中我放置了完整的

WebGrid

，而

WebGrid

是我与

Model

绑定的

现在在

MainView

中，我将partialview（

MainView

）放在一个div标记中，并使用

Model

（

@Html.partial（“\u MainView”，Model）”调用partialview

在Ajax调用中，我调用了

ActionResult

，正如我在上面的问题中所描述的，成功后，我用返回的部分视图更新了div标记

在

ActionResult

中，我没有返回完整视图，而是返回了部分视图，以仅更新

WebGrid

（

返回部分视图（“\u MainView”，responceObject）；

）

我有一个正在运行的示例应用程序。如果有人觉得得到这个答案有什么困难，可以问我。我可以在这里分享完整的工作代码。谢谢大家，特别是卡蒂克的回复