Partial postback of page with dropdownlist using AJAX on MVC3 page EF4

Question

I have a dropdownlist which lists Country names When user select any country from dropdown list.Based on the country selection, I need data(AgencyName, AgencyAddr,Pincode) to be loaded from database and fill the TextBoxs on the right side.The selected country in the dropdown should remain selected.

on selection change of dropdownlist ,I do not want the entire page to postback .Please help me

Here is my EF4 - ModelClasses

public class Country
{
    public int CountryID { get; set; }
    public string CountryName { get; set; }

}

public class AgencyInfo
{
    public int CountryID { get; set; }
    public string AgencyName { get; set; }
    public string AgencyAddr { get; set; }
    public int Pincode { get; set; }

}

Here is my MVC4 razor page Index.cshtml

        @using (Ajax.BeginForm(
"Index",
"Home",
new AjaxOptions { UpdateTargetId = "result" }
))
{
@Html.DropDownList("SelectedCountryId", Model.CountryList, "(Select one event)")
}

<div id=’result’>
<fieldset>
    <legend>Country Details: </legend>
    <div> 
        <table>
            <tr>
                <td>
                    <span>Country Name </span>
                    <br />
                       @Html.EditorFor(model => model.Countries.Name)
            @Html.ValidationMessageFor(model => model. Countries.Name)
                </td>
                <td>
                    <span>Agency Name </span>
                    <br />
                    @Html.EditorFor(model => model.AgencyInfo.AgencyName)
                    @Html.ValidationMessageFor(model => model.AgencyInfo.AgencyName)
                </td>
            </tr>
            <tr>
                <td>
                    <span>Address Info </span>
                    <br />
                     @Html.EditorFor(model => model. AgencyInfo.Address)
                    @Html.ValidationMessageFor(model => model. AgencyInfo.Address)
                </td>
                <td>
                    <span>Pin Code </span>
                    <br />
                      @Html.EditorFor(model => model. AgencyInfo.PinCode)
                    @Html.ValidationMessageFor(model => model. AgencyInfo.PinCode)
                </td>
            </tr>

            <tr>
                <td>
                    <input type="submit" value="Modify" /><input type="submit" value="Delete" />
                </td>
                <td>
                    <input type="submit" value="Save" /><input type="submit" value="View Resources" />
                </td>
            </tr>
        </table>
    </div>
</fieldset>
</div >  @end of result div@

Any suggestions ? Thank you

Solution

You want to use ajax.

Add an event handler to monitor the selection change. When the drop down changes, get the current country and send the ajax request. When the ajax request returns update the DOM with jQuery.

Example view:

<p id="output"></p>

<select id="dropDown"><option>Option 1</option>
<option>Option 2</option></select>
<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $("#dropDown").change(function () {
            var selection = $("#dropDown").val();
            var dataToSend = {
                country: selection
            };

            $.ajax({
                url: "home/getInfo",
                data: dataToSend,
                success: function (data) {
                    $("#output").text("server returned:" + data.agent);
                }
            });
        });
    });
</script>

Example controller method:

public class HomeController : Controller
{
    [HttpGet]
    public JsonResult GetInfo(string country)
    {
        return Json(new { agent = country, other = "Blech" }, JsonRequestBehavior.AllowGet);
    }
}

Some other examples:

adding a controller method to handle ajax request: http://www.cleancode.co.nz/blog/739/ajax-aspnet-mvc-3

calling ajax and updating DOM: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax2