MVC DropDownList OnChange 更新其他表单字段

Posted 2023-05-09

【中文标题】MVC DropDownList OnChange 更新其他表单字段

【英文标题】：MVC DropDownList OnChange to update other form fields

【发布时间】：2016-03-06 17:26:12

【问题描述】：

我是 MVC 的新手（我正在从传统 ASP.Net 的黑暗面转变过来），我知道 SO 更像是“为什么这不起作用”但是，作为 MVC 的新手，我只是想要询问某事是如何实现的 - 我真的没有任何代码或标记，因为我现在不知道如何实现。

对，使用一个类似的例子......我有一个表单，其中包含“小部件”列表的下拉列表（感谢 SO）......然后还有其他字段（长度/高度/宽度）具有“默认”值。

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

现在，在经典的 ASP.Net 世界中，您将在“onselectedindexchange”上执行 PostBack，然后查看所选项目，然后使用“主小部件条目”版本中的值更新 L/H/W 字段.

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

【问题讨论】：

创建一个控制器动作，返回 Json 数据，并让 ajax 调用 onchange 下拉菜单到该动作。在 ajax 响应 (json) 上，您将获取值，然后将这些值设置为 json 响应的字段。

你可以 POST 到一个 action 方法来达到同样的效果，但是here's an example 怎么用 javascript 来做

取决于您是要在视图本身上执行此操作，还是应该从后端实际查询某些内容？

啊...好吧...所以我必须显式地向控制器执行一个 ajax 请求（使用选定的值），然后拉回默认的 L/H/W 值

是的。需要进行ajax调用。

【参考方案1】：

在 Asp.Net MVC 中，当控件值更改时，没有像在 Web 表单中那样的回发行为。您仍然可以发布表单，并且在操作方法中，您可以读取选定的值（发布的值）并加载文本框的值并再次呈现页面。这是完整的表格发布。但是使用 ajax 有更好的方法来做到这一点，因此用户不会体验到完整的页面重新加载。

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

为您的页面创建一个视图模型。

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 动作中，我们将创建一个 this 的对象，初始化 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 标记，并为宽度和高度呈现 2 个输入文本字段。 （在页面上做一个“查看源代码”并查看）

现在我们将有一些 jQuery 代码，它监听 SELECT 元素的 change 事件并读取所选项目的值，对服务器进行 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>

我们需要确保在 HomeController 内部有一个名为 GetDetault 的操作方法来处理 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" );

【讨论】：

精彩的解释。谢谢！

【参考方案2】：

制作一个返回“Json”数据的控制器“Action”。 让 Ajax 调用“onchange”的下拉菜单到该“Action”。 在 ajax "response" (json) 上，您将获取值，然后将这些值设置为 来自 json 响应的字段。

这是更新字段值的方法。

【讨论】：

感谢 Parth...向您致敬，因为您确实首先提供了答案（在 cmets 中），但 Shyju 发布了一个完整且完整的示例，因此将其标记为答案。