MVC DropDownList OnChange更新其他表单字段

Question

我是MVC的新手(我正在从传统的ASP.Net的黑暗面转移)而且我知道SO更像是"为什么这不起作用",但是,对于MVC来说,我只想问问如何实现了一些东西 - 我真的没有任何代码或标记,因为我现在不知道如何.

是的,使用一个类似的例子......我有一个表单,其中包含一个"Widgets"列表的下拉列表(由于SO而有效)...然后还有其他字段(长度/高度/宽度) )具有"默认"值.

当表单显示时,显示下拉列表,但L/H/W的表单字段为空/禁用,直到用户从DDL中选择一个.

现在,在clasic ASP.Net世界中,你会在"onselectedindexchange"上做一个PostBack,然后查看所选的项目,然后使用"master widget entry"版本中的值更新L/H/W字段.

由于MVC没有回发......这是如何实现的？

Answer 1

在Asp.Net MVC中,当控件值发生更改时,没有像Web表单中那样的回发行为.您仍然可以发布表单,在操作方法中,您可以读取所选值(已发布的值)并加载文本框的值并再次呈现页面.这是完整的表单发布.但是有更好的方法可以使用ajax来完成此操作,因此用户将无法体验完整的页面重新加载.

您要做的是,当用户更改下拉列表时,获取所选项目值并调用服务器以获取要在输入字段中显示的数据并进行设置.

为您的页面创建一个viewmodel.

public class CreateViewModel
{
    public int Width { set; get; }
    public int Height{ set; get; }

    public List<SelectListItem> Widgets{ set; get; }

    public int? SelectedWidget { set; get; }    
}

现在在GET操作中,我们将创建一个对象,初始化Widgets属性并发送到视图

public ActionResult Create()
{
  var vm=new CreateViewModel();
  //Hard coded for demo. You may replace with data form db.
  vm.Widgets = new List<SelectListItem>
            {
                new SelectListItem {Value = "1", Text = "Weather"},
                new SelectListItem {Value = "2", Text = "Messages"}
            };
 return View(vm);
}

你的创建视图是强类型的 CreateViewModel

@model ReplaceWithYourNamespaceHere.CreateViewModel
@using(Html.BeginForm())
{
    @Html.DropDownListFor(s => s.SelectedWidget, Model.Widgets, "Select");

    <div id = "editablePane" >
         @Html.TextBoxFor(s =>s. Width,new { @class ="myEditable", disabled="disabled"})
         @Html.TextBoxFor(s =>s. Height,new { @class ="myEditable", disabled="disabled"})
    </div>
}

上面的代码将为SELECT元素呈现html标记,为Width和Height呈现2个输入文本字段.(在页面上执行"查看源代码"并查看)

现在我们将有一些jQuery代码,它们监听changeSELECT元素的事件并读取所选的项值,对服务器进行ajax调用以获得所选小部件的高度和宽度.

<script type="text/javascript">
 $(function(){

      $("#SelectedWidget").change(function() {

            var t = $(this).val();

            if (t !== "") {               
                $.post("@Url.Action("GetDefault", "Home")?val=" + t, function(res) {
                    if (res.Success === "true") {

                      //enable the text boxes and set the value

                        $("#Width").prop('disabled', false).val(res.Data.Width);
                        $("#Height").prop('disabled', false).val(res.Data.Height);

                    } else {
                        alert("Error getting data!");
                    }
                });
            } else {
                //Let's clear the values and disable :)
                $("input.editableItems").val('').prop('disabled', true);
            }

        });
 });

</script>

我们需要确保GetDetault在内部调用一个action方法HomeController来处理ajax调用.

[HttpPost]
public ActionResult GetDefault(int? val)
{
    if (val != null)
    {
        //Values are hard coded for demo. you may replae with values 
       // coming from your db/service based on the passed in value ( val.Value)

        return Json(new { Success="true",Data = new { Width = 234, Height = 345}});
    }
    return Json(new { Success = "false" });
}