0

JQuery ダイアログが表示されたときに空になるという問題があります。問題が何であるかはわかっていますが、それを修正する方法がわかりません。ここで何か助けが見つかることを願っています。

問題：

ユーザーの簡単なリストを含むページがあります。リストのすべてのアイテム/ユーザーには編集リンクがあります。[編集] をクリックすると、ダイアログ ボックスがポップアップし、そのユーザーの詳細が表示されます。すごい！シンプルに聞こえます。

したがって、ユーザー リストは、ダイアログ ボックスとなる部分ビューを初期化します。

@Html.Partial("EditUser", new User())

これにより、部分ビューが事前に読み込まれ、ダイアログが通常の初期化されます。

$(function () {
    $("#edit-user-dialog").dialog({
        title: "Edit User",
        autoOpen: false,
        height: 500,
        width: 600,
        modal: true
    });
});

ここまでは順調ですね...

部分ビュー自体は、変更されたユーザー情報を送信できる Ajax フォーム送信を含む通常のページです。DIV など、そのポップアップに関連付けられているものはすべて、接続された JScript 内に含まれている必要があります。これにより、後で情報を簡単に見つけることができます。ダイアログとして表示される部分ビューのサンプル コードを次に示します。

@model MyNamespace.User
<script src="@Url.Content("~/myUserEditScriptScripts.js")" type="text/javascript"></script>

<div id="edit-user-dialog" style="display: none">

@using (Ajax.BeginForm("SaveUserJson", "User", new { id = Model.Id }, new AjaxOptions
        {
            HttpMethod = "post",
            OnSuccess = "editUserSuccess()",
        }))
    {

        <div class="display-field">
            @Html.DisplayFor(model => model.Name) 
        </div>
    .
    .
    .
    Various controls go here...
    .
    .
    .

        <p>
            <input type="submit" value="Detach" />
        </p>
    }

 </div>

今までの定番...

そのため、ユーザーの初期リストが読み込まれると、「ユーザーの編集」部分ビューがページに事前に読み込まれますが、div が display: none に設定され、ダイアログ ポップアップとして初期化されるため、表示されません。

次に、特定のユーザーの横にある「編集」リンクをクリックすると、選択したユーザーの情報がポップアップに表示されます。アヤックスが助けに！

[編集] リンクをクリックして、選択したユーザー データを含む部分ビューを読み込みます。

function editUserLoad(userId) {
    $.ajax({
        url: '/User/EditUser/',
        data: { id: userId },
        type: 'post',
        datatype:'html',
        success: function (data) {
            $("#edit-user-dialog").html(data);
            $("#edit-user-dialog").dialog('open');
        }
    });
}

よく働く！選択した userId を取得し、表示したいユーザー データが入力された部分ビューを返すアクション メソッドにジャンプします。

問題は、ダイアログが空で表示されることです! 理由はわかります。ダイアログ DIV が「表示: なし」に設定されているため、空です。しかし、なぜ ？.dialog('open'); しません。override display: none で、ダイアログが非表示になっていても、ダイアログの内容を表示することを想定していませんか?

.show を別にしようとしましたが、うまくいきませんでした。ヘルプ ？

4

1 に答える 1

1

このアプローチを試してみませんか。次のように空のdivを作成するだけです

<script type="text/javascript">
    $(function () {
        $('#dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            title: 'Edit User',
            modal: true,
            open: function(event, ui) {
                //Load the Edit User partial View
                $(this).load("@Url.Action("action","controller",new {ID = user_id})");
            },
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });

        $('#my-button').click(function () {
            $('#dialog').dialog('open');
        });
    });
</script>
<div id="dialog" title="Edit User" style="overflow: hidden;">

//return partial view
public ActionResult EditUserView(int id)
{
    UserModel um = new UserModel(id);
    return PartialView(um);
}

ここに非常に良い例があります。これを使用して

于 2012-06-11T17:42:49.310 に答える