Как перезагрузить значения выпадающего списка в asp.net mvc3 без обновления страницы

Question

Я разрабатываю приложение MVC3, которое взаимодействует с БД.Я использую форму для создания объекта, и один из атрибутов зависит от другой таблицы.Чтобы обеспечить ссылочную целостность, я заполняю раскрывающийся список, чтобы ограничить пользователя следующим образом:

var processGroups = repository.getAllProcessGroups();
ViewBag.processGroup_drpdwn = new SelectList(processGroups, "process_group_id", "process_group_name");
return View(); //this is my Creation view

Затем в моем представлении я отображаю раскрывающийся список как

<div class="editor-field">
        @Html.DropDownList("groups", (SelectList)ViewBag.processGroup_drpdwn, new { id = "groupsList" })
         @Html.ActionLink("Add", "AddGroup", null, new { @class = "addGroupLink" })

    </div>

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

Я пытаюсь обновить раскрывающийся список с помощью JSON и JQuery после вставки, но дляпо какой-то причине это не работает.

Дополнительная информация:

Вот соответствующий раздел модальной формы:

@using (Ajax.BeginForm("AddGroup", "Process", null,
    new AjaxOptions
    {
        UpdateTargetId = "update-message",
        InsertionMode = InsertionMode.Replace,
        HttpMethod = "POST",
        OnSuccess = "updateSuccess"
    }, new { @id = "addGroupForm" }))

Вот метод, который возвращает группы в видеСписок JSON:

[AcceptVerbs(HttpVerbs.Post)]
    public ActionResult ShowGroups()
    {
        var groups = repository.getAllProcessGroups();
        List<SelectListItem> list=new List<SelectListItem>();
        foreach (PROCESS_GROUP p in groups)
        {
            list.Add(new SelectListItem() { Value = p.PROCESS_GROUP_ID.ToString(), Text = p.PROCESS_GROUP_NAME });
        }
        return Json(list,JsonRequestBehavior.AllowGet);
    }

Вот фрагмент кода jQuery, который выполняется после вставки моих данных:

function loadGroups() {
    alert();
    $.getJSON("/Process/ShowGroups", null, function (data) {
        var selectList = $("#groupsList");
        selectList.empty();
        $.each(data, function (index, optionData) {
            var option = $('<option>').text(optionData.Text).val(optionData.Value);
            selectList.append(option);
        });
    });
}
function updateSuccess() {
    if ($("#update-message").html() == "True") {

        loadGroups();
        $('#updateDialog').dialog('close');
        //twitter type notification
        $('#commonMessage').html("Successfully Added");
        $('#commonMessage').delay(400).slideDown(400).delay(3000).slideUp(400);

    }
    else {
        $("#update-message").show();
    }
    }

loadGroups() начинается, но ничего не происходит.Я также не получаю никаких сообщений об ошибках, объясняющих, что пошло не так.

ОБНОВЛЕНИЕ:

Работает сейчас.Мне пришлось удалить [AcceptVerbs(HttpVerbs.Post)] из действия

Answer 1

$("#mydropdown").change(function () {
    // let's assume /list page prints a JSON string
    $.getJSON('/list', function (data) {
       var result = '';
       for (var i = 0, iL = data.length; i < iL; i++) {
           result += '<option value="' + data[i].value + '">' + data[i].text + '</option>';
       }
       $("#otherdropdown").html( result );
    });
});

Это только один вариант ... используйте свою логику и адаптируйте ее к своей системе. C ya!

Answer 2

У вас может быть действие, которое возвращает обновленный список (в формате html или json).В функции updateSuccess вызовите это действие с помощью функции jQuery ajax.

Answer 3

Попробуйте использовать firebug для проверки того, что возвращается через AJAX, когда вы отправляете эту форму AJAX.

Затем вам нужно добавить переменную в вашу функцию updateSuccess(), чтобы получить доступ к возвращаемым данным следующим образом:

function updateSuccess(ajaxResult) {
     $("#update-message").html(ajaxResult.SomeValue); //example
}

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