web-dev-qa-db-fra.com

Pouvez-vous simplement mettre à jour une vue partielle au lieu de publier une page entière?

Existe-t-il un moyen de soumettre un formulaire de vue partielle dans asp.net mvc sans recharger la page parent, mais en rechargeant la vue partielle uniquement dans son nouvel état? Similaire à la mise à jour de knockout.js à l'aide de la liaison de données.

Ma table de données s'affiche avec un nombre variable de colonnes/noms, donc je ne pense pas que knockout.js soit une option pour celui-ci, donc j'essaie d'utiliser une vue partielle à la place.

asp.net-mvcjqueryknockout.jspartial-views
33
Rayshawn

Pas sans jQuery.

Ce que vous auriez à faire est de mettre votre Partiel dans un div, quelque chose comme:

<div id="partial">
    @Html.Partial("YourPartial")
</div>

Ensuite, pour mettre à jour (par exemple en cliquant sur un bouton avec l'ID button), vous pouvez faire:

$("#button").click(function () {
   $.ajax({
       url: "YourController/GetData",
       type: "get",
       data: $("form").serialize(), //if you need to post Model data, use this
       success: function (result) {
           $("#partial").html(result);
       }
   });
})

Ensuite, votre action ressemblerait à quelque chose comme:

public ActionResult GetData(YourModel model) //that's if you need the model
{
    //do whatever

    return View(model);
}
48
mattytommo

En fait, si votre partiel a une méthode d'action enfant, vous pouvez publier (ou même utiliser un lien d'ancrage) directement dans l'action enfant et obtenir un effet de type Ajax. Nous le faisons dans plusieurs vues.

La syntaxe est

@Html.Action("MyPartial")

The Child Action est

public ActionResult MyPartial()
{
    return PartialView(Model);
}

Si votre formulaire est publié dans l'action enfant

@using (Html.BeginForm("MyPartial"))
{
    ...
}

La vue partielle sera mise à jour avec la vue partielle renvoyée par l'action enfant.

Jquery est toujours un moyen légitime de mettre à jour un partiel. Mais techniquement, la réponse à votre question est OUI.

13
Dave Alperovich

Comme d'habitude, ce que je trouve en cherchant des choses comme ça, c'est que les gens donnent des informations trop limitées, donc je vais essayer d'aider ici. La clé est de configurer un div avec un ID auquel vous pouvez ajouter le code HTML de retour. Aussi, lorsque vous frappez votre contrôleur, assurez-vous qu'il renvoie le partiel. Il y a des problèmes potentiels avec cette méthode mais une bonne journée, cela devrait fonctionner.

<div id="CategoryList" class="widget">
    @{
        Html.RenderPartial("WidgetCategories.cshtml");
    }
</div>

          function DeleteCategory(CategoryID) {
            $.get('/Dashboard/DeleteWidgetCategory?CategoryID=' + CategoryID,
                function (data) {
                    if (data == "No") {
                        alert('The Category has report widgets assigned to it and cannot be deleted.');
                    }
                    else {
                        $('#CategoryList').html(data);
                    }

                }
            );
        }


    [HttpGet("DeleteWidgetCategory")]
    [HttpPost("DeleteWidgetCategory")]
    public IActionResult DeleteWidgetCategory(string CategoryID)
    {
        string Deleted = CategoryModel.DeleteCategory(CategoryID);

        if (Deleted == "Yes")
        {
            return PartialView("WidgetCategories");
        }
        else
        {
            return this.Json("No");
        }
    }
2
Deathstalker

J'utiliserais l'aide Ajax Form pour de tels scénarios en utilisant une vue partielle et @ html.RenderPartial ("partialName") aides partielles

2
Stokes