ASP.NET MVC ... navigation and show error
In an ASP.NET MVC 3 (Razor) application, the main screen is divided in 2 parts (2 div named : leftColumn and rightcolum, the leftcolumn is the menu, the rifhtcolumn is the content)
I. I click on an item in the menu, the "Add" screen appear in the rightcolumn
HTML
var jqxhr = $.post("/Customer/Add", function (data) {
$('#rightcolumn').html(data);
})
.success(function() {})
.error(function() { })
.complete(function () { });
Controller
public PartialViewResult Add()
{
return PartialView("Add");
}
II. I fill the form and I post, if the insert is success I display the customer list, if there is an error I'd like keep the form with the value already filled in (and this last point make problem for me) and show the error message in a jquery UI model form. HTML
@using (Html.BeginForm("Save", "Customer", FormMethod.Post))
{
<table style="width:100%;">
<tr>...</tr>
<tr>
<td colspan="2"><input type="submit" value="Save"/></td>
</tr>
</table>
}
Controller
public ActionResult Save(CustomerModel model)
{
SaveOrUpdate(model);
if(model.hasError())
return ReturnToAction("Add", model);
model.List = GetList();
return View("List", model);
}
I have two problem :
- When there is an error, the "Add" view is displayed but not in the right column but i开发者_JAVA技巧n full window without layout
- The model (the client data) are not in the model.
How can I do this ?
Thanks,
You could use an AJAXify this form so that it updates only the rightColumn
div when it is submitted. The jquery form plugin is very good for this purpose:
$.post('@Url.Action("Add", "Customer")', function (data) {
$('#rightcolumn').html(data);
ajaxifyForm();
});
where the ajaxifyForm
function might look like this:
function ajaxifyForm() {
$('#rightcolumn form').ajaxForm(function(data) {
$('#rightcolumn').html(data);
ajaxifyForm();
});
}
精彩评论