web-dev-qa-db-ja.com

jquery.dialogで部分ビューをロードする

私はmvcを初めて使用し、mvc 3を学習するためのダミーアプリケーションを作成しようとしています。ミュージックストアの例を通して作業を進め、実際のアプリケーションに少し拡張しようとしています。新しいアイテムにしたい場合は常に作成ビューにリダイレクトされますが、フルページのポストバックを行うのではなく、jquery.dialogを使用してモーダルポップアップを開き、ユーザーができるようにします新しいアイテムを挿入します。

これまでのところ

  <script type="text/javascript">

    $(function () {

        $('#dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            title: "hi there",
            modal: true,
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });
        $('#my-button').click(function () {
        $('#dialog').dialog('open');
        });}); </script>

     <div id="dialog" title="Create Album" style="overflow: hidden;">
    @Html.Partial("_CreateAlbumPartial")</div>

これに関する問題は、部分ビューがajaxを介してではなく毎回ロードされることであり、部分ビューをどこに配置すべきかは本当にわかりません。共有場所にあるのか、他のビューのあるフォルダーにあるのか。パーシャルビューに対応するためにコントローラークラスを更新するにはどうすればよいですか？

これらが簡単な場合は申し訳ありませんが、mvcに3日IM :)

asp.net-mvc-3razor
44
Diver Dan

次のようなものを試してください：

<script type="text/javascript">
    $(function () {
        $('#dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            title: 'hi there',
            modal: true,
            open: function(event, ui) {
                //Load the CreateAlbumPartial action which will return 
                // the partial view _CreateAlbumPartial
                $(this).load("@Url.Action("CreateAlbumPartial")");
            },
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });

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

ダイアログが開かれたときにトリガーされるopen関数を使用し、内部でAJAXリクエストをコントローラーアクションに送信し、パーシャルを返します：

public ActionResult CreateAlbumPartial()
{
    return View("_CreateAlbumPartial");
}
78
Darin Dimitrov

ダリンの回答を改善するために、ボタンクリックイベントでdivロードコードを移動できます。このようにして、ダイアログのすべての位置のアルゴリズムが新しいテキストで機能するため、ダイアログが正しく配置されます。

<script type="text/javascript">
   $(function () {
        $('#dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            title: 'hi there',
            modal: true,           
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });

        $('#my-button').click(function () {
            //Load the CreateAlbumPartial action which will return 
            // the partial view _CreateAlbumPartial
            $('#dialog').load("@Url.Action("CreateAlbumPartial")", 
                    function (response, status, xhr) {
                        $('#dialog').dialog('open');
                    });   
        });
    });
</script>
<div id="dialog" title="Create Album" style="overflow: hidden;">
9
Marco