MVC 4回发对Dropdownlist的更改 [英] MVC 4 postback on Dropdownlist change

问题描述

我正在使用MVC4，并且在布局内有一个菜单.我菜单的一部分包括一个下拉列表，用户可以在其中选择可用的提供程序.

I am using MVC4 and I have a menu inside of a layout. part of my menu consists of a dropdown list where a user can select between availiable providers.

<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中，我可以使用自动回传来做到这一点，但是我还没有在MVC4中找到实现此目的的方法

the problem I am having is: when a user changes the selected item in the dropdownlist, I want to make a postback to be able to load the AvailiableCredit and ClosingDay. In webforms i could do this with autopostback, but I haven't found a way to do this in MVC4

推荐答案

有两种方法可以做到这一点，但是首先您需要了解所做工作的结构.

There are a couple of ways to do this, but first you need to understand the structure of what you're doing.

它不是MVC中的回发"(或者，实际上，通常是HTTP中的……WebForms对您撒谎).您要做的只是将数据发布到服务器并接收响应.在MVC框架中，该帖子的目标将是控制器操作.响应可能是几件不同的事情，具体取决于您采用的方法.

It's not a "post back" in MVC (or, really, in HTTP in general... WebForms lied to you). What you're trying to do is simply post data to the server and receive a response. In the MVC Framework, the target of that post would be a controller action. The response can be a couple of different things, depending on the approach you take.

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

I recommend writing some JavaScript to perform this task via AJAX. That way the page doesn't refresh and you're only sending/receiving the data relevant to the specific task at hand. ASP.NET MVC comes with jQuery, so I'm going to assume the use of jQuery in this case.

首先，您需要绑定到该select元素的change事件.它用id"IdProvider"标识了可能，但是您需要检查渲染的HTML以确保.假设是这样，您可以使用以下内容:

First you'd need to bind to the change event for that select element. It's probably identified with the id "IdProvider" but you'll want to check the rendered HTML to make sure. Assuming it is, you can use something like this:

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

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

Now you can make the AJAX call to the server within that handler. It might be something as simple as:

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

这样，控制器动作将在名为selection的参数中具有选定的值:

With this, the controller action would have the selected value available in an argument called selection:

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

此操作返回Json格式的数据，因为客户端上的JavaScript正在使用它.因此，在上面的$.post()调用中处理响应时，您将在该数据中获得data值.

This action returns Json formatted data, since it's being used by JavaScript on the client. So when handling the response in the $.post() call above, you'd get that data in the data value there.

然后由您决定如何处理JavaScript代码中的数据.如果它是具有您要查找的两个值的简单结构，则可能像这样简单:

What you do with that data in the JavaScript code is then up to you. If it's a simple structure with the two values you're looking for, it might be something as simple as this:

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

或者，您可以 将select元素包装在form中，并在选择更改时发布整个内容，然后控制器动作将希望返回带有View的View该视图中填充的数据.但这很可能是矫kill过正，因为您要做的就是发送一个值并接收两个值.

Alternatively, you could wrap the select element in a form and post the whole thing when the selection changes, and the controller action would then want to return a View with the data populated in that view. But that's likely overkill since all you want to do is send one value and receive two values.

这篇关于MVC 4回发对Dropdownlist的更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！