1

I have a table with my data from base and 3 buttons to delete, create and update which return PartialViews.

I want to update the part of my page with data after clicking the submit button in the corresponding dialog (delete, update, ...).

What is the easiest way to achive this?

This is what I've got now I will just add, delete is mostly the same.

<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>

And after dialog close I want something like a reload of a part of the page.

The data looks like 

<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>

I'm not sure if im doing this well I tried to put this action after click the button but nut sure if is right I changed the Index to a Partial View

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

1 回答 1

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>

现在在您的控制器中，对于您想要用于弹出窗口的方法，您应该返回PartialViews：

public ActionResult Delete(int id)
{
    RecordDeleteModel model = YourRepository.GetModel( id );
    return PartialView( model );
}
于 2013-05-21T11:20:19.540 回答