如何使用jquery或ajax更新c＃/ asp.net中的剃刀局部视图的MVC项目
在MVC的部分视图文件中，我构build了一个Html.TextBox和两个提交button。 这两个button将增加/减less一旦点击Html.TextBox值。 Html.TextBox的显示值会相应地改变。但是，一旦我需要点击后更新基于新值的#refTable div。 该页面或部分从未更新。 代码如下，添加一些意见是为了解释的目的。 谢谢你的帮助。
// * ** * *** 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> 如果要更新页面的一部分而不重新加载整个页面，则需要使用AJAX。
主要的cshtml视图
<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>
你需要添加我省略的字段。 我用<button>而不是提交button，因为你没有一个表单（我没有看到你的标记），你只需要它们来触发客户端的JavaScript。
HolidayPartialView被渲染成html，jquery donecallback函数将html片段插入到refTable div中。
HolidayController更新操作
[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); }
此控制器操作采用year参数，并使用强types视图模型而不是ViewBag返回date列表。
查看模型
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>
这是插入到你的div的东西。
部分视图的主要概念是返回HTML代码，而不是去自己的局部视图。
[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); }
此操作返回部分视图（“HolidayPartialView”）的HTML代码。
刷新部分视图使用下面的jQueryreplace现有的项目与新的过滤项目。
$.ajax({ url: "/Holiday/Calendar", type: "GET", data: { year: ((val * 1) + 1) } }) .done(function(partialViewResult) { $("#refTable").html(partialViewResult); });
