Во-первых, использование EditorFor() не имеет смысла, и его использование должно быть просто
@Html.EditorFor(x => x.Name, "new { htmlAttributes = new { @class = "form-control col-md-6" } })
Далее, сценарий для сохранения данных должен быть
function btndbsave(obj) {
var ele = $(obj);
var id = ele.attr("data-model-id");
var name = $("#Name]").val();
var phone = $("#Phone").val();
var email = $("#Email").val();
var AjaxVM = { Id: id, Name: name, Phone: phone, Email: email };
$.ajax({
url: '@Url.Action("Edit", "Home")', // don't hard code your url's
dataType: "json",
data: AjaxVM,
type: "POST",
success: function (response) {
.... // see notes below
},
error: function (xhr) {
alert("error");
}
});
};
Примечание однакочто ваш модал должен включать в себя код <form> и @Html.ValidationMessageFor(), чтобы дать вам проверку на стороне клиента, а также кнопку отправки, чтобы ваш скрипт стал
$('form').submit(function(e) { // or give the form an id attribute and use that
e.preventDefault();
... // make ajax call
});
Далее, ваш метод контроллера должен только возвращать значениеуказывающий успех или иное (вместе с любым сообщением об ошибке, если применимо), например
return Json(new { success = true }); // if saved
return Json(new { success = false, message = "...." }); if not saved
Обратите внимание, что добавление ModelStateError не имеет смысла, поскольку вы не возвращаете представление
, а затемпри обратном вызове ajax вы обновляете элементы <td> успешно (или отображаете ошибку, если нет).Для этого включите глобальную переменную javascript для хранения текущей строки
и измените ссылку, открывающую модальное значение, на
<a class="edit-record" data-model-id="@item.Id" href="#" ><img src="/UserImages/pencil.png" /></a>
, а скрипт - на
var currentrow;
$('.edit-record').click(function() {
currentrow = $(this).closest('tr'); // assign the current row
... // load and display the modal
});
$.ajax({
....
success: function (response) {
if (response.success) {
// Update the current row
var cells = currentrow.find('td');
cells.eq(1).text(name);
cells.eq(2).text(phone);
cells.eq(3).text(email);
} else {
... // oops - display the message in response.message?
}
}
....
}
Обратите внимание, что нет необходимости совершать ajax-вызов для загрузки модального режима, поскольку у вас уже есть все данные в представлении.Вместо этого включите html для редактирования AjaxVM в начальном представлении, например, используя
@Html.Partial(""_Edit", new AjaxVM())
, затем обновите значения входных данных при отображении модального
$('.edit-record').click(function() {
currentrow = $(this).closest('tr');
var cells = currentrow.find('td');
$('#Name').val(cells.eq(1).text());
$('#Phone').val(cells.eq(2).text());
$('#Email').val(cells.eq(3).text());
$('#newmodal').modal('show');
});