Частичная обратная передача страницы с выпадающим списком с использованием AJAX на странице MVC3 EF4

Question

У меня есть выпадающий список, в котором перечислены названия стран Когда пользователь выбирает любую страну из выпадающего списка. На основе выбора страны мне нужно загрузить данные (AgencyName, AgencyAddr, Pincode) из базы данных и заполнить текстовые поля справа. Выбранная страна в раскрывающемся списке должна остаться выбранной.

при изменении выбора из выпадающего списка, я не хочу, чтобы вся страница отправлялась обратно. Пожалуйста, помогите мне

Вот мой 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; }

}

Вот моя страница бритвы MVC4 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@

Есть предложения? Спасибо

Answer 1

Вы хотите использовать ajax.

Добавьте обработчик событий для отслеживания изменения выбора.Когда выпадающий список изменится, получите текущую страну и отправьте запрос ajax.Когда запрос ajax вернется, обновите DOM с помощью jQuery.

Пример представления:

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

Пример метода контроллера:

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

Некоторые другие примеры:

добавление метода контроллера для обработки запроса ajax: http://www.cleancode.co.nz/blog/739/ajax-aspnet-mvc-3

вызов ajax и обновление DOM: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax2