在MVC部分视图文件中，我构建一个Html.TextBox和两个提交按钮。一旦点击，这两个按钮将增加/减少Html.TextBox值。 Html.TextBox显示的值将相应地改变。然而，一旦我需要在点击之后根据新值更新#refTable div。页面或部分从未更新。下面的代码是为了说明目的添加了一些注释。谢谢你的帮助。
// ******* cshtml file ********** //
<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>而不是提交按钮，因为你没有一个表单(我没有看到一个在你的标记)，你只需要他们在客户端触发javascript。
将HolidayPartialView渲染成html，并将jQuery完成的回调将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的东西。
