jQuery 如何使用jquery或ajax在c#/asp.net中为MVC项目更新razor局部视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19392212/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use jquery or ajax to update razor partial view in c#/asp.net for a MVC project
提问by user2029505
In a MVC partial view file, I build one Html.TextBox and two submit buttons. These two buttons will increase/decrease the Html.TextBox value once clicked. The Html.TextBox displayed value will change accordingly.However, once I need to update the #refTable div based on the new value after click. The page or section never updated. Codes are below, where some comments are added for explanation purpose. Thanks for your help.
在 MVC 部分视图文件中，我构建了一个 Html.TextBox 和两个提交按钮。这两个按钮将在单击后增加/减少 Html.TextBox 值。Html.TextBox 显示的值将相应更改。但是，一旦我需要在单击后根据新值更新 #refTable div。该页面或部分从未更新。代码如下，其中添加了一些注释以供解释。谢谢你的帮助。
//*******cshtml file **********//
// *** ****.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>
回答by Jasen
You'll need AJAX if you want to update a part of your page without reloading the entire page.
如果您想在不重新加载整个页面的情况下更新页面的一部分，则需要 AJAX。
main cshtml view
主 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>
You'll need to add the fields I have omitted. I've used a <button>instead of submit buttons because you don't have a form (I don't see one in your markup) and you just need them to trigger javascript on the client side.
您需要添加我省略的字段。我使用了一个<button>而不是提交按钮，因为你没有表单（我在你的标记中没有看到一个），你只需要它们在客户端触发 javascript。
The HolidayPartialViewgets rendered into html and the jquery donecallback inserts that html fragment into the refTablediv.
该HolidayPartialView被渲染成HTML和jQuery的done回调会插入HTML片段插入到表reftable格。
HolidayController Update action
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);
}
This controller action takes the year parameter and returns a list of dates using a strongly-typed view model instead of the ViewBag.
此控制器操作采用 year 参数并使用强类型视图模型而不是 ViewBag 返回日期列表。
view model
视图模型
public class HolidayViewModel
{
IEnumerable<DateTime> Dates { get; set; }
}
HolidayPartialView.csthml
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>
This is the stuff that gets inserted into your div.
这是插入到您的 div 中的内容。
回答by Ghebrehiywet
The main concept of partial view is returning the HTML code rather than going to the partial view it self.
分部视图的主要概念是返回 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);
}
this action return the HTML code of the partial view ("HolidayPartialView").
此操作返回局部视图的 HTML 代码（“HolidayPartialView”）。
To refresh partial view replace the existing item with the new filtered item using the jQuery below.
要刷新部分视图，请使用下面的 jQuery 将现有项目替换为新过滤的项目。
$.ajax({
url: "/Holiday/Calendar",
type: "GET",
data: { year: ((val * 1) + 1) }
})
.done(function(partialViewResult) {
$("#refTable").html(partialViewResult);
});
回答by Mike
You can also use Url.Action for the path instead like so:
您也可以使用 Url.Action 作为路径，而不是像这样：
$.ajax({
url: "@Url.Action("Holiday", "Calendar", new { area = "", year= (val * 1) + 1 })",
type: "GET",
success: function (partialViewResult) {
$("#refTable").html(partialViewResult);
}
});
