Функция изменения jQuery ASP.NET MVC 4 в режиме редактирования

Это странная проблема, и я надеюсь, что кто-то сможет найти решение. По сути, у меня есть те же представления, которые используют раскрывающийся список с функцией jQuery, которая показывает и скрывает поле в зависимости от выбора, сделанного в раскрывающемся списке. У меня это работает в представлении создания с использованием ViewBag для передачи списка выбора для раскрывающегося списка. Мне было интересно, могу ли я сделать то же самое в своем представлении редактирования, используя модель представления и помощник DropDownListFor.

Функция JQuery в режиме создания:

$("#GenderId").change(function () {
        if ($("#SelectedGenderId").val() == 3) {
            $(".gender-description").show();
        } else {
            $(".gender-description").hide();
        }
 });

И создать представление:

    <div class="editor-label">
        @Html.LabelFor(model => model.GenderId, "Gender")
    </div>
    <div class="editor-field">
        @Html.DropDownList("GenderId", (SelectList)ViewBag.GenderId, "--Select One--", new { id = "GenderId" })
        @Html.ValidationMessageFor(model => model.GenderId)
    </div>


    <div class="gender-description">
        <div class="editor-label">
            @Html.LabelFor(model => model.GenderDescription)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.GenderDescription)
            @Html.ValidationMessageFor(model => model.GenderDescription)
        </div>
    </div>

Чтобы мои раскрывающиеся списки представления «Редактировать» работали правильно, я изменил свою методологию на модель представления вместо ViewBag (на которую, я думаю, я также захочу изменить свое представление «Создать», если я смогу заставить представление редактирования работать правильно).

Редактировать вид:

    <div class="editor-label">
        @Html.LabelFor(model => model.Client.GenderId, "Gender")
    </div>
    <div class="editor-field">
        @Html.DropDownListFor(model => model.SelectedGenderId, Model.Genders)
        @Html.ValidationMessageFor(model => model.Client.GenderId)
    </div>

    <div class="gender-description">
        <div class="editor-label">
            @Html.LabelFor(model => model.Client.GenderDescription)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Client.GenderDescription)
            @Html.ValidationMessageFor(model => model.Client.GenderDescription)
        </div>
    </div>

Просмотр модели:

public class ClientViewModel
{
    public Client Client { get; set; }

    [Display(Name = "Client Gender")]
    public string SelectedGenderId { get; set; }
    public IEnumerable<SelectListItem> Genders { get; set; }

    [Display(Name = "Client Setting")]
    public string SelectedSettingId { get; set; }
    public IEnumerable<SelectListItem> Settings { get; set; }
}

Привязка ViewModel работает, и раскрывающиеся списки заполняются существующим выбором, который я не мог заставить работать правильно с помощью ViewBag (именно поэтому я в первую очередь перешел на ViewModel вместо ViewBag). Я не уверен, как бы я изменил функцию jQuery, чтобы связать ее с DropDownListFor для прослушивания изменений. Любые идеи будут очень признательны.


jquery asp.net-mvc-4 html.dropdownlistfor asp.net-mvc-viewmodel
person jbolt    schedule 31.08.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете передать идентификатор своему помощнику html следующим образом:

@Html.DropDownListFor(model => model.SelectedGenderId, Model.Genders, new {id="GenderId"} )

OR

Вы можете привязать функцию jquery к имени Genders следующим образом:

$("[name*='Genders']").change(function () {
    if ($("#SelectedGenderId").val() == 3) {
        $(".gender-description").show();
    } else {
        $(".gender-description").hide();
    }
});
person Jatin patil    schedule 31.08.2013
comment
Лучшее решение будет работать, но исходный оператор .change функции 'IF' необходимо изменить на: if ($(#GenderId).val() == 3) {}, чтобы это работало правильно. Но это приводит к другой проблеме, когда функция загрузки (не указанная здесь) вообще не работает. Я начну еще один пост по этому вопросу. Спасибо. - person jbolt; 31.08.2013