web-dev-qa-db-fra.com

Comment puis-je actualiser juste une vue partielle dans sa vue?

Qu'est-ce que je fais de mauvais gars? Telle est l'idée ...

Vue d'index

<div class="col-lg-12 col-md-12 col-xs-12">
    @Html.Partial("PartialView", Model)
</div>

Manette

public ActionResult PartialView()
{
    return PartialView("PartialView");
}

[HttpPost, ValidateInput(false)]
public ActionResult POSTPartialView(string param1)
{
    return PartialView("PartialView");
}

PartialView a un formulaire. La première fois que j'entre dans Index, PartialView fonctionne, mais la deuxième fois, après un appel POST (provenant du formulaire à l'intérieur de PartialView), je n'ai eu qu'à rendre le PartialView hors de l'index .

Donc pour le réparer, je fais le suivant:

[HttpPost, ValidateInput(false)]
public ActionResult POSTPartialView(string param1)
{
    return View("Index");
}

Ça marche. Je rend à nouveau tous les index (avec mes modifications, après POST). Mais je rafraîchis toutes les pages donc j'ai perdu quelques éléments CSS (accordéon décollé par exemple).

Dois-je utiliser Ajax pour actualiser uniquement le div qui contient PartialView?

Merci mes amis.

ÉDITÉ:

@using (Html.BeginForm("PartialView", "Controller", FormMethod.Post, new { @class = "form-inline", role = "form" }))
{
    <div class="form-group col-lg-3 col-md-3 col-xs-3">
        <label for="DATA">DATA:</label>
        <input type="text" class="form-control pull-right" name="DATA">
    </div> 
    <button type="submit" class="btn btn-primary pull-right">Get Data</button>
}
c#asp.net-mvcrazorasp.net-mvc-partialview
7
Elias MP

Eh bien, j'ai lu la solution ( Auto Refresh Partial View ). Je le poste, en espérant clarifier la question:

index.html 

<div class="col-lg-12 col-md-12 col-xs-12" id="divPartial">
    @Html.Partial("PartialView", Model)
</div>

<script type="text/javascript">
  $("#buttonForm").click(function(e){
    $('#form').submit();
    $('#divPartial').load('/PartialController/PartialView'); 
  });
</script>

Contrôleur partiel 

public ActionResult PartialView()
{
    // DO YOUR STUFF. 
    return PartialView("PartialView", model);
}

[HttpPost, ValidateInput(false)]
public EmptyResult POSTPartialView(string param1)
{
    // DO YOUR STUFF AFTER SUBMIT.
    return new EmptyResult();
}
10
Elias MP

La vue partielle est orientée pour réutiliser certaines parties du code dans différentes vues, mais lorsque vous soumettez un formulaire, la vue entière est rechargée.

Si vous ne voulez pas recharger, vous devez utiliser AJAX pour soumettre le formulaire.

2
Borja Tur

La vue partielle sert à réutiliser certaines parties du code sous différentes formes. Lorsqu'une page est soumise, la vue est rechargée si vous voulez éviter le rafraîchissement de la page, vous pouvez utiliser ajax.

Code pour la vue

$.ajax({
    type: "POST",
    url: '@Url.Action("ControllerName", "ActionName")',
    contentType: "application/json; charset=utf-8",
    data: { data: "yourdata" },
    dataType: "json",
    success: function(recData) { alert('Success'); },
    error: function() { alert('A error'); }
});

Code du contrôleur

public JsonResult ActionName(string yourdata)
{
   return Json(p); \\ where p is you want to return
}
1
Pushpendra Maheshwari