MVC 视图数据不会在 jQuery Post 上更新，但在表单提交按钮单击时会更新

Question

我的视图中有一个DropDownListFor，它从服务器上的日期列表中选择一个日期。当我使用jQuery.on时；零钱"$。post操作将我选择的日期发布回控制器，它正确地从服务器获取更新的数据值并更新视图模型，但随后它不会显示在浏览器中。它将保留以前的值。但是，如果我单击视图表单中的提交按钮，它会使用服务器中的数据正确地更新数据字段。我发布下拉列表选择的方式决定了我的数据字段是否正确更新。

有人对我如何让jQuery帖子更新视图中的数据字段而不是保留以前的值有什么建议吗？

这是我的视图模型：

public class HtmlData
{
public string FileDateListSelection { get; set; }
public List<SelectListItem> FileDateList { get; set; }
public string ServerData { get; set; }
public HtmlData(string selectedDate, List<SelectListItem> fileDateList, string serverData)
{
FileDateListSelection = selectedDate;
FileDateList = fileDateList;
ServerData = serverData;
}
}

这是我的观点：

@model MvcJqueryTest.Models.HtmlData
@using (Html.BeginForm("SubmitButtonDateChange", "Home", FormMethod.Post, new { id = "dateSelectionForm" }))
{
<div class="row">
<div class="col-md-4">
<div id="dateList">
@Html.DropDownListFor(m => m.FileDateListSelection, Model.FileDateList)
</div>
</div>
<div class="col-md-2">
<div id="buttons">
<input type="submit" name="submit" value="Fetch" id="fetchButton" />
<input type="submit" name="submit" value="Reset" id="resetButton" />
</div>
</div>
</div>
}
<div class="row">
<div class="col-md-8">
<br />
<h3>@Model.ServerData</h3>
<br />
</div>
</div>
<script type="text/javascript">
$('#FileDateListSelection').on("change", function () {
var menuDateSelected = $('#FileDateListSelection').val();
$.post(
'@Url.Action("JqueryDateChange", "Home")',
{ selectedDate: menuDateSelected },
function (response) {
}
);
});
</script>

这是我的家庭控制器方法：

public ActionResult Index(string dateString)
{
DateTime compareTime = DateTime.Today;
if (!string.IsNullOrEmpty(dateString))
compareTime = DateTime.Parse(dateString);
string quote = "Now is the winter of our discontent";
if (compareTime < DateTime.Today)
quote = "Made glorious summer by this sun of York";
string selectedDate = FileOperations.GetDateList(compareTime, out List<SelectListItem> dateList);
HtmlData hd = new HtmlData(selectedDate, dateList, quote);
return View(hd);
}
[HttpPost]
public ActionResult SubmitButtonDateChange(string FileDateListSelection, string submit)
{
string selectedDate = FileDateListSelection;
if (submit.Equals("Reset", StringComparison.OrdinalIgnoreCase))
selectedDate = DateTime.Now.Date.ToString("d", CultureInfo.GetCultureInfo("en-US"));
return RedirectToAction("Index", "Home", new { dateString = selectedDate });
}
[HttpPost]
public ActionResult JqueryDateChange(string selectedDate)
{
return RedirectToAction("Index", "Home", new { dateString = selectedDate });
}

GetDateList方法只是为下拉列表返回文件夹中文件日期的SelectListItem列表，并选择一个日期作为列表中的选定项目。如果选择的日期在今天之前；ServerData"；视图中的属性显示"；现在是我们不满的冬天；。如果所选择的日期在今天午夜之后，h3标签显示"0"；在约克的阳光下度过了灿烂的夏天；。

当我更改下拉列表中的选择时，JqueryDateChange控制器方法执行，并以所选日期为参数对Index方法执行RedirectToAction，该方法用"的正确数据填充视图模型；ServerData"；所有物但是；ServerData"；模型中的值不会显示在浏览器中。它总是保留以前的值，即使当我在视图中设置<h3>@Model.ServerData</h3>中断时，我可以在调试器中看到正确的值。

当我单击视图窗体中的"获取"或"重置"按钮时，SubmitButtonDateChange控制器方法将执行，并以选定日期为参数对Index方法执行RedirectToAction。这也在视图模型中填充了"0"的正确值；ServerData"；属性，但随后它会在浏览器中正确更新，并根据下拉列表选择显示新值。

我最初使用$.ajax发布新的下拉列表建议，但这也有同样的问题。我还试着把"@Model.ServerData"；在Form的花括号内，但这也无济于事。我发现了一些关于ModelState的信息，我认为这些信息可能会有所帮助，但当我在调试器中查看它时，它只有一个dateString参数的键/值对，所以我不知道如何使用它来解决问题。

Answer 1

我认为AJAX解决方案足以满足您的场景。您可以执行以下操作。

首先，为HTML元素定义一个唯一的id，在其中显示ServerData:的值

<div class="row">
<div class="col-md-8">
<br />
<h3 id="serverDataID">@Model.ServerData</h3>
<br />
</div>
</div>

然后你需要这样定义你的AJAX调用：

<script type="text/javascript">
$('#FileDateListSelection').on("change", function () {
var menuDateSelected = $('#FileDateListSelection').val();

var json = {
menuDateSelected: menuDateSelected
};
var options = {};
options.url = "@Url.Action("JqueryDateChange", "Home")";
options.type = "POST";
options.data = {"json": JSON.stringify(json)};
options.dataType = "json";
options.success = function (data) {
if (data.status == "true") {
$('#serverDataID').html(data.quoteString);
}
else {
alert("Some Error");
}
};
options.error = function (data) {
alert("Error while calling function");
console.log(data);
};
$.ajax(options);
});
</script>

您的Controller方法将返回一个JsonResult来处理回调：

using System.Web.Script.Serialization;
[HttpPost]
public JsonResult JqueryDateChange(string json)
{
var serializer = new JavaScriptSerializer();
dynamic jsondata = serializer.Deserialize(json, typeof(object));
//Get your variables here from AJAX call
var dateString = Convert.ToString(jsondata["menuDateSelected"]);
DateTime compareTime = DateTime.Today;
if (!string.IsNullOrEmpty(dateString))
compareTime = DateTime.Parse(dateString);
string quote = "Now is the winter of our discontent";
if (compareTime < DateTime.Today)
quote = "Made glorious summer by this sun of York";
string selectedDate = FileOperations.GetDateList(compareTime, out List<SelectListItem> dateList);   
return Json(new { status = "true", quoteString = quote }, JsonRequestBehavior.AllowGet);
}