Вызов AJAX для события OnChange в MVC

Question

Я должен сделать AJAX-вызов для события onchange раскрывающегося списка, который является частью представления.В случае события изменения мне нужно вызвать базу данных, выполнить некоторые вычисления, отображать пользовательский интерфейс, а затем использовать вычисления для заполнения элемента управления диаграммы.Отображение пользовательского интерфейса в этой последовательности.Диаграмма Раскрывающийся список категорий списка подкатегорий с оценкой рейтинга. Так как вам нужно, чтобы я отображал оценки категорий в div3 на событии изменения, используйте оценку оценок для заполнения диаграммы.Легко сделать в .NET, но как в MVC ??Единственный вариант, о котором я могу подумать, - это создать пользовательский элемент управления с кодом, но это противоречит цели использования MVC.Любая помощь приветствуется.

Answer 1

Вот общая идея, как бы вы это реализовали.

<script type="text/javascript">
    // assuming you're using jQuery
    $("#ddlAjax").change( function (event) {
        $.ajax({
            url: "Controller/GetPartialGraph/" + $(this).val(),
            data: { id = $(this).val() /* add other additional parameters */ },
            cache: false,
            type: "POST",
            dataType: "html",

            success: function (data, textStatus, XMLHttpRequest) {
                $("#divPartialView").html( data ); // HTML DOM replace
            }
        });
    });
</script>

<select id="ddlAjax">
    ... list of options
</select>


<div id="divPartialView">
    <!-- something like this in your ASP.NET View -->
    <%= Html.RenderPartial("MyPartialView", Model) %>
</div>

Вот метод действия вашего контроллера.

[HttpPost]
public PartialViewResult GetPartialGraph(int id /* drop down value */)
{
    // do calculations whatever you need to do
    // instantiate Model object
    var model = myBusinessLogicService.DoCalculations(id);

    return PartialView("MyPartialView", model);
}

Я думаю, что это ответ, который вы ищете.

Answer 2

Хорошо, если вам нужен способ вызова события onchange при изменении выпадающего списка, это может быть полезно:

@Html.DropDownListFor(
                        model => model.SelectedId,
                        new SelectList(ViewBag.Ids, "Id", "Name"),
                        "[All]",
                        new { onchange = "onChangeId();", @id ="municipalityDropDown" }
                        )

, тогда вы можете иметь этот код javascript и ваш код ajax.А вот пример кода jax для вызова метода действия.

function onChangeId() {
      jQuery.ajax({
            url: '@Url.Action("Action Method Name", "Controller Name")',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ data: data2 }),
            success: function (result) { }
        });  
    }

Answer 3

Посмотрите, используя частичное представление. Существует много ссылок, если вы пользуетесь Google ASP.Net MVC Partial View, но вот одна, которую я нашел интересной

http://blog.stevensanderson.com/2008/10/14/partial-requests-in-aspnet-mvc/

Answer 4

Да, все верно - только замена заменяет:

onchange = “this.form.submit();”

с:

onchange = “$(this.form).submit();”

нашел его в этом сообщении

Answer 5

Я не уверен, что полностью понимаю, что вы пытаетесь сделать, но в MVC способ, которым я, скорее всего, справлюсь, состоит в том, чтобы связать воедино пару вызовов AJAX.Первый обновляет рейтинг категории на основе выбора.Это, вероятно, возвращает JSON, так что вы можете легко извлечь оценки рейтингов.Второй берет рейтинговые оценки, возвращенные первым, и вызывает действие, которое отображает диаграмму в виде HTML, т. Е. Он представляет частичное представление, которое возвращается и вставляется в нужное место в документе.