web-dev-qa-db-ja.com

jqueryモーダルダイアログにMVCパーシャルビュー非同期を入力し、画面の中央に表示します

Jqueryモーダルダイアログを使用して、何かをクリックしたときに部分ビューの非同期を表示しようとしています。非常に単純で、これについてはたくさんの質問がありますが、私はそれを機能させることができないようです。モーダル表示はありましたが、中央にはありません。そして、divにデータを入力しているためですafterダイアログが表示されるため、位置は入力されたdivではなく、空のdivを基準にしています-これがいくつかの静的コンテンツを表示することによってケース、そしてそれはうまく中央に配置されます。

そのため、最初に部分ビューを取得してから、load（）コールバックにダイアログを表示しようとしていますが、機能していません。ダイアログメソッドが定義されていないため、 'dialog（' open '）'行でエラーが発生します。これが私のコードです：

（追記：私はjavascript/jQueryを初めて使用するので、かなり明白な場合は申し訳ありません）

<script type="text/javascript">

    $(function () {
        $('#my-dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            modal: true
        });
    });

    $(document).ready(function() {
        $('#show-modal').click(function() {
            $('#my-dialog').load("@Url.Action("MyActionOnController")", function() {
                $('#my-dialog').dialog('open');
            });

            return false;
        });
    });

</script>

<div id="my-dialog"></div>

<a href="#" id="show-modal">Click Me </a>

感謝します！

編集ダリンのコードと一致するようにコードを変更し、問題がどのように見えるかを示す画像をアップロードしましたか？

wtf

jqueryasp.net-mvcjquery-ui-dialog
13
David Masters

OK、問題が見つかりました：

モーダルダイアログ用に返していた部分ビューは、編集ビューのMVCスキャフォールディングを使用して作成されました。これには、デフォルトで、レイアウトページに既に含まれているjQueryスクリプトが含まれているため、問題が発生している可能性があります。

すべてうまく機能しています！

2
David Masters

あなたのコードはうまく見え、私がそれをテストしたときにそれは機能しました。これが私の完全なテストケースです：

コントローラ：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult MyActionOnController()
    {
        // TODO: You could return a PartialView here of course
        return Content("<div>Hello world</div>", "text/html");
    }
}

ビュー（〜/ Views/Home/Index.cshtml）：

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="all" /> 
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#my-dialog').dialog({
                autoOpen: false,
                width: 400,
                resizable: false,
                modal: true
            });

            $('#show-modal').click(function() {
                $('#my-dialog').load("@Url.Action("MyActionOnController")", function() {
                    $(this).dialog('open');
                });
                return false;
            });

        });
    </script>
</head>
<body>
    <div id="my-dialog"></div>
    <a href="#" id="show-modal">Click Me </a>
</body>
</html>
13
Darin Dimitrov

スコープの問題の可能性はありますか？

2つのdocument.ready関数を効果的に宣言しています。すべてのコードを中に入れるだけです：

$(function () {

    });
0
Ben Foster