如何使用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
问题描述
In a MVC partial view file, I build one Html.TextBox and two submit buttons.
在 MVC 部分视图文件中，我构建了一个 Html.TextBox 和两个提交按钮。 These two buttons will increase/decrease the Html.TextBox value once clicked.这两个按钮将在单击后增加/减少 Html.TextBox 值。 The Html.TextBox displayed value will change accordingly.However, once I need to update the #refTable div based on the new value after click. Html.TextBox 显示的值将相应更改。但是，一旦我需要在单击后根据新值更新 #refTable div。 The page or section never updated.该页面或部分从未更新。 Codes are below, where some comments are added for explanation purpose.代码如下，其中添加了一些注释以供解释。 Thanks for your help.谢谢你的帮助。
// * ** * *** // * ** * *** 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>
3 个解决方案
解决方案1
79 2013-10-16 18:27:15
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 HolidayPartialView gets rendered into html and the jquery done callback inserts that html fragment into the refTable div. HolidayPartialView被渲染成 html，jquery done回调将该 html 片段插入到refTable div 中。
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 中的内容。
解决方案2
2 2016-11-24 11:52:39
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);
});
解决方案3
0 2018-04-13 16:35:18
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);
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.