MVCContrib Grid - كيفية إضافة وحذف الصفوف مع Ajax؟

Question

أتساءل ما هي أفضل استراتيجية لحذف صف في شبكة 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 (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);
        }
    });
}

لكنني لست متأكدًا من أن هذه هي أفضل ممارسة للقيام بذلك. أي استراتيجيات أخرى؟

شكرًا!

Answer 1

ربما شيء من بين السطور:

<%= 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 ، فمن السهل جدًا إنشاء رابط بسيط وإرفاقه بحدث النقر مع 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;
    });
});

يمكنك رؤية تلك المفاهيم في العمل في هذا المشروع العينة.