Wie kann ich ein div mit einem PartialView in ASP.NET MVC mithilfe von jQuery neu laden?

Question

Ich habe ein div mit einem Teil innerhalb irgendwo auf der Seite. Ich habe ein Ereignis auf einem Button. Wie könnte ich ein JavaScript schreiben, das das div nimmt und neu lädt und auch die partielle Ansicht neu lädt.

Ich habe dies in einer anderen Ansicht. Aber ich kann es jetzt nicht so machen. Aber ich benötige, dass dasselbe passiert, jedoch nur durch eine jQuery ausgeführt und nicht direkt auf der Seite. Kann ich vielleicht ähnlichen Ajax-Code im jQuery-Skript ausführen, weil es ja auch JavaScript ist, oder?

<%  using (Ajax.BeginForm("EditFeiertag", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "feiertage" }))
    {  %>

    <% Html.RenderPartial("FeiertagTable"); %>

<%  } %>

Es würde mir helfen, wenn ich das oben genannte Skript starten könnte, indem ich ein Klickereignis oder so etwas ausführe

Answer 1

Beginnen wir mit einigen grundlegenden Controller-Aktionen:

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

    public ActionResult EditFeiertag()
    {
        // ... gib deine Hauptbearbeitungsansicht zurück
        return View();
    }

    // Wird von deinem jquery ajax-Aufruf aufgerufen
    public PartialResult GetFeiertagTable()
    {
        var feiertagData = messageService.getLatestFeiertagData();
        var viewModel = new FeiertagViewModel();
        feiertagViewModel.feirtagTableData = feiertagData;

        return PartialView("FeiertagTableView", viewModel);
    }

}

Also, EditFeiertag() wird verwendet, um deine gesamte Bearbeitungsseite zu rendern, und diese Seite wird einen Aufruf an GetFeiertagTable() machen, wenn sie deine Teilanzeige asynchron rendern will.

Jetzt, in deiner Ansicht, nehmen wir an, du hast etwas wie:

        // ... Einige Menüpunkte

        Tabelle neu laden

Dies funktioniert gut und lädt deine Tabelle einmal. Aber du möchtest die Feiertag-Tabelle neu laden, wenn du auf ein bestimmtes Element klickst (in unserem Fall #ReloadLink).

Füge folgendes zum Teil deiner Seite hinzu:

            jQuery(document).ready(function($) {
                $('#ReloadLink').click(function(e)
                {
                    e.preventDefault();  // stoppe das Standardverhalten des Links
                    $('#FeiertagTable').load('/Feiertag/GetFeiertagTable');
                });
            });

Dadurch wird eine Ereignisbehandlung für das Klickereignis deines Neu laden-Links hinzugefügt, die eine jquery load() Methode aufrufen wird. Diese Methode ist ein vereinfachter Ajax-GET-Anforderung und wird den Inhalt des ausgewählten divs (FeiertagTable) durch das Erhaltene ersetzen.

Unsere GetFeiertagTable() Controller-Aktion wird die Teilanzeige zurückgeben, die dann in dieses div eingefügt wird.

Ich hoffe, das bringt dich in die richtige Richtung!