c# - MVC - jquery ダイアログで PartialView を開く

Question

何日も頭がおかしくなっている問題があります。そのため、アイテムを含むhtmlテーブルがあります。ポイントは基本的に、ボタンをクリックして、選択した項目を削除するかどうかを尋ねるメッセージが表示された jquery ダイアログを開くことです。削除部分がそのまま次の原因になる可能性があります。確認メッセージのダイアログを表示することさえできません。テーブルの削除アイコンの 1 つをクリックして、選択したアイテムを削除しますが、ダイアログ付きのパーシャルビューの読み込みが完了すると、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>

最初の列で気づいたように、コントローラーを呼び出す方法は 2 つあります。入力画像を含むものは、クリックしても送信されず、アンカーリンクはコントローラーと、ダイアログがある部分ビューを呼び出すことができます。しかし、すべてが完了すると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

確認のためだけにサーバーを往復するのは得策ではありません。以下のカスタム確認ダイアログを使用して、クライアント側で確認を行うことができます。これにより、スクリプトの実行もブロックされません。

カスタム確認ボックスを作成しました。これを試してみてください:

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

本当にパーシャルを返したい場合は、次のように sth を実行できます。

$(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 0 · Accepted Answer

そうじゃないかな

autoOpen: false

それ以外の

autoOpen: true

次に、クリックイベントで次のようにします

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

c# - MVC - jquery ダイアログで PartialView を開く

3 に答える 3

Related

Reference