Comment recharger une div avec une PartialView dans ASP.NET MVC à l'aide de jQuery?

StackOverflow https://stackoverflow.com/questions/1433419

Question

J'ai une div avec un partiel à l'intérieur quelque part sur la page. J'ai un événement sur un bouton. Comment pourrais-je écrire un Javascript qui prend la div et le recharge et recharge également la vue partielle.

J'ai ceci dans une autre vue. Mais je ne peux pas le faire comme ça maintenant. Mais j'ai besoin de la même chose pour que l'exécuter par un jQuery pas directement dans la page. Puis-je exécuter peut-être du code ajax simular dans le script jQuery, car son javascript n'est pas non plus ?. 

<%  using (Ajax.BeginForm("EditFeiertag", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "feiertage" }))
    {  %>
<div id="feiertage">
    <% Html.RenderPartial("FeiertagTable"); %>
</div>
<%  } %>

Je voudrais m'aider si je pouvais exécuter le script ci-dessus en lançant un événement click ou quelque chose comme ça

Était-ce utile?

La solution

Commençons par quelques actions de base du contrôleur: 

public class FeiertagController
{
    IFeiertagService feiertagService = new FeiertagService();

    public ActionResult EditFeiertag()
    {
        // ... return your main edit view
        return View();
    }

    // Will be called by your jquery ajax call
    public PartialResult GetFeiertagTable()
    {
        var feiertagData = messageService.getLatestFeiertagData();
        var viewModel = new FeiertagViewModel();
        feiertagViewModel.feirtagTableData = feiertagData;

        return PartialView("FeiertagTableView", viewModel);
    }

}

Donc, EditFeiertag () est utilisé pour restituer la totalité de votre page de modification. Cette page appellera GetFeiertagTable () lorsqu’elle souhaite restituer votre vue partielle de manière asynchrone.

Maintenant, à votre avis, disons que vous avez quelque chose comme: 

<div id="Container">
    <div id="LeftPanel">
        // ... Some menu items
    </div>
    <div id="RightPanel">
        <a id="ReloadLink" href="#">Reload Table</a>
        <div id="FeiertagTable>
            <% Html.RenderPartial("FeiertagTable", Model.feiertagTableData); %>
        </div>
    </div>
</div>

Cela fonctionne bien et chargera votre table une fois. Mais vous voulez que la table Feiertag soit rechargée si vous cliquez sur un élément donné (dans notre cas, le #ReloadLink).

Ajoutez les éléments suivants à la partie de votre page: 

<head>
        <script src="../../Scripts/Jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $('#ReloadLink').click(function(e)
                {
                    e.preventDefault();  // stop the links default behavior
                    $('#FeiertagTable').load('/Feiertag/GetFeiertagTable');
                });
            });
        </script>
</head>

Cela ajoutera alors un événement sur l'événement click pour votre lien de rechargement qui appellera une méthode jquery load (). Cette méthode est une demande d'ajax get simplifiée et elle remplacera le contenu de la div sélectionnée (FeiertagTable) par ce qui est renvoyé.

Notre action de contrôleur GetFeiertagTable () renvoie la vue partielle, qui est ensuite insérée dans cette division.

J'espère que cela vous amènera dans la bonne direction!

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top