如何在不加载 MVC 中的 html 的情况下更新部分数据

Question

我想上传部分视图数据而不重新加载 html。 我已经使用Json来获取数据，但我认为脚本中存在一些问题。Success部分未执行。

[HttpPost]
public JsonResult HorseTracker(ClsHorseTracker model)
{
try
{
if (ModelState.IsValid)
{
horseTrackerDetails.InsertUpdateHorseTracker(model);
}
}
return Json(model, JsonRequestBehavior.AllowGet);
}
catch
{
return Json(new { success = false });
}
}
[ChildActionOnly]
public PartialViewResult HorseTrackerDetails()
{
return PartialView("_pHorseTrackerDetails", horseTrackerDetails.HorseTrackerList());
}

主视图

@using (Html.BeginForm("HorseTracker", "HorseTracker", FormMethod.Post, new { id = "CreateForm" }))
{
<div class="panel panel-default" style="font-size:12px;">
<div class="panel-body">
<div class="form-group">    
@Html.TextBoxFor(m => m.HorseName)
@Html.DropDownListFor(m => m.HorseTypeName, Model.HorseTypeList)
</div>
<input type="submit" value="Save" class="btn btn-primary pull-right" />
</div>
</div>
}
</div>
<div id="partial" class="col-md-8">
@Html.Action("HorseTrackerDetails", "HorseTracker")
</div>

部分视图

<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.HorseName)
</th>
<th>
@Html.DisplayName("Type")
</th>

</tr>
@foreach (var item in Model)
{
<tr>
<td>
@item.HorseName
</td>
<td>
@item.HorseTypeName
</td>
</tr>
</table>

脚本

$(document).ready(function () {
var url = '@Url.Action("HorseTracker", "HorseTracker")';
$('#CreateForm').submit(function () {
if (!$(this).valid()) {
return;
}
$.post(url,$(this).serialize(), function (response) {
if (response.success) {
debugger;
$('#partial').html(response);
}
else {
var message = response.message;
alert(message);
}
});
return false;
})
})

Answer 1

除非你正在更改模型属性的值是POST方法，否则没有理由返回模型(或部分视图(。您可以简单地根据表单中的值将新行附加到表中。

您的控制器方法应为

[HttpPost]
public JsonResult HorseTracker(ClsHorseTracker model)
{
try
{
if (ModelState.IsValid)
{
horseTrackerDetails.InsertUpdateHorseTracker(model);
return Json(new { success = true});
}
// see notes below
}
catch
{
return Json(new { message = "your error message" });
}
}

然后将脚本修改为

var url = '@Url.Action("HorseTracker", "HorseTracker")';
$('#CreateForm').submit(function () {
if (!$(this).valid()) {
return;
}
var name = $('#HorseName').val();
var type = $('#HorseTypeName').find('option:selected').text()
$.post(url, $(this).serialize(), function (response) {
if (response.success) {
var row = $('<tr></tr>');
row.append($('<td></td>').text(name));
row.append($('<td></td>').text(type));
$('.table').append(row);
} else if (response.message) {
alert(response.message);
}
});
return false;
})

笔记

如果ModelState无效，则应返回ModelState错误列表，以便可以更新由@Html.ValidationMessageFor(...);生成的相应元素 要这样做，您可以使用

var errors = ModelState.Keys.Where(k => ModelState[k].Errors.Count > 0).Select(k => new { propertyName = k, errorMessage = ModelState[k].Errors[0].ErrorMessage });
return Json( new { errors = errors });

然后在success回调中添加else if (response.errors) { // update the error messages }代码块

如果最好使用<thead>和<tbody>元素呈现<table>并为<tbody>提供一个id属性并将其用作选择器来添加新行

Answer 2

听起来你没有在 JSON 响应中包含response.success，因此它总是返回false并且$('#partial').html(response)永远不会执行。您应该使用PartialView来获得成功响应，如下所示：

public ActionResult HorseTracker(ClsHorseTracker model)
{
try
{
if (ModelState.IsValid)
{
horseTrackerDetails.InsertUpdateHorseTracker(model);
}
return PartialView("_pHorseTrackerDetails", model)
}
catch
{
return Json(new { success = false, message = "Your message here" });
}
}

然后更改您的 AJAX POST 以检索 HTML 响应，如下所示：

$.post(url, $(this).serialize(), function (response) {
if (response.success == false) {
var message = response.message;
alert(message);
}
else {
debugger;
$('#partial').html(response);
}
});

如果要返回具有结果状态的视图模型内容，则必须使用$.each手动附加HTML表行和单元格元素：

控制器

public ActionResult HorseTracker(ClsHorseTracker model)
{
try
{
if (ModelState.IsValid)
{
horseTrackerDetails.InsertUpdateHorseTracker(model);
}
return Json(new { success = true, data = model });
}
catch
{
return Json(new { success = false, message = "Your message here" });
}
}

jQuery

$.post(url,$(this).serialize(), function (response) {
if (response.success) {
debugger;
$.each(response.data, function(i, item) {
var row = $('<tr>');
row.append($('<td>').text(item.HorseName), $('<td>').text(item.HorseTypeName));
});
$('#table').append(row);
}
else {
var message = response.message;
alert(message);
}
});