ASP.NET MVC Vue partielle ajax post?

Index.html (Point De Vue)

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

_AddCategory.cshtml (PartialView)

<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
}

Contrôleur

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

Question: Si l'opération est un succès j'espère que de rediriger vers une autre page (Catégories). Mais pas d'action, pas de message d'erreur. Si le fonctionnement n'est pas le succès, il travaille comme mon attendus.

Comment puis-je faire cela? Comment puis-je voie une autre page avec l'aide d'AJAX post?

source d'informationauteur AliRıza Adıyahşi

Ne pas rediriger les actions du controller qui sont invoqués avec AJAX. Il est inutile. Vous pouviez retourner l'url que vous souhaitez rediriger un 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);
    }
}

puis sur le client de test pour la présence de cette url, et d'agir en conséquence:

$.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 () {

    }
});

Également remarquer que j'ai réussi à se débarrasser de la dataType: 'json' paramètre de votre $.ajax() appel. Ce qui est extrêmement important que nous ne sommes pas toujours de retour JSON (dans votre cas, vous n'avez jamais été de retour JSON pour ce paramètre était absolument faux). Dans mon exemple, nous retour JSON seulement dans le cas d'un succès et text/html (PartialView) dans le cas de l'échec. Donc, vous devez laisser jQuery simplement utiliser le Content-Type - tête de réponse HTTP renvoyé par le serveur automatiquement déduire le type et analyser le résultat paramètre passé à votre succès de rappel en conséquence.

De l'appel ajax vous avez fait ne devrait pas être en mesure de rediriger l'ensemble de la page. Il renvoie les données de votre appel asynchrone. Si vous souhaitez effectuer une redirection, je

façon javascript pour rediriger est avec fenêtre.emplacement

De sorte que votre appel ajax devrait ressembler à ceci:

<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>

En vous de la méthode d'action, au lieu de retourner une partie ou de la redirection, de retour Json(true);

public ActionResult _AddCategory(CategoriesViewModel viewModel)
{
    if(//success)
    {
        return Json(true);
    }
    else
    {
        return Json(false);
    }
}

Vous devez vous connecter pour publier un commentaire.