MVCContrib Grid - как добавлять и удалять строки с помощью ajax? - PullRequest
Новая
       7

MVCContrib Grid - как добавлять и удалять строки с помощью ajax?

4 голосов
/ 05 октября 2010

Мне интересно, какова лучшая стратегия удаления строки в сгенерированной сетке 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 RemoveDoc (docid), где я должен удалить строку, вызвав действие в контроллере для фактического удаления документа в модели данных, что довольно просто, но тогда я не могу понять Как удалить строку из Tbody с помощью 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);
        }
    });
}

Но я не уверен, что это лучшая практика для этого. Любые другие стратегии?

Спасибо!

1 Ответ

3 голосов
/ 05 октября 2010

Может быть что-то между строк: 

<%= 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;
    });
});

Вы можете увидеть эти концепции в действии в этом примере проекта .

...