MVCCONTRIB GRID - Как добавить и удалять строки с Ajax?
-
27-09-2019 - |
Вопрос
Мне интересно, какая лучшая стратегия удаления строки в MVCContrib сгенерировала сетку.
Рассмотрим эту сетку:
Html.Grid(Model.Proc.Documents).Columns(column =>
{
column.For(c => c.Name).Named("Title");
column.For(c => c.Author.Name).Named("Author");
column.For("Action").Action(
delegate(DocumentDto doc)
{
const string cbxFrmt =
"<td><strong><a href=\"#\" onclick=\"DocDetails({0})\">View details</a></strong> | " +
"<strong><a href=\"#\" onclick=\"RemoveDoc({1})\">Delete</a></strong>" +
"</td>";
Response.Write(string.Format(cbxFrmt, doc.Id, doc.Id));
}
).DoNotEncode().Named("Action");
})
.Attributes(id => "documentgrid"));
У каждой строки есть ссылка, которая вызывает функцию JavaScript Hoteldoc (DociD), где я должен удалить строку, вызывая действие в контроллере, чтобы фактически удалить документ в модели данных, что довольно легко, но тогда я не могу понять, как Удалите строку от балонов с jQuery. Пожалуйста, порекомендуйте. Я надолго неполную трек? Какой лучший способ сделать это?
А о добавлении ряда. Первоначально я думал о том, чтобы сделать это как-то так:
function UploadDocument() {
var action = '<%=Html.BuildUrlFromExpression<MyController>(c => c.UploadDocument(parameters))%>';
$.ajax({
type: "POST",
url: action,
data: { data to upload },
cache: false,
dataType: 'text',
success: function (data, textStatus) {
var newRow = "<tr class='gridrow'><td>" + v1 +
"</td><td>" + doc_author + "</td>" +
"<td><strong><a href=\"#\" onclick=\"DocDetails(doc_id_returned_by_ajax)\">View details</a></strong> | " +
"<strong><a href=\"#\" onclick=\"RemoveDoc(doc_id_returned_by_ajax)\">Delete</a></strong>" +
"</td>" +
"</tr>";
var docgrid = $('#documentgrid');
var tbody = $("table[class='grid']>tbody");
$(tbody).append(newRow);
},
error: function (xhr, textStatus, errorThrown) {
var msg = JSON.parse(xhr.responseText);
alert('Error:' + msg.Message);
}
});
}
Но я не уверен, что это лучшая практика, чтобы сделать это. Любые другие стратегии?
Спасибо!
Решение
Может быть, что-то среди строк:
<%= Html.Grid<Document>(Model.Proc.Documents)
.Columns(column => {
column.For(c => c.Name).Named("Title");
column.For(c => c.Author.Name).Named("Author");
column.For("TableLinks").Named("");
})
%>
И в TableLinks.ascx
:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<SomeNs.Document>" %>
<td>
<% using (Html.BeginForm<HomeController>(c => c.Destroy(Model.Id))) { %>
<%= Html.HttpMethodOverride(HttpVerbs.Delete) %>
<input type="submit" value="Delete" />
<% } %>
</td>
А в контроллере:
[HttpDelete]
public ActionResult Destroy(int id)
{
Repository.Delete(id);
return RedirectToAction("Index");
}
Как вы можете видеть, я использую стандартную форму с кнопкой отправки, чтобы удалить. Если вы хотите использовать AJAX, очень легко генерировать простую ссылку и прикрепить к событию Click с jQuery, как вы сделали в своем примере:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<SomeNs.Document>" %>
<td>
<%= Html.ActionLink(
"Delete document",
"Destroy",
new { id = Model.Id },
new { @class = "destroy" }
) %>
</td>
И, наконец, постепенно усиливает ссылку:
$(function() {
$('.destroy').click(function() {
$.ajax({
url: this.href,
type: 'delete',
success: function(result) {
alert('document successfully deleted');
}
});
return false;
});
});
Вы можете увидеть эти концепции в действии в Этот образец проекта.