ajax - データカミソリでページの一部をリロードするMVC3

Question

ベースからのデータと、PartialViews を返す削除、作成、更新する 3 つのボタンを含むテーブルがあります。

対応するダイアログ (削除、更新、...) で送信ボタンをクリックした後、ページの一部をデータで更新したい。

これを達成する最も簡単な方法は何ですか?

これは私が今持っているものです。追加するだけです。削除はほとんど同じです。

<div id="delete-dialog" title="Delete Product"></div>   
<script type="text/javascript" >
$(".deleteLink").button();

    var deleteLinkObj;
    // delete Link
    $('.deleteLink').click(function () {
        deleteLinkObj = $(this);
        var name = $(this).parent().parent().find('td :first').html();
        $('#delete-dialog').html('<p>Do you want delete ' + name + ' ?</p>');
        //for future use
        $('#delete-dialog').dialog('open');
        return false; // prevents the default behaviour
    });

    $('#delete-dialog').dialog({
        dialogClass: "ConfirmBox",
        autoOpen: false, width: 400, resizable: false, modal: true, //Dialog options
        buttons: {
            "Continue": function () {
                $.post(deleteLinkObj[0].href, function (data) { //Post to action
                    if (data == '<%= Boolean.TrueString %>') {
                        deleteLinkObj.closest("tr").hide('fast'); //Hide Row
                    }
                    else {
                    }
                });
                $(this).dialog("close");
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });
</script>

ダイアログを閉じた後、ページの一部をリロードするようなものが必要です。

データは次のようになります

<table>
    <tr>
        <th>        Name       </th>
        <th>        Date </th>
        <th>             </th>
    </tr>


@foreach (var m in this.Model)
{
    <tr>
    <td>
     <div class="ProductName">@Html.DisplayFor(Model => m.Name)</div>
    </td>
    <td>
     @Convert.ToDateTime(m.AddDate).ToShortDateString()
    </td>
    <td>

     <div class="ProductPrice">@string.Format("{0:C}", m.Price)</div>
    </td>

    <td>
      <div class="CategoryName">@Html.DisplayFor(Model => m.CategoryName)</div>

    </td>
    <td>
    @Html.ActionLink("Edit", "Edit", new { id = m.ID }, new { @class = "editLink" }) 
    @Html.ActionLink("Delete", "Delete", new { id = m.ID }, new { @class = "deleteLink" }) 
    </td>
    </tr>
}
</table>

ボタンをクリックした後にこのアクションを実行しようとしましたが、正しいかどうかはわかりません。インデックスを部分ビューに変更しました

 buttons: {
            "Continue": function () {
                $.post(deleteLinkObj[0].href, function (data) { //Post to action
                    if (data == '<%= Boolean.TrueString %>') {
                        deleteLinkObj.closest("tr").hide('fast'); //Hide Row
                    }
                    else {
                    }
                });
                $.ajax.ActionLink("Index", 
                "Index",   // <-- ActionMethod
                "Shop",  // <-- Controller Name.
                new { }, // <-- Route arguments.
                null  // <-- htmlArguments .. which are none. Y
                )
                $(this).dialog("close");
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }