我正在使用 MVC4,并且布局内有一个菜单.part我的菜单包含一个下拉列表,用户可以在其中选择可用的提供程序。
<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>
我遇到的问题是:当用户更改下拉列表中的选定项目时,我想进行回发以便能够加载可用信用和关闭日。在网络表单中,我可以使用自动回发来执行此操作,但是在MVC4中我还没有找到执行此操作的方法
有几种方法可以做到这一点,但首先你需要了解你正在做的事情的结构。
它不是 MVC 中的"回发"(或者,真的,在一般的 HTTP 中......网络表单骗了你)。 您要做的只是将数据发布到服务器并接收响应。 在MVC框架中,该帖子的目标是控制器操作。 响应可以是几件不同的事情,具体取决于您采取的方法。
我建议编写一些JavaScript来通过AJAX执行此任务。 这样,页面就不会刷新,您只会发送/接收与手头特定任务相关的数据。 ASP.NET MVC附带jQuery,所以我将假设在这种情况下使用jQuery。
首先,您需要绑定到该select
元素的更改事件。 它可能被标识为"IdProvider"id
,但您需要检查呈现的 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
中,并在选择更改时发布整个内容,然后控制器操作将希望返回包含该视图中填充的数据的View
。 但这可能有点矫枉过正,因为您要做的只是发送一个值并接收两个值。
免责声明:此方法将提交整个表单。如果可能,最好执行 Ajax 操作而不是表单提交。大卫的回答解释了如何做Ajax调用。
如果将类数据更改为提交添加到选择列表(或任何应触发回发的输入元素)。然后可以添加事件处理程序;将提交变更表格,如下所示。
$(function () {
$(".data-on-change-submit")
.change(function ()
{
var form = button.closest("form");
form.submit();
})
});
在 MVC 中不需要回发,当用户从下拉列表中选择时,再次重新执行相同的操作,但这次该操作将具有 HttpPost 属性(这将是您的回发)。然后,您可以做任何您喜欢的事情并重新渲染相同的视图,但这次使用新的视图模型(加载新数据:可用信用和关闭日)
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 回发。注:我使用了视图包,但我建议为您创建的每个视图使用单独的视图模型。