Блог

Главная - Вопросы по программированию - ASP.NET Диалоговое окно MVC jquery _layout

ASP.NET Диалоговое окно MVC jquery _layout

#javascript #jquery #asp.net #asp.net-mvc

#javascript #jquery #asp.net #asp.net-mvc

Вопрос:

Я следовал этому руководству здесь: http://evolpin.wordpress.com/2011/04/26/asp-net-mvc-partial-view-and-ajax-real-world-example / и все до тех пор, пока диалоговое окно не заработает нормально. Однако я не уверен, почему диалоговое окно не открывается…

Вместо открытия диалогового окна он вводит I’ve, определенный в _Layout приложения MVC, что существенно расширяет панель навигации, которую я имею в верхней части страницы. Однако я подумал, что, поскольку скрипт вызывает .dialog, он откроет диалоговое окно, как определено в сценариях пользовательского интерфейса.

Мой код для _Layout:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Spare Part Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/ui-darkness/jquery-ui-1.10.4.custom.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.2.custom.min.js" type="text/javascript">      </script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Parts On Hand","Index","PartOnHands")</li>
                <li>@Html.ActionLink("VMI","Index","VMIOnHands")</li>
                <li><a href='javascript:showVolumeConstants();'>Set Volume</a></li>
            </ul>
            <script type="text/javascript">

                function showVolumeConstants() {
                    if($('#editVolume').length ==0)
                    {
                        //ajax load
                        $('#volumeScreen').load("@Url.Action("OpenVolume","Home")");
                    } else {
                        // reopen the volume dialog which was previously rendered
                        $("#editVolume").dialog("open");
                    }
                }
            </script>
        </div>
        <div id='volumeScreen'>
        </div>
    </div>
</div>
<div class="container body-content">

    @RenderBody()
    <hr />
    <footer>
        <p>amp;copy; @DateTime.Now.Year - SeaInv</p>
    </footer>
</div>

Вот мое частичное представление:

 @using System.Web

<div id='editVolume' style="height:150px;">
<h1 style="color:whitesmoke">Edit Volume</h1>
<table>
    <tr>
        <td style="color:ghostwhite">6 Month Volume:</td>
        <td>@Html.TextBox("volume6month")</td>
    </tr>
    <tr>
        <td style="color:ghostwhite">Quarter Volume:</td>
        <td>@Html.TextBox("volumeQuarter")</td>
    </tr>
 </table>
 </div>
<script type="text/javascript">
$(function () {
    $("#editVolume").dialog({
        model: true,
        autoOpen: true,
        resizeable: false,
        buttons: [{
            Submit: function () {
                // Edit the volumes entered
                $.post("@Url.Action("EditVolume","Home")",
                    {
                        volume6month: $("volume6month").val(),
                        volumeQuarter: $("volumeQuarter").val()
                    },
                    function (data, status, xhr) {
                        if (data.Success) {
                            $('#editVolume').dialog("close");
                        } else {
                            //Do something
                        }
                    });
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }]
    });
});
</script>

Буду признателен за любую помощь!

Вот что в настоящее время делает мой «диалоговый» код… Не то поведение, которое я хочу, и без кнопок. Я не понимаю, что я делаю не так, добавляя эти файлы jQueryUI или скрипты jQueryUI в свой код, и я очень сильно расстраиваюсь. Может кто-нибудь, пожалуйста, помогите?

http://i.stack.imgur.com/9O8Kx.png

Редактировать: последнее, что нужно упомянуть, у меня есть частичный рендеринг представления в _Layout, но он управляется HomeController. Я не считаю, что это проблема.

Комментарии:

1. Вы убедились, что ваш метод OpenVolume на контроллере возвращает частичное представление вместо представления? В противном случае он будет выполняться через ваш _ViewStart по умолчанию, который обычно определяет макет как часть представления.

2. Привет, да, я обязательно возвращаю PartialView («VolumePartial»). У меня такое чувство, что это как-то связано с неправильной загрузкой библиотеки javascript, но я не уверен, как это проверить или почему она не будет загружаться правильно.

3. Привет, у меня есть кнопка и div, используемые для диалога, как часть _Layout … будет ли это частью проблемы? Нужно ли, чтобы пустой div был на отдельной странице? Я хочу, чтобы он был загружен на всех экранах, в чем и заключается моя проблема. Я все еще думаю, что пользовательский интерфейс jquery не загружается, и css для него, похоже, также связан с этим. Может кто-нибудь дать какой-либо совет или помощь, даже если просто начать отладку этого?