如何在 C# MVC 中立即获取下拉框选定项的更新值？答案

【问题标题】：How do I instantly get updated value of dropdown box selected item in C# MVC?如何在 C# MVC 中立即获取下拉框选定项的更新值？
【发布时间】：2014-02-22 18:35:25
【问题描述】：

我有一个“实践”列表，我需要根据用户选择进行过滤。我的视图有一个如下所示的下拉列表：

@Html.DropDownList("practice", (List<SelectListItem>)ViewBag.PracticeList)

它允许用户选择 6 种左右的做法中的一种来过滤另一个列表。我需要检索该值并更新页面。我的页面默认填充了值，而不考虑练习过滤器，我只是无法更新它，因为我似乎无法检索该值。我只需要获取此值，以便将其合并到我的循环中以重建列表。

@foreach (var item in Model)
{      
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.User.FirstName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.User.LastName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.User.Email)
    </td>
    <td>
        @Html.TextBox("Hours")
    </td>        
</tr>
}

【问题讨论】：

你可以使用 jQuery，Knockout 也可以。
代码不需要复杂化，它是一个 .cshtml 文件（项目的其余部分也是如此），似乎没有必要添加 JS。
如果您不想使用任何 jQuery，那么您可以通过发布到操作来完成，然后继续执行第 2 步，在第二个下拉列表中根据选择的选项填充所需的选项第一个下拉菜单的值。

标签： c# html asp.net-mvc model-view-controller scaffolding

【解决方案1】：

您还可以使用@Ajax.BeginForm 并在控制器的操作中返回部分视图并在ajax 表单的成功处理程序中将其呈现在客户端。

这是@Ajax.BeginForm 上的帖子

Using Ajax.BeginForm in MVC4

但您必须有一个 jquery 脚本，用于在您的选择更改事件中提交表单。

【讨论】：

【解决方案2】：

首先使用 jquery 捕获选择中的更改：

$('#selectList').on('change', function() {

})

fiddle

然后，将 ajax 发送到将返回您的其他项目的控制器：

$.ajax({
    url: '@Url.Action("Action","Controller")',
    data: { 'selection' : $(this).val() },
    type: "post",
    cache: false,
    success: function (items) {
        //update the other select
    };
});

使用剃刀：

@using (Ajax.BeginForm("Action", "Controller", new AjaxOptions {UpdateTargetId = "DivToUpdate"}))
{
    @Html.DropDownList("practice", (List<SelectListItem>)ViewBag.PracticeList, new { onchange="this.form.submit()"})
}

然后你可以从你的控制器返回下拉列表，或者你想处理它。

编辑

实际上，我认为您不能像使用嵌套表单那样使用 Ajax.BeginForm 方法。你可能会被 jQuery 卡住

【讨论】：

其实根本不反JS。只是这是一个 C#/ASP.NET 项目，我要进行代码内聚。我的 javascript 很好，但我正在学习 MVC 和 ASP.NET

【解决方案3】：

您可以像这样使用 AjaxBeginFormfor：

@model YourModel
        @using (Ajax.BeginForm("Action", "Controller", null,
                            new AjaxOptions { HttpMethod = "POST",
                                OnSuccess = "functionIfYouWant(data)",
                                 UpdateTargetId = "divid",
                                 InsertionMode=InsertionMode.InsertAfter},
                                new { id = "formId" }))
     {
       @Html.DropDownListFor(c=>c.SelectedVal, (List<SelectListItem>)ViewBag.PracticeList)
    <div id="divId">

    </div>
        <input type="submit" value="Submit"/>
//or add @Html.DropDownListFor(c=>c.SelectedVal, //  List<SelectListItem>)ViewBag.PracticeList,new {onChange="jQuery("#formId").submit()"})
        }

现在您可以将模型发布到控制器，返回的内容将附加到 id="divId" 的 div 内容中希望您理解我试图解释的内容。还要尽量避免在您的应用中使用 ViewBag 是不好的做法。尝试在您的模型中使用 SelectlistItem 来填充下拉列表。所以假设你有你的模型：

public class Model
{
public int SelectedItem{get;set;}
public IList<DropDownObj> ListObj{get;set;
public IList<SelectListItem> SelectListItemListObj{get;set;}
        {
            get
            {
                   var list = (from item in ListObj
                            select new SelectListItem()
                            {
                                Text = item.Id.ToString(CultureInfo.InvariantCulture),
                                Value item.Name
                            }).ToList();
                return list;
            }
            set{}
        } 
} 

public class DropDownObj
{
   public int Id{get;set;}
   public string Name{get;set;
}

在控制器中，您需要设置（从数据库或某处填充）您的 DropDownObj 列表。并且鉴于您将能够执行以下操作：

@Html.DropDownListFor(c=>c.SelectedItem,Model.SelectListItemListObj)

这就是 mvc dropdownlsit 在 mvc 中的样子。

【讨论】：