C# MVC4模式窗口和AJAX
我正在使用MVC4和实体框架开发一个web应用程序。我有一张桌子，里面有人。还有一个编辑按钮，它调用一个模式窗口，由于它，用户可以编辑一个人。我使用的是局部视图 我的问题是：在我的操作中，我返回一个视图，但我只希望当我单击Save按钮时，模式窗口消失，我的表更新。有什么想法吗 行动：C# MVC4模式窗口和AJAX,c#,jquery,ajax,asp.net-mvc,twitter-bootstrap,C#,Jquery,Ajax,Asp.net Mvc,Twitter Bootstrap,我正在使用MVC4和实体框架开发一个web应用程序。我有一张桌子，里面有人。还有一个编辑按钮，它调用一个模式窗口，由于它，用户可以编辑一个人。我使用的是局部视图 我的问题是：在我的操作中，我返回一个视图，但我只希望当我单击Save按钮时，模式窗口消失，我的表更新。有什么想法吗 行动： [HttpGet] public ActionResult EditPerson(long id) { var person = db.Persons.Single(p => p.Id_Person
[HttpGet]
public ActionResult EditPerson(long id)
{
var person = db.Persons.Single(p => p.Id_Person == id);
ViewBag.Id_ProductPackageCategory = new SelectList(db.ProductPackageCategories, "Id_ProductPackageCategory", "Name", person.Id_ProductPackageCategory);
return PartialView("_EditPerson", person);
}
[HttpPost]
public ActionResult EditPerson(Person person)
{
ViewBag.Id_ProductPackageCategory = new SelectList(db.ProductPackageCategories, "Id_ProductPackageCategory", "Name", person.Id_ProductPackageCategory);
if (ModelState.IsValid)
{
ModelStateDictionary errorDictionary = Validator.isValid(person);
if (errorDictionary.Count > 0)
{
ModelState.Merge(errorDictionary);
return View(person);
}
db.Persons.Attach(person);
db.ObjectStateManager.ChangeObjectState(person, EntityState.Modified);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(person);
}
@model BuSIMaterial.Models.Person
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Edit</h3>
</div>
<div>
@using (Ajax.BeginForm("EditPerson", "Person", FormMethod.Post,
new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
UpdateTargetId = "table"
}))
{
@Html.ValidationSummary()
@Html.AntiForgeryToken()
@Html.HiddenFor(model => model.Id_Person)
<div class="modal-body">
<div class="editor-label">
First name :
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.FirstName, new { maxlength = 50 })
@Html.ValidationMessageFor(model => model.FirstName)
</div>
<div class="editor-label">
Last name :
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.LastName, new { maxlength = 50 })
@Html.ValidationMessageFor(model => model.LastName)
</div>
<div class="editor-label">
National number :
</div>
<div class="editor-field">
@Html.EditorFor(model => model.NumNat, new { maxlength = 11 })
@Html.ValidationMessageFor(model => model.NumNat)
</div>
<div class="editor-label">
Start date :
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.StartDate, new { @class = "datepicker", @Value = Model.StartDate.ToString("yyyy/MM/dd") })
@Html.ValidationMessageFor(model => model.StartDate)
</div>
<div class="editor-label">
End date :
</div>
<div class="editor-field">
@if (Model.EndDate.HasValue)
{
@Html.TextBoxFor(model => model.EndDate, new { @class = "datepicker", @Value = Model.EndDate.Value.ToString("yyyy/MM/dd") })
@Html.ValidationMessageFor(model => model.EndDate)
}
else
{
@Html.TextBoxFor(model => model.EndDate, new { @class = "datepicker" })
@Html.ValidationMessageFor(model => model.EndDate)
}
</div>
<div class="editor-label">
Distance House - Work (km) :
</div>
<div class="editor-field">
@Html.EditorFor(model => model.HouseToWorkKilometers)
@Html.ValidationMessageFor(model => model.HouseToWorkKilometers)
</div>
<div class="editor-label">
Category :
</div>
<div class="editor-field">
@Html.DropDownList("Id_ProductPackageCategory", "Choose one ...")
@Html.ValidationMessageFor(model => model.Id_ProductPackageCategory) <a href="../ProductPackageCategory/Create">
Add a new category?</a>
</div>
<div class="editor-label">
Upgrade? :
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Upgrade)
@Html.ValidationMessageFor(model => model.Upgrade)
</div>
</div>
<div class="modal-footer">
<button class="btn btn-inverse" type="submit">Save</button>
</div>
}
</div>
您可以返回包含表的部分视图，而不是从该控制器操作返回视图。然后在AJAX调用的成功回调中，只需更新相应的容器。在POST操作中，您可以返回以下内容：
return Json(new { error = false, message = "Person edited." });
OnSuccess = "Modal.onAjaxSuccess"
function onAjaxSuccess(data, status, xhr) {
if (data.error) {
$.notify({
type: "error",
text: data.message
});
}
else {
$('.modal').modal('hide');
}
}
[HttpGet]
public ActionResult People()
{
return PartialView("_ListOfPeoplePartial");
}
$(function () {
$(document.body).on('click', '#btn-save-new-person', function (e) {
$('#create-new-person-modal').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
var url = "/Home/People";
$.get(url, function (data){
$('#list-of-people').html(data);
});
});
});
在POST操作中，您可以返回以下内容：
return Json(new { error = false, message = "Person edited." });
OnSuccess = "Modal.onAjaxSuccess"
function onAjaxSuccess(data, status, xhr) {
if (data.error) {
$.notify({
type: "error",
text: data.message
});
}
else {
$('.modal').modal('hide');
}
}
[HttpGet]
public ActionResult People()
{
return PartialView("_ListOfPeoplePartial");
}
$(function () {
$(document.body).on('click', '#btn-save-new-person', function (e) {
$('#create-new-person-modal').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
var url = "/Home/People";
$.get(url, function (data){
$('#list-of-people').html(data);
});
});
});
需要做一些修改，但在这个案例中，我会这样做 1将EditPerson post方法从actionresult更改为JsonResult
[HttpPost]
public JsonResult EditPerson(Person person)
{
// code here to save person
bool success = true; // somehow determine if the save was successful
string msg = ""; // error message is needed?
return JsonResult(new {success,msg, person});
}
function closeModal(response){
// the response is the Json Result sent back from the action
if (response.success === true){
// actually got a true response back
}
$('#edit-person').modal('show'); // or similar code
}
@using (Ajax.BeginForm("EditPerson", "Person", FormMethod.Post,
new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
UpdateTargetId = "table",
OnSuccess = "closeModal(response);" // or javascript code to close the modal, you can also
}))
{ ...
祝你好运需要做一些改变，但以下是我在这个案例中要做的 1将EditPerson post方法从actionresult更改为JsonResult
[HttpPost]
public JsonResult EditPerson(Person person)
{
// code here to save person
bool success = true; // somehow determine if the save was successful
string msg = ""; // error message is needed?
return JsonResult(new {success,msg, person});
}
function closeModal(response){
// the response is the Json Result sent back from the action
if (response.success === true){
// actually got a true response back
}
$('#edit-person').modal('show'); // or similar code
}
@using (Ajax.BeginForm("EditPerson", "Person", FormMethod.Post,
new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
UpdateTargetId = "table",
OnSuccess = "closeModal(response);" // or javascript code to close the modal, you can also
}))
{ ...
祝你好运我想我明白你想解释什么了。但是，在AJAX的成功回调中，您指的是什么呢？在您的模式中，您显示的是一个用UpdateTargetId=table定义的AJAX表单。我猜这个表对应于容器的id=表。这就是AJAX调用结果将更新的内容。但通常情况下，这应该是一个表的div容器，以避免在DOM中两次获取表。事实上，我目前正在返回包含表的视图，但它不是局部视图。我应该将我的简单索引视图转换为部分视图吗？不，应该将表转换为部分视图。然后让你的索引视图呈现这个局部视图。就后期行动而言，它应该返回同样的部分观点。我想我明白你想解释什么了。但是，在成功回调th AJAX中，您指的是什么呢？在您的模式中，您显示的是一个AJAX
使用UpdateTargetId=table定义的表单。我猜这个表对应于容器的id=表。这就是AJAX调用结果将更新的内容。但通常情况下，这应该是一个表的div容器，以避免在DOM中两次获取表。事实上，我目前正在返回包含表的视图，但它不是局部视图。我应该将我的简单索引视图转换为部分视图吗？不，应该将表转换为部分视图。然后让你的索引视图呈现这个局部视图。就后期操作而言，它应该返回相同的局部视图。谢谢，我也会尝试。谢谢，我也会尝试。谢谢你的帮助，我会尝试并让你知道。谢谢你的帮助，我会尝试并让你知道。