0

MattHidinger.comの例を拡張して、MVCサイトにポップアップダイアログを追加しようとしています。

彼のサイトのコードを使用しています...

<script type="text/javascript">

$.ajaxSetup({ cache: false });

$(document).ready(function () {
    $(".openDialog").live("click", function (e) {
        e.preventDefault();

        $("<div></div>")
            .addClass("dialog")
            .attr("id", $(this).attr("data-dialog-id"))
            .appendTo("body")
            .dialog({
                title: $(this).attr("data-dialog-title"),
                close: function () { $(this).remove() },
                modal: true,
                width: 700,
                height: 350
            })
                .load(this.href);
        });

        $(".close").live("click", function (e) {
            e.preventDefault();
            $(this).closest(".dialog").dialog("close");
        });
    });
</script>

およびHtml.ActionLink

@Html.ActionLink("Delete via actionlink", "Delete", "CostModel"
, new { id = item.HighlightReportID }
, new { @class = "openDialog", data_dialog_id = "dialog", data_dialog_title =
 string.Format("Delete {0}", item.DisplayIdentifier) })

クリックするとUIダイアログを開くアンカータグをレンダリングできます。

<a class="openDialog" data-dialog-id="dialog" data-dialog-title="Delete report for Nov 12" href="/CostModel/Delete/162">Delete via actionlink</a>

だが！

同じ識別構造を使用してページにアンカータグを手動で追加すると、失敗します。

<a class="openDialog" data_dialog_id="dialog" data_dialog_title="Delete report for Nov 12" href="/CostModel/Delete/162">Delete via manual anchor tag</a>

手動で作成されたタグと比較して、MVCで生成されたアンカータグが機能する理由はありますか？

警告。明らかに、MVCのページに手動でタグを追加することはありません。アンカータグ内に画像を生成するImageLinkヘルパーを使用することから始めましたが、失敗しました。最初のプリンシパルに戻って、手動のアプローチを試しましたが、失敗すると非常に混乱しました。

編集1

これがページのコードです。data_dialog_idを同じで異なるものに設定して、同時に両方を個別に追加しようとしたことに注意してください。違いはなく、ActionLinkのみがJQueryによって取得されます。

@Html.ActionLink("Delete via actionlink", "Delete", "CostModel"
                    , new { id = item.HighlightReportID }
                    , new { @class = "openDialog", data_dialog_id = "dialog1", data_dialog_title = string.Format("Delete {0}", item.DisplayIdentifier) })
<a class="openDialog"
                data_dialog_id="dialog2"
                data_dialog_title="@string.Format("Delete {0}", item.DisplayIdentifier)"
                href="/CostModel/Delete/@item.HighlightReportID">Delete via manual anchor tag</a>

これらはレンダリングされた2つのタグです

<a class="openDialog" data-dialog-id="dialog1" data-dialog-title="Delete report for Dec 12" href="/CostModel/Delete/212">Delete via actionlink</a>
<a class="openDialog" data_dialog_id="dialog2" data_dialog_title="Delete report for Dec 12" href="/CostModel/Delete/212">Delete via manual anchor tag</a>

私の目で見る限り、それらは同一ですが、最初のもの（dialog1）のみがjqueryによって取得されます。

4

1 に答える 1

2

マークアップのハードコーディングが失敗する理由はまったくありません。Html.ActionLinkヘルパーが行うことは、クライアント側のスクリプトに表示される唯一のものであるHTMLアンカーを生成することだけです。あなたの問題はどこかにあると思います。たとえば、ヘルパーによって生成されたものとは異なるマークアップを設定した可能性があります。頭に浮かぶことの1つは、href存在しないアクションにハードコーディングした属性です。アプリケーションをIISの仮想ディレクトリに展開する場合、（ヘルパーを使用する代わりに）URLをハードコーディング/CostModel/Delete/162すると、正しいURLが作成されたために失敗する可能性があることを忘れないでください/myappname/CostModel/Delete/162。これが、ASP.NETMVCアプリケーションでURLをハードコーディングしてはならない理由の1つです。

コードを検査して潜在的な問題を確認するために、FireBugやChromeDeveloperツールバーなどのJavaScriptデバッグツールを使用できます。また、コンソールでエラーの可能性を確認してください。

于 2013-03-17T12:13:43.947 に答える