Заполнение текстового поля данными на основе выбора раскрывающегося списка (onChange)

Question

Я строю сайт, используя ASP.NET MVC и Entity Framework.У меня есть таблица БД с информацией о стране:

CountryID int;
ShortName nvarchar;
CountryCode nvarchar;

В моем представлении у меня есть:

<div class="editor-field"><%: Html.DropDownListFor(model => model.address.CountryID, Model.countriesList, "<--Select Country-->") %></div>
<div class="display-field"><%: Html.TextBoxFor(m => m.phone.CountryCode)%>></div>

Список, который я передаю в представление:

countriesList = new SelectList(countries, "CountryID", "ShortName");

Обновление Код JavaScript:

<script src="/Scripts/jquery-1.4.1.min.js" language="javascript" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function()
{
    $("#address.CountryID").change(function()
    {
        $.get("/PersonalInfo/GetCountryCode", $(this).val(), function(data)
        {
            $("#phone.CountryCode").val(data);
        });
    });
});

И метод контроллера:

public ActionResult GetCountryCode(int id)
    { 
        Country c = personalInfoRepository.GetUserCountryByID(id);
        string countryCode = c.PhoneCode;
        return Content(countryCode);
    }
</script>

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

Можно ли было бы сделать это без отправки обратно на сервер, если бы я передавал countryCodeList вдоль countryList?

Answer 1

Вот отличное руководство с 3 различными способами создания каскадных выпадающих списков в ASP.NET MVC - http://stephenwalther.com/blog/archive/2008/09/07/asp-net-mvc-tip-41-creating-cascading-dropdown-lists-with-ajax.aspx

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

public ActionResult GetCountryCode(int countryId)
{
    //logic to find country code goes here
    string countryCode = "1";
    return Content(countryCode);
}

Теперь вам понадобится некоторый javascript для привязки к событию изменения выпадающего списка вашей страны и вызова вашего контроллерадействие через ajax.Я рекомендую использовать jquery:

<script type="text/javascript">
    $(document).ready(function()
    {
        $("#address_CountryID").change(function()
        {
            $.get("/Countries/GetCountryCode", $(this).val(), function(data)
            {
                $("#phone_CountryCode").val(data);
            });
        });
    });
</script>