Question

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

@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>
}

Answer 1

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

$('#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
    };
});

使用Razor：

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

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

修改

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

Answer 2

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

这里有关于@ Ajax.BeginForm的帖子

Using Ajax.BeginForm in MVC4

但是你必须有一个jquery脚本在你的select change事件中提交表单。

Answer 3

您可以像这样使用AjaxBeginForm：

@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的内容中希望你能理解我试图解释的内容。同时尽量避免在你的aplciation中使用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;
}

在控制器中，您需要设置（从db或从某处填充）DropDownObj列表。在视野中，你将能够做到这样的事情：

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

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

如何立即获取C＃MVC中下拉框所选项目的更新值？

3 个答案: