Question

我有一个表格，其中包含来自base和3个按钮的数据，用于删除，创建和更新返回PartialViews的数据。

我想在点击相应对话框中的提交按钮（删除，更新，...）后用数据更新页面的一部分。

实现这一目标的最简单方法是什么？

这就是我现在所拥有的我只想添加，删除大致相同。

<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");
            }
        }

Answer 1

我建议您在.cshtml文件中使用ASP.NET MVC ActionLink助手，而不是jQuery：

[...]
<script type="text/JavaScript">
function openPopup()
{
    // Set your options as needed.
    $("#yourPopupDialogId").dialog("open");
}
</script>
[...]
@Ajax.ActionLink( 
    "Delete", 
    "Delete", 
    "Controller", 
    new { someValue = 123 },
    new AjaxOptions
    {
        // Set your options as needed
        HttpMethod = "GET",
        UpdateTargetId = "yourPopupDialogId",
        OnSuccess = "openPopup()"
    }
)
[...]
<div id="yourPopupDialogId" style="display: none;"></div>

现在，在Controller中，您要为弹出窗口使用的方法应该返回PartialView s：

public ActionResult Delete(int id)
{
    RecordDeleteModel model = YourRepository.GetModel( id );
    return PartialView( model );
}

MVC3用数据剃刀重新加载页面的一部分

1 个答案: