Wie man jQuery oder Ajax benutzt, um Teilansicht des razors in c # / asp.net für ein MVC Projekt zu aktualisieren

In einer MVC-Teilansichtsdatei erstelle ich eine Html.TextBox und zwei Übermittlungsschaltflächen. Diese beiden Schaltflächen erhöhen / verringern den Html.TextBox-Wert nach dem Klicken. Der angezeigte Html.TextBox-Wert wird sich entsprechend ändern. Allerdings muss ich das #refTable-Div basierend auf dem neuen Wert nach dem Klick aktualisieren. Die Seite oder Sektion wurde nie aktualisiert. Codes sind unten, wo einige Kommentare zur Erklärung hinzugefügt werden. Danke für Ihre Hilfe.

// * ** * *** cshtml-Datei ** * ** * **** //

   @{ var tempItem3 = Model.First(); // just give the first entry from a database, works. if (ViewData["curSel"] == null) { @Html.TextBox("yearSelect3", Convert.ToDateTime(tempItem3.Holiday_date).Year.ToString()); ViewBag.selYear = Convert.ToDateTime(tempItem3.Holiday_date).Year; // just initial value, works ViewData["curSel"] = Convert.ToDateTime(tempItem3.Holiday_date).Year; } else { @Html.TextBox("yearSelect3", ViewData["curSel"].ToString()); } }   $(document).ready(function () { $(document).on("click", "#nY", function () { var val = $('#yearSelect3').val(); $('#yearSelect3').val((val * 1) + 1); var dataToSend = { id: ((val * 1) + 1) } // add some jquery or ajax codes to update the #refTable div // also ViewBag.selYear need to be updated as ((val * 1) + 1) // like: ViewBag.selYear = ((val * 1) + 1); // any similar temp variable is fine }); }); $(document).on("click", "#pY", function () { var val = $('#yearSelect3').val(); $('#yearSelect3').val((val * 1) - 1); var dataToSend = { id: ((val * 1) - 1) } }); });  Set Holiday Calender for 2013 @Html.ActionLink("Add Holiday", "Create", null, new { id = "addHilBtn" }) 
@foreach (var item in Model) { if ( Convert.ToDateTime(item.Holiday_date).Year == ViewBag.selYear) // if the ViewBag.selYear is hard code, this selection "works" { } }
Holiday Dates Modify Delete
@Html.DisplayFor(modelItem => item.Holiday_Name) @item.Holiday_date.Value.ToString("MM/dd/yyyy") @Html.ActionLink("Edit", "Edit", new { }) @Html.ActionLink("Delete", "Delete", new { })

   

Sie benötigen AJAX, wenn Sie einen Teil Ihrer Seite aktualisieren möchten, ohne die gesamte Seite neu zu laden.

Hauptansicht von cshtml

 
@Html.TextBox("yearSelect3", Convert.ToDateTime(tempItem3.Holiday_date).Year.ToString());

Sie müssen die Felder hinzufügen, die ich weggelassen habe. Ich habe einen anstelle von “submit” -Buttons verwendet, weil Sie kein Formular haben (ich sehe keins in Ihrem Markup) und Sie brauchen nur sie, um Javascript auf der Client-Seite auszulösen.

Die HolidayPartialView wird in HTML gerendert, und der callback jquery done fügt dieses HTML-Fragment in das refTable div ein.

Aktualisierung des HolidayControllers

 [HttpGet] public ActionResult Calendar(int year) { var dates = new List() { /* values based on year */ }; HolidayViewModel model = new HolidayViewModel { Dates = dates }; return PartialView("HolidayPartialView", model); } 

Diese Controller-Aktion verwendet den Parameter year und gibt eine Datumsliste mit einem stark typisierten Ansichtsmodell anstelle des ViewBags zurück.

Modell ansehen

 public class HolidayViewModel { IEnumerable Dates { get; set; } } 

HolidayPartialView.csthml

 @model Your.Namespace.HolidayViewModel;  @foreach(var date in Model.Dates) {  } 
@date.ToString("MM/dd/yyyy")

Dies ist das Zeug, das in dein div eingefügt wird.

Das Hauptkonzept der Teilansicht besteht darin, den HTML-Code zurückzugeben, anstatt zur Teilansicht zu gehen.

 [HttpGet] public ActionResult Calendar(int year) { var dates = new List() { /* values based on year */ }; HolidayViewModel model = new HolidayViewModel { Dates = dates }; return PartialView("HolidayPartialView", model); } 

Diese Aktion gibt den HTML-Code der Teilansicht (“HolidayPartialView”) zurück.

Um die Teilansicht zu aktualisieren, ersetzen Sie das vorhandene Element durch das neue gefilterte Element mithilfe der folgenden jQuery.

 $.ajax({ url: "/Holiday/Calendar", type: "GET", data: { year: ((val * 1) + 1) } }) .done(function(partialViewResult) { $("#refTable").html(partialViewResult); }); 

Sie können stattdessen auch Url.Action für den Pfad verwenden:

 $.ajax({ url: "@Url.Action("Holiday", "Calendar", new { area = "", year= (val * 1) + 1 })", type: "GET", success: function (partialViewResult) { $("#refTable").html(partialViewResult); } });