题 下载列表中的MVC 4回发更改


我正在使用MVC4,我在布局中有一个菜单。我的菜单的一部分包含一个下拉列表,用户可以在其中选择可用的提供者。

<div class="row">
    <div class="col-md-4">
    @Html.DropDownListFor(x=> x.usr.DatUsrs.IdProvider, new SelectList(Lista, "Value","Text"))
    </div>
    <div class="col-md-3">
      Credit
      @Html.DisplayTextFor(x=> x.usrSelectedProvider.AvailiableCredit)
    </div>
    <div class="col-md-3">
      TEXT
    </div>
    <div class="col-md-2">
      Closing Day  @Html.DisplayTextFor(m=> m.usrSelectedProvider.ClosingDay)
    </div>
  </div>

我遇到的问题是:当用户更改下拉列表中的选定项目时,我想进行回发以便能够加载AvailiableCredit和ClosingDay。在webforms中,我可以使用autopostback执行此操作,但我还没有找到在MVC4中执行此操作的方法


11
2017-11-12 15:25


起源




答案:


有几种方法可以做到这一点,但首先你需要了解你正在做的事情的结构。

它不是MVC中的“回发”(或者,实际上,在HTTP中一般...... WebForms骗你)。您要做的只是将数据发布到服务器并接收响应。在MVC框架中,该帖子的目标是控制器动作。响应可以是几个不同的事情,具体取决于您采取的方法。

我建议编写一些JavaScript来通过AJAX执行此任务。这样页面就不会刷新,而您只是发送/接收与手头特定任务相关的数据。 ASP.NET MVC附带了jQuery,因此在这种情况下我将假设使用jQuery。

首先,您需要绑定到change事件 select 元件。它的 大概 确认与 id “IdProvider”,但您需要检查呈现的HTML以确保。假设它是,你可以使用这样的东西:

$('#IdProvider').change(function () {
    // respond to the change event in here
});

现在,您可以在该处理程序中对服务器进行AJAX调用。它可能很简单:

var selectedValue = $('#IdProvider').val();
$.post('@Url.Action("MyAction", "MyController")', { selection : selectedValue }, function (data) {
    // handle the server response here
});

这样,控制器操作将在所调用的参数中具有所选值 selection

public ActionResult MyAction(string selection)
{
    // do your server-side processing and get your data
    return Json(data);
}

此操作返回Json格式的数据,因为它在客户端上由JavaScript使用。所以当处理响应时 $.post() 在上面调用,你将获得该数据 data 那里的价值。

您在JavaScript代码中对该数据执行的操作由您决定。如果它是一个具有您正在寻找的两个值的简单结构,它可能就像这样简单:

$('#AvailableCredit').text(data.AvailableCredit);
$('#ClosingDay').text(data.ClosingDay);

或者,你 可以 包裹着 select 中的元素 form 并在选择更改时发布整个事物,然后控制器操作将返回a View 在该视图中填充数据。但这可能有点过头了,因为您只想发送一个值并接收两个值。


23
2017-11-12 15:38





放弃  : 这种方法将提交整个表格。 如果可能,最好执行Ajax操作而不是表单提交。 David的回答解释了如何进行Ajax调用。

如果加上课程 数据的变化提交 到选择列表(或任何输入元素,它应该触发回发)。然后就可以添加事件处理程序;将在变更时提交表格,如下所示。

$(function () {
    $(".data-on-change-submit")
        .change(function ()
                {
                   var form = button.closest("form");
                   form.submit();
                })
});

1
2018-06-17 21:31





在MVC中,不需要回发, 当用户从下拉列表中选择时,再次重定向到相同的操作,但这次操作将具有HttpPost属性(这将是您的回发)。然后你可以做任何你喜欢的事情并重新渲染相同的视图,但这次使用新的视图模型(加载新数据:AvailiableCredit和ClosingDay)

    public ActionResult DisplayMainView()
    {    
      LoadDataOnDropDown();    
      return View();    
    }

在用户选择值的下拉列表中,重定向到操作(使用httpPost)并提供重新加载数据所需的任何值。

[HttpPost]
public ActionResult DisplayMainView(string selectedValueFromDropdown) {

// get AvailiableCredit and ClosingDay  based on selection
ViewBag.AvailiableCredit = myService.GetAvailiableCredit (selectedValueFromDropdown);
ViewBag.ClosingDay   = myService.GetClosingDay (selectedValueFromDropdown);

return View;

}

这是一个伪代码,说明了如何使用HttpPost来模拟webForm回发。 N.B.:I使用了viewbag,但我建议为你创建的每个视图使用一个单独的viewmodel。


0
2017-11-12 15:30



你能给我一个简单的例子吗? - mmilan
我有一点不同的情况,我也提交按钮页面,请求进行相同的操作。我如何知道请求是来自下拉菜单还是提交按钮。 - Jagz W
太棒了,现在当你想要点击“保存”按钮时,你会怎么做? - M Kenyon II