Conditionally populate partialview control in MVC3

Question

Creating a partialview for enter some personal details.I have to include 2 dropdownlist, 1 for country and other for states.When i select country as US then its want to populate all statenames from DB.If we select other country i want to replace dropdown for states to a textbox.How can i make it possible?

Thanks.

Answer 1

My suggestion is to use jquery ajax request to populate the drop down list options depending on country value. The ajax request could point to another PartialView that will return dropdown or textbox depending on parameter...

Let me know if you'll have any troubles with implementation, I'll enjoy helping you...

---

Action in controller:

public ActionResult StateNames(string country)
{
    if(country == "US")
    {
        var model = GetArrayOfUsStates();
        return View(model);
    }
    else
    {
        var model = string[0];
        return View(model);
    }
}

Partial View for your dropdown list:

@model string[]

@if(Model.Length == 0)
{
    <input type="text" name="state" />
}
else
{
    <select name="state">
        @foreach(var state in Model)
        {
            <option value="@state">@state</option>
        }
    </select>
}

Your page structure:

<select id="countryDDL">
   ...
</select>
<div id="stateDDLHolder">
</div>

Your jQuery code to get drop down:

$.ajax({ 
         url: '/YourController/StateNames/' + $('#countryDDL').val(),
         success: function(data) { $('#stateDDLHolder').html(data); }
});