1

モーダルダイアログにjQueryコンポーネントを追加しているときに、興味深い問題が発生しました。jQuery ui要素（http://recursive-design.com/projects/jquery-simple-color/にあるシンプルなカラープラグイン）が2回レンダリングされていました！調査したところ、モーダルダイアログ（部分ビュー）自体が2回レンダリングされていることがわかりました。これが私のメインビューからの関連コードです：

// Here is the jQuery:
@section Head
{
    <script type="text/javascript">
        $(document).ready(function () {
            $("#addUserDialog").dialog({ modal: true, autoOpen: false, buttons: [
            {
                text: "Submit",
                click: function() {
                    $("#addUserForm").submit();
                }
            },
            {
                text: "Cancel",
                click: function() {
                    $(this).dialog("close");
                }
            }]
        });

        $('#addUser').click(function () {
            $("#addUserDialog").dialog("open");
        });
    </script>
}

// And here is the rendering of the partial view:
<div id="addUserDialog" title="Add User" style="display:none">
    @Html.Partial("AddUserView", ViewData["user"])
</div>

部分ビューモーダルダイアログは次のとおりです。

@model UserModel
<script type="text/javascript">
    $(function () {
        alert("addUser");
        $.validator.unobtrusive.parse("#addUserForm");
        $(".colorPicker").simpleColor();
    });

    var closeAddUserDialog = function () {
        $("#addUserDialog").dialog("close");
    };
</script>

@using (@Ajax.BeginForm("addUser",
                        "OnCallControl",
                        new AjaxOptions
                        {
                            HttpMethod = "Post",
                            InsertionMode = InsertionMode.Replace,
                            UpdateTargetId = "userTable",
                            OnSuccess = "closeAddUserDialog"
                        },
                        new { id = "addUserForm" }))
{
    ... // Other form inputs
    <input class="colorPicker" value="#cc3333" />
}

アラートステートメントは、ページを最初に開いたときに2回表示されます。興味深い現象：同じ形式で、同様のアラートステートメント（例alert("editUser");）を持つ別のモーダルダイアログがあり、2つのアラートステートメントが2回順番に表示されます（addUser、editUser、addUser、editUser）。

ヘッダーとパーシャルビュー内の両方にjQueryを組み込む方法が悪いのではないかと疑っていますが、これがパーシャル内のjQuery関数を2回実行する原因であるかどうかはわかりません。なぜこれが起こっているのかについて誰かが何か考えを持っていますか？私の疑いが正しければ、どうすればこの状況を修正できますか？

追加情報：

ビューの最初のGETリクエストでモーダルが他のどこからも呼び出されないため、この問題はインデックスビューまたは部分ダイアログビューのどこかから発生していると確信しています。

ダイアログ宣言をクリックイベント関数に移動したとき（dialog("open")コマンドを置き換え、autoOpen: falseオプションを削除した場合）、最初のGETでそのダイアログに対してアラートが1回だけ発生しました。重複したjQuerycolorPickerウィジェットは、やっかいなことにまだそこにあります。

4

1 に答える 1

0

@Html.RenderPartial()私はコマンドがどのように機能するかについて根本的な誤解を持って操作していました。メインビューから部分ビューの要素にアクセスする方法がわかりませんでした。部分ビューからカラーピッカーをインスタンス化する代わりに、部分ビューがマークアップに変換された後に実行された場合、インデックスからカラーピッカーを正常に初期化できます。これにより、ダイアログに配置されるカラーピッカーは1つだけになります。

このソリューションは、JavaScriptを2回実行する部分ビューの問題を回避します。私は、MVC（このコンテキストでは）が常にパーシャルを2回実行すると想定しています。1回は最初のマークアップで、もう1回はダイアログが実際に作成されたときです。指示するまで部分ビューを実行しないようにVisualStudioに指示する方法があるのでしょうか。

于 2012-07-27T13:16:21.347 に答える