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

Question

I have a list of "practices" that I need to filter on based on user selection. My view has a dropdown that looks like this:

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

It allows the user to select one of 6 or so practices to filter another list on. I need to retrieve the value and have the page updated. I have the page filling with the valued by default without mind to the practice filter, I just can't update it because I can't seem to retrieve the value. I just need to get this value so I can incorporate it into my loop to rebuild the list.

@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

Start by using jquery to capture a change in the select:

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

})

fiddle

then, ajax to a controller that will return your other items:

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

Using Razor:

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

you could then return the dropdownlist from your controller, or however you want to handle that.

EDIT

Actually, I don't think you'll be able to use the Ajax.BeginForm approach as you would have nested forms. You may be stuck with jQuery

Answer 2

You can also use @Ajax.BeginForm and in the action of the controller return partial view and render it on the client side in the success handler of the ajax form.

Here a post on @Ajax.BeginForm

Using Ajax.BeginForm in MVC4

But you will have to have a jquery script that submits the form on your select change event.

Answer 3

You can use AjaxBeginFormfor like this:

@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()"})
        }

Now you can post model to controller and the returned content will be appended to content of div that have id="divId" Hope you understand what I was trying to explain . Also try to avoid ViewBag in your aplciation is not good practice.Try to use SelectlistItem in your model to populate dropdown. so suppose you have your model:

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

In controller you will need to set(populate from db or from somewhere ) your list of DropDownObj. and in view you will be able to do something like this :

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

This is how mvc dropdownlsit should look in mvc.