如何使用 jquery 或 ajax 在 c#/asp.net 中为 MVC 项目更新 razor 部分视图
Posted
技术标签:
【中文标题】如何使用 jquery 或 ajax 在 c#/asp.net 中为 MVC 项目更新 razor 部分视图【英文标题】：How to use jquery or ajax to update razor partial view in c#/asp.net for a MVC project 【发布时间】：2013-10-23 21:44:49 【问题描述】：在 MVC 部分视图文件中，我构建了一个 html.TextBox 和两个提交按钮。这两个按钮将在单击后增加/减少 Html.TextBox 值。 Html.TextBox 显示的值会相应改变。但是，一旦我需要在单击后根据新值更新#refTable div。页面或部分从未更新。代码如下，其中添加了一些 cmets 用于解释目的。感谢您的帮助。
//******* 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代码在哪里？ 我把 ajax 拿出来了，因为这些 ajax 是用来调用 MVC 动作的。我试图通过执行 MVC 操作来刷新网页，但徒劳无功。 【参考方案1】：如果您想更新页面的一部分而不重新加载整个页面，则需要 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> 而不是提交按钮，因为您没有表单（我在您的标记中没有看到），您只需要它们在客户端触发 javascript。
HolidayPartialView 被渲染成 html，jquery done 回调将该 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 参数并使用强类型视图模型而不是 ViewBag 返回日期列表。
查看模型
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 中的内容。
【讨论】：
好的，我喜欢你的解决方案，但为什么要使用 done？为什么不直接使用ajax的成功回调？Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are deprecated as of jQuery 1.8. To prepare your code for their eventual removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead. jQuery.ajax()
您好豪尔赫，非常感谢您的帮助。欣赏！！关于“ajax回调”的使用。抱歉，我还是 ajax 和 MVC 的新手，需要一些时间来消化它们。
.done(function(partialViewResult) $("#refTable").html(partialViewResult); );详细解释上面的代码块。【参考方案2】：
部分视图的主要概念是返回 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);
此操作返回部分视图的 HTML 代码（“HolidayPartialView”）。
要刷新部分视图，请使用下面的 jQuery 将现有项目替换为新过滤的项目。
$.ajax(
url: "/Holiday/Calendar",
type: "GET",
data: year: ((val * 1) + 1)
)
.done(function(partialViewResult)
$("#refTable").html(partialViewResult);
);
【讨论】：
【参考方案3】：您也可以像这样使用 Url.Action 作为路径：
$.ajax(
url: "@Url.Action("Holiday", "Calendar", new area = "", year= (val * 1) + 1 )",
type: "GET",
success: function (partialViewResult)
$("#refTable").html(partialViewResult);
);
【讨论】：
以上是关于如何使用 jquery 或 ajax 在 c#/asp.net 中为 MVC 项目更新 razor 部分视图的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 $.ajax（jQuery 或 Zepto）发布对象数组
如何使用 jquery 或 ajax 获取外部 html 页面内容 [重复]
html标签在点击时使用jquery和ajax向上或向下传输[关闭]