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

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

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

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

score 1 · Accepted Answer

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

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

如果你真的想返回 partial 你可以这样做：

$(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);
    }

score 1 · Accepted Answer

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

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

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：取消回调（在“否”点击时调用的函数）

score 0 · Accepted Answer

难道不应该

autoOpen: false

代替

autoOpen: true

然后在你的点击事件中

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

c# - MVC - 在 jquery 对话框中打开 PartialView

3 回答 3

Related

Reference