Вернуть частичное представление в JSON из контроллера в MVC

Question

Моя ситуация

У меня есть список элементов (опросов), отображаемых на моей домашней странице.Когда я нажимаю кнопку редактирования для определенного элемента, у меня появляется модальное всплывающее окно с деталями элементов для редактирования.Когда пользователь нажимает Сохранить , я отправляю форму через ajax.В зависимости от того, ModelState.IsValid == true, я хочу обновить модал с информацией проверки или закрыть модал и обновить список элементов с новой информацией.

Вот как я отправляю форму:

    $('#editSurveyForm form').live('submit', function () {
        var f = $("#saveSurvey").parents("form");
        var action = f.attr("action");
        var serializedForm = f.serialize();
        $.ajax({
            type: "POST",
            url: action,
            dataType: "html",
            data: serializedForm,
            success: function (result) {
                //TODO - I need an indicator that validation was successful

                //If Validation Failed reload form with validation errors
                $('#editSurveyModal').html(result);

                //If Successful, reload Survey Partial View
                //$('#surveyBox').html(result);
            }
        });
        return false;
    });

Мои вопросы

Единственное, что я могу подумать, это вернуть JSON из моего контроллера с флагом, указывающим состояние ModelState.IsValid и соответствующий фрагмент, который я должен показать.

1) Как бы я это сделал?

2) Есть ли лучший способ?

Обновление

Я нашел это: http://www.klopfenstein.net/lorenz.aspx/render-partial-view-to-string-in-asp-net-mvc

но кажется более вероятным, что я все делаю неправильно.

Answer 1

Один из способов пропустить использование JSON - поиск определенных элементов в возвращенном HTML.Если вы используете какие-либо html-помощники для проверочных сообщений (Html.ValidationSummary(), Html.ValidationMessageFor()), они будут отображать элементы с определенными классами, которые вы можете использовать для определения результата.Если нет, вы можете создать свои собственные стандарты.

Например, если вы используете Html.ValidationSummary -метод, он отобразит список с классом validation-summary-errors.Таким образом, вы можете установить такую ​​переменную и затем обработать ответ соответствующим образом.

var isValid = $(response).find(".validation-summary-errors").length == 0;

Итак, в вашей ситуации:

success: function (result) {
    var isValid = $(result).find(".validation-summary-errors").length == 0;

    //If Successful, reload Survey Partial View
    if (isValid) {
         $('#surveyBox').html(result);
    }
    //If Validation Failed reload form with validation errors
    else {
        $('#editSurveyModal').html(result);
    }
}

Answer 2

Сделай как положено

jQuery Ajax-запросы могут обрабатывать success, а также error состояния. Таким образом, правильный способ - на самом деле вернуть ошибку ( не HTTP 200 состояние) с сервера, если у вас есть ошибки проверки. Не возвращайте представления, если вы не должны отображать их. Но даже в этом случае они должны быть частью ошибочного результата, который будет отображаться различными функциональными возможностями на стороне клиента (error функция обработчика).

Прочитайте все подробности об этом в моем блоге . Там также представлен весь код, и все объясняется шаг за шагом, поэтому его легко понять.

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

$.ajax({
    type: "POST",
    data: /* your data */,
    success: function(data, state, xhr) {
        // do wahetever required
    },
    error: function(xhr, state, err) {
        // do something about the error ie. inform the user about it
    }
});

Это гораздо лучше, чем обнаруживать ошибки в состоянии success и иметь в нем ненужную ветвь. Предполагается, что jQuery будет использоваться таким образом, а не только с обработчиком success.

Sidenote

Прошу прощения за то, что не видел ваш вопрос раньше, потому что, полагаю, это сделает вас счастливее от информации, которую он предоставляет.

Answer 3

Вы можете вернуть флаг, который сообщит вам, если вы получили ошибки или нет, и, в зависимости от этого флага, другой набор данных. Если это ошибка, верните что-то вроде:

{success: false, errors: ['Name invalid','email invalid']}

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

{success: true, Name:'new name',email: 'new email'}

и ваш сценарий

....
$.ajax({
        type: "POST",
        url: action,
        dataType: "html",
        data: serializedForm,
        success: function (result) {
            if(!result.success)
            {
                  //Show errors     
            }
            else
            {
                  // Update data
            }
        }
    });
.....

Чтобы показать ошибки, вы можете иметь div в модальном popUp, а затем для каждого элемента в result.errors добавить div в div ошибки.

Если успех верен, найдите элемент, на который вы нажали, и обновите его, указав дату в вашем результате.

Дайте мне знать, если вы не знаете, как это сделать.

Answer 4

Мой метод обновления индекса частичного просмотра. Этот метод заполнения моей таблицы, как обновление AJAX JQuery?

Мне нравится обновлять только таблицу mu в PartialView. Эта ситуация:

    <div class="container container-Top">
        <h4>Lista de categorias produtos</h4>
        <p>
            <hr />
            <br />
            @using (Html.BeginForm())
            {
                <div class="form-group">
                    <div class="col-lg-4">
                        @Html.TextBox("NomeCategoria", null, new { @class = "form-control" })
                    </div>
                    @Html.ActionLink("Pesquisar", null, null, new { @class = "btn btn-default", @id = "Pesquisar" })
                </div>
            }                       
            <br />
            <br />
            <br />
            <div id="DvDetalheCategoria" class="form-group">
                @Html.Partial("_DetalhesCategoria", Model)
            </div>
    </div>

Мой Jquery

    <script type="text/javascript">

            $(function () {
                $("#Pesquisar").click(function () {
                    var $btnPesquisar = $(this);
                    var idCategoria = $("#NomeCategoria").val();                
                    $.ajax({
                        url: '@Url.Action("_DetalhesCategoria", "VntCategoria")',
                        data: { pName: idCategoria },
                        type: 'POST',
                        success: function (data) {
                            $("#DvDetalheCategoria").html(data);                        
                        },
                        error: function (ex) {
                            alert('Falha ao carregar categorias' + item.Id);
                        }
                    });
                });
            });
        </script>

Мои контроллеры:

     // GET: /VntCategoria/
    public ActionResult Index()
    {
        return View(db.VntCategoriaProdutos.ToList());
    }

    [HttpPost]
    public ActionResult _DetalhesCategoria(string pName)
    {
        ListaCategorias = new List<VntCategoriaProdutos>();
        ListaCategorias = db.VntCategoriaProdutos.ToList().FindAll(f => f.DescricacaoCategoria == pName);
        return View(ListaCategorias);
    }