MVC - 在jquery对话框中打开PartialView

Question

我有一个问题，这让我疯狂了几天。 所以我有一个包含项目的html表。 关键是基本上单击一个按钮并打开带有消息的jquery对话框，询问我是否要删除所选项目。 现在删除部分可以接下来因为它是我甚至无法显示带有确认消息的对话框。 我所做的是单击我桌子上的一个删除图标来删除我选择的项目，但随着对话框的部分视图完成加载，jquery会抛出一个未定义的函数错误。 以下模式已经在另一个类似的功能上实现（带有可点击图标的表，显示对话框），但我不知道这里有什么问题。

这是“主”视图中表格的代码。

<table width="100%" cellspacing="0" border="0" align="center" cellpadding="3"  
 style='table-layout: fixed'>
    <tr class="tr-header">
        <th width="20px">
            &nbsp;
        </th>
        <th width="200px">
            File Name
        </th>
        <th width="120px">
            Type
        </th>
        <th width="130px">
            Date
        </th>
        <th width="480px">
            Comments
        </th>
    </tr>
    @foreach (var item in Model.Uploads)
    {
        <tr>
        <td align="center">
            @using (Ajax.BeginForm("DeleteUpload", "Candidate", 
                                   new { id = item.UploadID }, 
                                   new AjaxOptions { UpdateTargetId = 
                                                    "DeleteUploadForm", 
                                                     HttpMethod = "Get" }))
            {
                @*<a href='@Url.Action("DeleteUpload", new { id = item.UploadID })'>
                <img src="@Url.Content("~/icons/delete.png")" alt="Click to delete upload" border="0" /></a>*@
                <input type="image" name="DeleteUpload" id="DeleteUpload" src="@Url.Icon("delete.png")"/>
            }
            </td>
            <td align="center">
                @(item.FileName);
            </td>
            <td align="center" nowrap="nowrap">
                 @item.UploadType
            </td>
            <td align="center" nowrap="nowrap">
                 @item.UploadDate
            </td>
            <td align="justify" style="overflow:auto">
                        @Html.Raw(Html.Encode(item.Comments).Replace("\n", "<br />"))
                    </td>
                </tr>
            }
        </table>

<div id="DeleteUploadForm">
</div>

正如您在第一列中注意到的那样，我有两种方式调用控制器注释，当我单击它时，带有输入图像的方法不会提交，并且锚链接可以调用控制器和我有对话框的部分视图，但是当jQuery库全部完成时，它会“崩溃”。

这是控制器。

public ActionResult DeleteUpload(int id)
{
    Upload UploadToDelete = CandidateProxy.GetUploadByID(this.CurrentUser.DbInfo, id);

    return PartialView(UploadToDelete);
 }

那里没什么太壮观的。 然后它调用以下部分视图。

@model Project.Entities.Uploads

<script src="@Url.Script("jquery.validate.min.js")" type="text/javascript"></script>           
<script src="@Url.Script("jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Script("jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script src="@Url.Script("ui/jquery.ui.core.js")" type="text/javascript"></script>
<script src="@Url.Script("ui/jquery.ui.widget.js")" type="text/javascript"></script>

<script src="@Url.Script("ui/jquery-ui-1.8.23.custom.js")" type="text/javascript"></script>
<script src="@Url.Script("ui/jquery.ui.mouse.js")" type="text/javascript"></script>
<script src="@Url.Script("ui/jquery.ui.button.js")" type="text/javascript"></script>
<script src="@Url.Script("ui/jquery.ui.draggable.js")" type="text/javascript"></script>
<script src="@Url.Script("ui/jquery.ui.position.js")" type="text/javascript"></script>
<script src="@Url.Script("ui/jquery.ui.resizable.js")" type="text/javascript"></script>
<script src="@Url.Script("ui/jquery.ui.dialog.js")" type="text/javascript"></script>
<script src="@Url.Script("ui/jquery.effects.core.js")" type="text/javascript"></script>
<script src="@Url.Script("dialog/DeleteUploadDialog.js")" type="text/javascript"></script>

<div="DeleteUploadDialog">
@using (Html.BeginForm("DeleteUpload", "Home", FormMethod.Post))
{
    <fieldset>
    <div>
    <br />
    Do you want to delete the following file? @Model.UploadName
    </div>
    <input type="submit" name="submit" value="Delete" class="toolbar-button" />
    <input type="button" name="submit" value="Cancel" class="toolbar-button" />
    </fieldset>
}

</div>

这是包含我的对话框设计的部分视图。 它最终会向Controller发送一个删除上传的请求，这很容易因为我对服务器端编码比较熟悉，但这整个前端对我来说都是新的。 最后这里是DeleteUploadDialog.js文件，我在其中编写了对话框的属性。

$(function () {
    $("#DeleteUploadDialog").dialog({
        autoOpen: true,
        modal: true,
        width: 950,
        height: 350,
        close: function (event, ui) {
            $("#DeleteUploadDialog").remove();
        }
    });
});

这就是我的代码。 你想知道的任何其他事情让我知道。 提前致谢！

Answer 1

我认为你在这里要做的是开销。 你正在打开一个对话框并在关闭时将其删除..这样做不会更简单：

 $(buttonDelete).click(function () {
        var confirmDelete = confirm("Are you sure you want to delete this item?");
        if (confirmDelete === true) {
           $.ajax({
                url: '/Home/DeleteAttachment',
                dataType: "json",
                type: "POST",
                data: { "id": id },
                success: function () {
                    $(rowToDelete).remove();
                }
            });
        }
    });

和

     [HttpPost]
    public JsonResult DeleteAttachment(int id)
    {
        DeleteAttachment(id);
        return Json("ok");
    }

如果你真的想要返回局部，你可以这样做：

$(buttonDelete).click(function () {
        var confirmDelete = confirm("Are you sure you want to delete this item?");
        if (confirmDelete === true) {
           $.ajax({
                url: '/Home/DeleteAttachment',
                dataType: "html",
                type: "POST",
                data: { "id": id },
                success: function (response) {
                    $(divId).replace(response);
                }
            });
        }
    });

和

    [HttpPost]
    public PartialViewResult DeleteAttachment(int id)
    {
        Upload UploadToDelete = CandidateProxy.GetUploadByID(this.CurrentUser.DbInfo, id);
        return PartialView(UploadToDelete);
    }

Answer 2

使服务器往返只是为了确认不是一个好主意。 您可以使用下面的自定义确认对话框在客户端进行确认。 这也不会阻止您的脚本执行。

我已经创建了自定义确认框，您可以试试这个：

function ConfirmationBox(pTitle, pText, pButtonType, pParam, pCallBack, pCancelCallback) {
    if (pButtonType == null) pButtonType = "okcancel";

    $('<div></div>').appendTo('body').html(pText)
    .dialog({
        resizable: false,
        modal: true,
        title: pTitle,
        buttons: GetButtons(pButtonType),
        autoOpen: true,
        width: 'auto'
        , Close: function (event, ui) {
            $(this).remove();
        }
    });

    $("input[type=submit], input[type=button]").button();
    $("#confirmDialog button").button();
    return this;
    function GetButtons(pButtonType) {
        var cBtn;
        switch (pButtonType) {
            case "yesno":
                cBtn = {
                    "Yes": function () {
                        if (pCallBack && pCallBack.length > 0) {
                            window[pCallBack](pParam);
                        }
                        $(this).dialog("close");
                        return true;
                    },
                    "No": function () {
                        if (pCancelCallback && pCancelCallback.length > 0) {
                            window[pCancelCallback](pParam);
                        }
                        $(this).dialog("close");
                        return false;
                    }
                }
                break;
            case "okcancel":
                cBtn = {
                    "Ok": function () {
                        if (pCallBack && pCallBack.length > 0) {
                            window[pCallBack](pParam);
                            $(this).dialog("close");
                        }
                        return true;
                    },
                    Cancel: function () {
                        if (pCancelCallback && pCancelCallback.length > 0) {
                            window[pCancelCallback](pParam);
                            $(this).dialog("close");
                        }
                        return false;
                    }
                }
                break;
        }
        return cBtn;
    }
}

参数详情：

pTitle：对话框的标题

pText：对话框文本

pButtonType：这里我们有2个选项yesno | 艾伯塔省

pParam：回调函数的参数

pCallBack：成功回调（调用“是”点击的功能）

pCancelCallback：取消回叫（调用“No”点击的功能）

Answer 3

不应该

autoOpen: false

代替

autoOpen: true

然后在你的点击事件中

$("#DeleteUpload").click(function()
{
    $("#DeleteUploadDialog").dialog("open");
});