Question

我的索引视图有一个填充的ClientIDs DropDownList。我的目的是在选择其中一个ClientID时动态显示电子邮件地址的WebGrid。使用以下jQuery代码，我成功地进入了一个名为PopulateEmailAddressUI的控制器操作。

jQuery(document).ready(function () {
    $("#MeditechDropDown").change(function () {
        var id = $(this).find(":selected").val()
        var clientID = { "clientID": id }
        $.ajax({
            url: "/Home/PopulateEmailAddressUI",
            data: JSON.stringify(clientID), // Send value of the drop down change of option
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            success: function (response) {
                $('#gridContent').load()
            }
        });
    });
});

我的控制器操作如下：

[HttpPost]
public ActionResult PopulateEmailAddressUI(string clientID)
{
    _clientModel = InitialiseBarClientsModel();

    _clientModel.FindEmailAddresses(from client in eFormsDB.BAR_Clients where client.ClientId == clientID select client);

    return PartialView("_EmailAddressGrid", _clientModel);
}

我的_EmailAddressGrid局部视图如下所示：

@model BarClients.Models.BarClientsViewModel

@{
    var grid = new WebGrid(Model.EmailAddressesOfChosenClient, ajaxUpdateContainerId: "gridContent");
}

    div id="gridContent"
    @grid.GetHtml()  
    /div (arrows omitted).

我采用这种方法遇到的麻烦是没有WebGrid出现过。如果我查看页面源代码，我看到的只是带有ClientIDs的索引视图，但没有div为gridContent的元素。

每次从DropDownList中选择ClientID时，我需要做出哪些更改以便我可以动态显示不同的WebGrids？

非常感谢。

Answer 1

您的代码是对的，但您忘记使用回复。检查此代码：

 success: function (response) {
   $('#gridContent').load()
 }

该函数内部的行无效......并且您没有使用响应。

替换为：

 success: function(html) {
   $("#gridContent").html(html);
 }

您可以使用此代码或任何DOM Replacement或DOM Insertion, Inside或其他任何内容。

建议将参数dataType:'html'包含在jquery ajax调用中，以表明您希望将html作为响应。（注意：我已调用函数参数html来指示原始响应为html，但您可以为其指定您喜欢的名称。

您还应该为ajax调用添加错误处理程序。您可以使用$.ajaxSetup()全局执行此操作。这样，如果通信或服务器出现问题，您将收到一些反馈。

Answer 2

嗨，这是我完整的工作解决方案。

索引视图如下所示：

@model BarClients.Models.BarClientsViewModel

@{
    ViewBag.Title = "Index";
}

（索引视图的许多项目在此处删除，但部分显示如下）。

@{Html.RenderAction("EmailAddressGrid", "Home");}

My Partial view _EmailAddressGrid.cshtml如下所示：

@model BarClients.Models.BarClientsViewModel

@{
    WebGrid grid = null;
    if (Model.EmailAddressesOfChosenClient.Count<string>() != 0)
    {
        grid = new WebGrid(Model.EmailAddressesOfChosenClient, ajaxUpdateContainerId: "gridContent");
    }
}

div id="gridContent" (arrows omitted)
@{ if (grid != null)
   {
      @grid.GetHtml()  //work to be done here
   }
}
div (arrows ommitted)

我的两个控制器动作如下：

[HttpPost]
public ActionResult PopulateEmailAddressUI(string clientID)
{
    _clientModel = InitialiseBarClientsModel();

    _clientModel.FindEmailAddresses(from client in eFormsDB.BAR_Clients where client.ClientId == clientID select client);

    return PartialView("~/Views/Shared/_EmailAddressGrid.cshtml", _clientModel);
}

public ActionResult EmailAddressGrid()
{
   _clientModel = InitialiseBarClientsModel();
   return PartialView("~/Views/Shared/_EmailAddressGrid.cshtml", _clientModel);
}

我的jQuery函数（感谢Jotabe）如下：

jQuery(document).ready(function () {
    $("#MeditechDropDown").change(function () {
        var id = $(this).find(":selected").val()
        var clientID = { "clientID": id }
        $.ajax({
            url: "/Home/PopulateEmailAddressUI",
            data: JSON.stringify(clientID), // Send value of the drop down change of option
            type: 'POST',
            datatype: 'html',
            contentType: 'application/json; charset=utf-8',
            success: function (response) {
                $('#gridContent').html(response)
            }
        });
    });
});

JotaBe的提示和其他一些网络研究让我来到这里。我现在基于在Index视图中从DropDownList中选择或重新选择的ClientID，在Index视图上动态更改WebGrids。

尝试基于DropDownList选择显示动态WebGrids - ASP.Net MVC4

2 个答案: