Index.html (Просмотр)

<div class="categories_content_container">
    @Html.Action("_AddCategory", "Categories")
</div>

AddCategory.cshtml (частичное представление)

<script>
    $(document).ready(function () {
        $('input[type=submit]').click(function (e) {
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: '@Url.Action("_AddCategory", "Categories")',
                dataType: "json",
                data: $('form').serialize(),
                success: function (result) {
                    $(".categories_content_container").html(result);
                },
                error: function () {

                }
            });
        });
    });
</script>

@using (Html.BeginForm())
{
    // form elements
}

Контроллер

[HttpPost]
public ActionResult _AddCategory(CategoriesViewModel viewModel)
{
    if(//success)
    {
        // DbOperations...
        return RedirectToAction("Categories");
    }
    else
    {
        // model state is not valid...
        return PartialView(viewModel);
    }
}

Вопрос: Если операция прошла успешно, я ожидаю, что перенаправить на другую страницу (Категории). Но никаких действий, никаких сообщений об ошибках. Если операция не удалась, она работает так, как я ожидал.

Как я могу это сделать? Как я могу направить другую страницу с помощью сообщения AJAX?

14
AliRıza Adıyahşi 3 Фев 2013 в 02:37

2 ответа

Лучший ответ

Не перенаправляйте действия контроллера, которые вызываются с помощью AJAX. Это бесполезно. Вы можете вернуть URL, на который вы хотите перенаправить, как JsonResult:

[HttpPost]
public ActionResult _AddCategory(CategoriesViewModel viewModel)
{
    if(//success)
    {
        // DbOperations...
        return Json(new { redirectTo = Url.Action("Categories") });
    }
    else
    {
        // model state is not valid...
        return PartialView(viewModel);
    }
}

А затем на клиенте проверьте наличие этого URL и действуйте соответственно:

$.ajax({
    type: "POST",
    url: '@Url.Action("_AddCategory", "Categories")',
    data: $('form').serialize(),
    success: function (result) {
        if (result.redirectTo) { 
            // The operation was a success on the server as it returned
            // a JSON objet with an url property pointing to the location
            // you would like to redirect to => now use the window.location.href
            // property to redirect the client to this location
            window.location.href = result.redirectTo;
        } else {
            // The server returned a partial view => let's refresh
            // the corresponding section of our DOM with it
            $(".categories_content_container").html(result);
        }
    },
    error: function () {

    }
});

Также обратите внимание, что я избавился от параметра dataType: 'json' из вашего вызова $.ajax(). Это чрезвычайно важно, так как мы не всегда возвращаем JSON (в вашем случае вы никогда не возвращали JSON, поэтому этот параметр был абсолютно неверным). В моем примере мы возвращаем JSON только в случае успеха и text/html (PartialView) в случае сбоя. Поэтому вы должны оставить jQuery, просто используя заголовок ответа Content-Type HTTP, возвращаемый сервером, чтобы автоматически определить тип и соответствующим образом проанализировать параметр результата, переданный в ваш обратный вызов.

30
Darin Dimitrov 2 Фев 2013 в 23:16

Сделанный вами вызов ajax не сможет перенаправить всю страницу. Он возвращает данные только на ваш асинхронный вызов. Если вы хотите выполнить перенаправление, я

Javascript способ перенаправления с помощью window.location

Итак, ваш вызов ajax должен выглядеть так:

<script>
    $(document).ready(function () {
        $('input[type=submit]').click(function (e) {
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: '@Url.Action("_AddCategory", "Categories")',
                dataType: "json",
                data: $('form').serialize(),
                success: function (result) {
                    window.location='@Url.Action("Categories")';
                },
                error: function () {

                }
            });
        });
    });
</script>

В вашем методе действия вместо возврата частичного или перенаправления вернуть Json (true);

public ActionResult _AddCategory(CategoriesViewModel viewModel)
{
    if(//success)
    {
        return Json(true);
    }
    else
    {
        return Json(false);
    }
}
5
Dave Alperovich 2 Фев 2013 в 23:10