模态发布错误模型中的 MVC 部分
MVC partial in modal posting wrong model
我的部分视图加载到我的索引页面上的 bootstrap 部分中,应该是 posting 类型 Announcement
但 posting 类型 AnnouncementViewModel
的索引页面模型到 Create
控制器。
我的 _Layout 中指定了 #modal-container
,它按预期工作。
不确定控制器 - 它们看起来是正确的,问题源于我的 ajax post 我相信,但我不知道是什么问题。我在 POST 后收到错误,但是数据库确实使用模型正确更新,但之后我收到以下错误。
我已指定 $('#create-container')
/$('form')
作为序列化并发送回控制器的形式。
为什么要这样做?
错误:
The model item passed into the dictionary is of type 'AnnouncementsViewModel', but this dictionary requires a model item of type 'Announcement'.
索引:
@model AnnouncementsViewModel
<h2>Announcements</h2>
<div>
@Html.ActionLink("Create", "Create", "Announcements", null, new { @class = "modal-link btn btn-sm" })
<div class="announcementTable">
<div id="announcementList">
@{Html.RenderPartial("List", Model.AnnouncementList);}
</div>
</div>
</div>
部分:
@model Announcement
@section Scripts {
<script type="text/javascript">
$(function () {
$('#btn-create').click(function () {
$.ajax({
url: '@Url.Action("Create","Announcements")',
type: 'POST',
contentType: 'application/json',
data: $('#create-container').serialize(),
success: function (data) {
if (data.success == true) {
$('#modal-container').modal('hide');
location.reload(false)
} else {
$('#modal-container').html(data);
}
}
})
});
$('#btn-close').click(function () {
$('#modal-container').modal('hide');
});
});
</script>
}
<div class="create-container">
@using (Html.BeginForm())
{
<div class="newAnnouncementTableRow1">
<div>@Html.LabelFor(m => m.Title)</div>
<div>@Html.EditorFor(m => m.Title)</div>
<div>@Html.LabelFor(m => m.Details)</div>
<div>@Html.EditorFor(m => m.Details)</div>
</div>
<div class="newAnnouncementTableRow2">
<div>@Html.LabelFor(m => m.StartDT)</div>
<div>@Html.EditorFor(m => m.StartDT)</div>
<div>@Html.LabelFor(m => m.ExpiryDT)</div>
<div>@Html.EditorFor(m => m.ExpiryDT)</div>
<div>@Html.LabelFor(m => m.Enabled)</div>
<div>
@Html.RadioButtonFor(m => m.Enabled, 1)Yes
@Html.RadioButtonFor(m => m.Enabled, 0, new { @checked = "checked" })No
</div>
</div>
<div>
<button type="submit" id="btn-create" class="btn btn-sm">Save</button>
<button type="button" class="btn btn-default modal-close-btn" data-dissmiss="modal">Cancel</button>
</div>
}
</div>
控制器:
[HttpGet]
public ActionResult Index()
{
var avm = new AnnouncementsViewModel
{
AnnouncementList = new List<Announcement>()
};
avm.AnnouncementList = GetAnnouncementList();
return View(avm);
}
[HttpGet]
public ActionResult Create()
{
return PartialView("Create");
}
[HttpPost]
public ActionResult Create(Announcement a)
{
db.DbAnnouncement.Add(a);
db.SaveChanges();
return Index();
}
您将 contentType: 'application/json'
设置为您的 .ajax()
调用,但 return 从控制器查看。将 contentType
更改为 html
或将控制器更改为 return JsonResult
和 return Json("yourData");
我建议您更改 ajax 电话:
$.ajax({
/* other data */
dataType : "html",
contentType: "application/json; charset=utf-8",
/* other data */
success: function (data) {
$('#modal-container').modal('hide');
location.reload(false)
},
error: function (jqXHR, textStatus, errorThrown )
{
$('#modal-container').html(data);
}
/* other data */
});
在你的情况下,服务器的响应总是成功,但它 returns html 而不是 json 所以你根本就没有 data.success
。
评论中提到的另一个问题是控制器正在重定向到它无法重定向的操作方法。
将 return Index();
更改为 return RedirectToAction("Index", "Announcements");
解决了使用 return View();
.
导致的错误和重定向到创建部分页面
我的部分视图加载到我的索引页面上的 bootstrap 部分中,应该是 posting 类型 Announcement
但 posting 类型 AnnouncementViewModel
的索引页面模型到 Create
控制器。
我的 _Layout 中指定了 #modal-container
,它按预期工作。
不确定控制器 - 它们看起来是正确的,问题源于我的 ajax post 我相信,但我不知道是什么问题。我在 POST 后收到错误,但是数据库确实使用模型正确更新,但之后我收到以下错误。
我已指定 $('#create-container')
/$('form')
作为序列化并发送回控制器的形式。
为什么要这样做?
错误:
The model item passed into the dictionary is of type 'AnnouncementsViewModel', but this dictionary requires a model item of type 'Announcement'.
索引:
@model AnnouncementsViewModel
<h2>Announcements</h2>
<div>
@Html.ActionLink("Create", "Create", "Announcements", null, new { @class = "modal-link btn btn-sm" })
<div class="announcementTable">
<div id="announcementList">
@{Html.RenderPartial("List", Model.AnnouncementList);}
</div>
</div>
</div>
部分:
@model Announcement
@section Scripts {
<script type="text/javascript">
$(function () {
$('#btn-create').click(function () {
$.ajax({
url: '@Url.Action("Create","Announcements")',
type: 'POST',
contentType: 'application/json',
data: $('#create-container').serialize(),
success: function (data) {
if (data.success == true) {
$('#modal-container').modal('hide');
location.reload(false)
} else {
$('#modal-container').html(data);
}
}
})
});
$('#btn-close').click(function () {
$('#modal-container').modal('hide');
});
});
</script>
}
<div class="create-container">
@using (Html.BeginForm())
{
<div class="newAnnouncementTableRow1">
<div>@Html.LabelFor(m => m.Title)</div>
<div>@Html.EditorFor(m => m.Title)</div>
<div>@Html.LabelFor(m => m.Details)</div>
<div>@Html.EditorFor(m => m.Details)</div>
</div>
<div class="newAnnouncementTableRow2">
<div>@Html.LabelFor(m => m.StartDT)</div>
<div>@Html.EditorFor(m => m.StartDT)</div>
<div>@Html.LabelFor(m => m.ExpiryDT)</div>
<div>@Html.EditorFor(m => m.ExpiryDT)</div>
<div>@Html.LabelFor(m => m.Enabled)</div>
<div>
@Html.RadioButtonFor(m => m.Enabled, 1)Yes
@Html.RadioButtonFor(m => m.Enabled, 0, new { @checked = "checked" })No
</div>
</div>
<div>
<button type="submit" id="btn-create" class="btn btn-sm">Save</button>
<button type="button" class="btn btn-default modal-close-btn" data-dissmiss="modal">Cancel</button>
</div>
}
</div>
控制器:
[HttpGet]
public ActionResult Index()
{
var avm = new AnnouncementsViewModel
{
AnnouncementList = new List<Announcement>()
};
avm.AnnouncementList = GetAnnouncementList();
return View(avm);
}
[HttpGet]
public ActionResult Create()
{
return PartialView("Create");
}
[HttpPost]
public ActionResult Create(Announcement a)
{
db.DbAnnouncement.Add(a);
db.SaveChanges();
return Index();
}
您将 contentType: 'application/json'
设置为您的 .ajax()
调用,但 return 从控制器查看。将 contentType
更改为 html
或将控制器更改为 return JsonResult
和 return Json("yourData");
我建议您更改 ajax 电话:
$.ajax({
/* other data */
dataType : "html",
contentType: "application/json; charset=utf-8",
/* other data */
success: function (data) {
$('#modal-container').modal('hide');
location.reload(false)
},
error: function (jqXHR, textStatus, errorThrown )
{
$('#modal-container').html(data);
}
/* other data */
});
在你的情况下,服务器的响应总是成功,但它 returns html 而不是 json 所以你根本就没有 data.success
。
评论中提到的另一个问题是控制器正在重定向到它无法重定向的操作方法。
将 return Index();
更改为 return RedirectToAction("Index", "Announcements");
解决了使用 return View();
.