gpt4 book ai didi

asp.net-mvc - 如何使用 jquery 或 ajax 更新 MVC 项目的 C#/asp.net 中的 razor 部分 View

转载 作者:行者123 更新时间:2023-12-03 21:28:14 25 4
gpt4 key购买 nike

在 MVC 部分 View 文件中,我构建了一个 Html.TextBox 和两个提交按钮。单击这两个按钮将增加/减少 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>而不是提交按钮,因为您没有表单(我在标记中没有看到表单),而您只需要它们在客户端触发 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);
}

此 Controller 操作采用年份参数,并使用强类型 View 模型而不是 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 中的内容。

关于asp.net-mvc - 如何使用 jquery 或 ajax 更新 MVC 项目的 C#/asp.net 中的 razor 部分 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19392212/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com