Попытка отобразить динамические веб-сетки на основе выбора DropDownList - ASP.Net MVC4

В моем представлении индекса есть заполненный DropDownList идентификаторов клиентов. Я намерен динамически отображать WebGrid адресов электронной почты при выборе одного из ClientID. Используя следующий код jQuery, я успешно перехожу к действию контроллера под названием PopulateEmailAddressUI.

jQuery(document).ready(function () {
    $("#MeditechDropDown").change(function () {
        var id = $(this).find(":selected").val()
        var clientID = { "clientID": id }
        $.ajax({
            url: "/Home/PopulateEmailAddressUI",
            data: JSON.stringify(clientID), // Send value of the drop down change of option
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            success: function (response) {
                $('#gridContent').load()
            }
        });
    });
});

Действие моего контроллера выглядит так:

[HttpPost]
public ActionResult PopulateEmailAddressUI(string clientID)
{
    _clientModel = InitialiseBarClientsModel();

    _clientModel.FindEmailAddresses(from client in eFormsDB.BAR_Clients where client.ClientId == clientID select client);

    return PartialView("_EmailAddressGrid", _clientModel);
}

Мое частичное представление _EmailAddressGrid выглядит так:

@model BarClients.Models.BarClientsViewModel

@{
    var grid = new WebGrid(Model.EmailAddressesOfChosenClient, ajaxUpdateContainerId: "gridContent");
}

    div id="gridContent"
    @grid.GetHtml()  
    /div (arrows omitted).

Проблема, с которой я столкнулся с этим подходом, заключается в том, что WebGrid никогда не появляется. Если я смотрю на источник страницы, все, что я вижу, - это представление индекса с идентификаторами клиента, но без элемента с идентификатором div gridContent.

Что мне нужно изменить, чтобы применить свой подход, чтобы разные WebGrids могли динамически отображаться каждый раз, когда ClientID выбирается из DropDownList?

Большое спасибо.


jquery asp.net-mvc-4 webgrid
person user3041439    schedule 20.01.2014    source источник
comment
Пожалуйста, отлаживайте его с помощью инструментов разработчика вашего браузера (нажмите F12) и попробуйте найти, где не получается. Выполняется ли обратный вызов измененного? Выполняется ли обратный вызов ajax Successces? Если мы не знаем, где происходит сбой, обнаружить проблему труднее.   -  person JotaBe    schedule 20.01.2014
comment
измененный обратный вызов выполняется, и я вхожу в метод действия. Проблема в том, что я не уверен, что возвращение частичного представления этого действия является ответом.   -  person user3041439    schedule 20.01.2014

Ответы (2)


arrow_upward
1
arrow_downward

Ваш код правильный, но вы забыли использовать ответ. Проверьте этот код:

 success: function (response) {
   $('#gridContent').load()
 }

Строка внутри функции ничего не делает ... и вы не используете ответ.

Замените это на это:

 success: function(html) {
   $("#gridContent").html(html);
 }

Вы можете использовать этот код или любой из DOM Replacement или Вставка DOM, внутрь или что-то еще.

Также рекомендуется включить параметр dataType:'html' в вызов jquery ajax, чтобы указать, что вы ожидая html в качестве ответа. (ПРИМЕЧАНИЕ: я вызвал параметр функции html, чтобы указать, что исходный ответ - html, но вы можете дать ему любое имя).

Вы также должны добавить обработчик ошибок к вашему вызову ajax. Вы можете сделать это глобально с помощью $ .ajaxSetup (). Таким образом, если что-то пойдет не так с коммуникацией или сервером, вы получите некоторую обратную связь.

person JotaBe    schedule 21.01.2014
comment
Пожалуйста. Если это сработало для вас, пожалуйста, примите ответ, чтобы другие люди могли это увидеть. - person JotaBe; 21.01.2014
comment
Это продвинуло меня дальше, но еще не дошло. По крайней мере, сейчас я вижу некоторую активность. Кстати, вы имели в виду $ ('# gridContent') вместо $ (# results)? - person user3041439; 21.01.2014
comment
Я изменил метод действия PopulateEmailAddressUI, чтобы он возвращал мое представление индекса. Поскольку свойство EmailAddressesOfChosenClient модели теперь заполнено, я ожидаю увидеть WebGrid. Если я не изменял метод действия, я ничего не вижу после выбора ClientID. Но теперь у меня есть все представление индекса, отображаемое (снова) со смещением внутри представления индекса, но с WebGrid (не совсем то, на что я надеялся). Я надеялся, что в одном представлении индекса будет только WebGrid. - person user3041439; 21.01.2014
comment
К первому комментарию: да, #gridContent (ответ отредактированный). Ко второму: почему бы вам не открыть новый вопрос с действиями, представлениями и ajax, такими, какие они есть, и что вы ожидаете получить, и что вы получите. Я не могу понять это из этого комментария. Если да, добавьте комментарий со ссылкой на вопрос. Думаю, это, вероятно, ваш ответ. Удалите его и создайте новый вопрос, пожалуйста. - person JotaBe; 22.01.2014

arrow_upward
0
arrow_downward

Привет, вот мое полное рабочее решение.

Индексное представление выглядит следующим образом:

@model BarClients.Models.BarClientsViewModel

@{
    ViewBag.Title = "Index";
}

(многие элементы для представления индекса удалены здесь, но частично показаны ниже).

@{Html.RenderAction("EmailAddressGrid", "Home");}

Мое частичное представление _EmailAddressGrid.cshtml выглядит следующим образом:

@model BarClients.Models.BarClientsViewModel

@{
    WebGrid grid = null;
    if (Model.EmailAddressesOfChosenClient.Count<string>() != 0)
    {
        grid = new WebGrid(Model.EmailAddressesOfChosenClient, ajaxUpdateContainerId: "gridContent");
    }
}

div id="gridContent" (arrows omitted)
@{ if (grid != null)
   {
      @grid.GetHtml()  //work to be done here
   }
}
div (arrows ommitted)

Мои два действия контроллера следующие:

[HttpPost]
public ActionResult PopulateEmailAddressUI(string clientID)
{
    _clientModel = InitialiseBarClientsModel();

    _clientModel.FindEmailAddresses(from client in eFormsDB.BAR_Clients where client.ClientId == clientID select client);

    return PartialView("~/Views/Shared/_EmailAddressGrid.cshtml", _clientModel);
}

public ActionResult EmailAddressGrid()
{
   _clientModel = InitialiseBarClientsModel();
   return PartialView("~/Views/Shared/_EmailAddressGrid.cshtml", _clientModel);
}

Моя функция jQuery (работающая благодаря Jotabe) выглядит следующим образом:

jQuery(document).ready(function () {
    $("#MeditechDropDown").change(function () {
        var id = $(this).find(":selected").val()
        var clientID = { "clientID": id }
        $.ajax({
            url: "/Home/PopulateEmailAddressUI",
            data: JSON.stringify(clientID), // Send value of the drop down change of option
            type: 'POST',
            datatype: 'html',
            contentType: 'application/json; charset=utf-8',
            success: function (response) {
                $('#gridContent').html(response)
            }
        });
    });
});

Подсказки JotaBe и некоторые другие веб-исследования привели меня сюда. Теперь я получаю динамическое изменение WebGrids в представлении индекса на основе идентификаторов ClientID, выбранных или повторно выбранных из моего DropDownList в представлении индекса.

person user3041439    schedule 21.01.2014