CODEWITHSUNDEEP
c#asp.net-mvc-3html-select
kk1076
kk1076

Reputation: 1748

how to bind model value to selected item text from dropdownlist mvc4

In my application, I have two dropdownlists. First to display country values and second to display the states of selected countries. The values are generated and displayed in both dropdownlists. But on post, both dropdownlist return the id of the model values and not the name or value. How to bind the selected item text of dropdownlist on post ? Model :

public string State { get; set; }
public string Country { get; set; }
public SelectList CountryList { get; set; }
public SelectList RegionList { get; set; }
public class Countries
{
   public string ID { get; set; }
   public string Name { get; set; }
}
public class Region
{
   public string ID { get; set; }
   public string Name { get; set; }
}

View

@Html.DropDownListFor(model =>model.State, new SelectList(Model.RegionList, "Value", "Text", Model.RegionList.SelectedValue))      
@Html.DropDownListFor(model => model.Country, new SelectList(Model.CountryList, "Value", "Text", Model.CountryList.SelectedValue), new { data_url = Url.Action("GetRegionDetail", "WPindex") })


<script type="text/javascript">
            $(document).ready(function () {
                $("#Country").change(function () {                
                    $("#State").empty();       
            var url =$(this).data(url);
            var Id = $('#Country option:selected').attr('value');
                    $.getJSON(url, { ID: Id },
                        function (data) {
                            jQuery.each(data, function (key, Region) {
                                $("#State").append($("<option></option>").val(Region.ID).html(Region.Name));
                            }
                            );
                        });
                });
        });
</script>

Controller :

 public JsonResult GetRegionDetail(int ID)
    {
        AddressModel amodel = new AddressModel();
        List<Model.Region> objRegion = new List<Model.Region>();
        objRegion = GetRegionList(ID);
        SelectList objlistofRegiontobind = new SelectList(objRegion, "ID", "Name", 0);
        amodel.RegionList = objlistofRegiontobind;
        return Json(objRegion, JsonRequestBehavior.AllowGet);
    }
[HttpPost]
public ActionResult UpdateDetails(Model objmodel)
{
    string state   = objmodel.State; // returns ID and not Name (selected text)
    string country = objmodel.Country; // returns ID and not Name 
}

Upvotes: 0

Views: 3548

Answers (2)

ataravati
ataravati

Reputation: 9145

That's not a problem. You want the DropDownList to give you the selected Value which in this case is the ID, not the Text. So, I would recommend that you change the properties of your ViewModel with the following:

public int StateID { get; set; }
public int CountryID { get; set; }
public SelectList CountryList { get; set; }
public SelectList RegionList { get; set; }

However, if you don't want the IDs, you can define your DropDownLists like this:

@Html.DropDownListFor(model => model.State, new SelectList(Model.RegionList, Model.State))      
@Html.DropDownListFor(model => model.Country, new SelectList(Model.CountryList, Model.Country), new { data_url = Url.Action("GetRegionDetail", "WPindex") })

Upvotes: 1

Jay
Jay

Reputation: 6294

When you define a dropdown list in Html, each option has an attribute for value and text the text value is shown to the user and the value is the "selected value" of that dropdown. When the form is posted to the controller, only the value is posted. If you wish to have the name instead of the Id to post, simply set the value attribute of the dropdown list items to the name of the source data.

For example, when you populate your state dropdown you could do it like this:

$("#State").append($("<option></option>").val(Region.Name).html(Region.Name));

Upvotes: 1

Related Questions