Comment utiliser jQuery ou ajax pour mettre à jour la vue partielle de razor dans c#/asp.net pour un projet MVC
dans un fichier de vue partielle MVC, je construis un Html.Boîte de texte et deux boutons soumettre. Ces deux boutons vont augmenter / diminuer le Html.Valeur de la boîte de texte une fois cliqué. HTML.La valeur affichée par TextBox changera en conséquence.Cependant, une fois que j'ai besoin de mettre à jour le div #refTable basé sur la nouvelle valeur après clic. La page ou la section n'a jamais été mise à jour. Les Codes sont ci-dessous, où certains commentaires sont ajoutés à des fins d'explication. Merci pour votre aider.
//******** fichier cshtml************//
<body>
</body>
<input type="submit" value="PrevY" name="chgYr2" id="pY" />
@{
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());
}
}
<input type="submit" value="NextY" name="chgYr2" id="nY" />
<script type="text/javascript">
$(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)
}
});
});
</script>
<span style="float: right"><a href="/">Set Holiday Calender for 2013</a></span>
<span id="btnAddHoliday">@Html.ActionLink("Add Holiday", "Create", null, new { id = "addHilBtn" })</span>
<div id="refTable">
<table class="tblHoliday" style="width: 100%;">
<th>
Holiday
</th>
<th>
Dates
</th>
<th>Modify</th>
<th>Delete</th>
</tr>
@foreach (var item in Model)
{
if ( Convert.ToDateTime(item.Holiday_date).Year == ViewBag.selYear)
// if the ViewBag.selYear is hard code, this selection "works"
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Holiday_Name)
</td>
<td>
@item.Holiday_date.Value.ToString("MM/dd/yyyy")
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { })
</td>
<td>
@Html.ActionLink("Delete", "Delete", new { })
</td>
</tr>
}
}
</table>
</div>
3 réponses
vous aurez besoin D'AJAX si vous voulez mettre à jour une partie de votre page sans recharger la page entière.
main cshtml vue
<div id="refTable">
<!-- partial view content will be inserted here -->
</div>
@Html.TextBox("yearSelect3", Convert.ToDateTime(tempItem3.Holiday_date).Year.ToString());
<button id="pY">PrevY</button>
<script>
$(document).ready(function() {
$("#pY").on("click", function() {
var val = $('#yearSelect3').val();
$.ajax({
url: "/Holiday/Calendar",
type: "GET",
data: { year: ((val * 1) + 1) }
})
.done(function(partialViewResult) {
$("#refTable").html(partialViewResult);
});
});
});
</script>
vous devrez ajouter les champs que j'ai omis. J'ai utilisé un <button> au lieu de soumettre des boutons parce que vous n'avez pas de formulaire (Je n'en vois pas un dans votre markup) et vous avez juste besoin d'eux pour déclencher javascript du côté du client.
HolidayPartialView est rendu en html et jquery done insère le fragment html dans le refTable div.
HolidayController action de mise à Jour
[HttpGet]
public ActionResult Calendar(int year)
{
var dates = new List<DateTime>() { /* values based on year */ };
HolidayViewModel model = new HolidayViewModel {
Dates = dates
};
return PartialView("HolidayPartialView", model);
}
cette action du controller prend le paramètre year et renvoie une liste de dates en utilisant un modèle de vue fortement typé au lieu du ViewBag.
modèle de vue
public class HolidayViewModel
{
IEnumerable<DateTime> Dates { get; set; }
}
HolidayPartialView.csthml
@model Your.Namespace.HolidayViewModel;
<table class="tblHoliday">
@foreach(var date in Model.Dates)
{
<tr><td>@date.ToString("MM/dd/yyyy")</td></tr>
}
</table>
C'est le truc qui s'insère dans votre div.
le concept principal de la vue partielle est de retourner le code HTML plutôt que d'aller à la vue partielle elle-même.
[HttpGet]
public ActionResult Calendar(int year)
{
var dates = new List<DateTime>() { /* values based on year */ };
HolidayViewModel model = new HolidayViewModel {
Dates = dates
};
return PartialView("HolidayPartialView", model);
}
cette action renvoie le code HTML de la vue partielle ("HolidayPartialView").
pour rafraîchir la vue partielle remplacer l'article existant par le nouvel article filtré en utilisant le jQuery ci-dessous.
$.ajax({
url: "/Holiday/Calendar",
type: "GET",
data: { year: ((val * 1) + 1) }
})
.done(function(partialViewResult) {
$("#refTable").html(partialViewResult);
});
Vous pouvez aussi utiliser Url.D'Action pour le chemin d'accès au lieu de la sorte:
$.ajax({
url: "@Url.Action("Holiday", "Calendar", new { area = "", year= (val * 1) + 1 })",
type: "GET",
success: function (partialViewResult) {
$("#refTable").html(partialViewResult);
}
});