如何在 MVC 中创建弹出 div？答案

【问题标题】：How to create pop up div in MVC?如何在 MVC 中创建弹出 div？
【发布时间】：2014-07-30 07:49:58
【问题描述】：

我在这里阅读了几个主题并尝试创建弹出窗口，但它不起作用，我找不到原因？

我有一个 div 调用：

<input class="k-button" style="font-size: 0.9em; color: #ff6a00;" type="button" value="Filter" onclick="OpenPanel()" />

我有第二个 div：

    <div id="filterPanel" title="Filter Options">
        @using (Html.BeginForm("Vehicle", "Home", new { id = "Id" }))
        {       
        <table>
                    <tr>
                        <th>Search Criteria:</th>
                    </tr>
                    <tr>
                        <td>Model</td>
                        <td>
                            <input class="k-in" style="width: 100px; padding: 0; font-size: 0.9em;" type="text" id="model" name="model" value="@Model.Filter.Model"/>

                        </td>
                    </tr>
                    <tr>
                        <td>Status</td>
                        <td>
                            @{
                var statusItems = new List<SelectListItem>()
                {
                    new SelectListItem
                    {
                        Value="None",
                        Text="None",
                        Selected= Model.Filter.Status == "None" ? true : false
                    },
                    new SelectListItem
                    {
                        Value="New",
                        Text="New",
                        Selected= Model.Filter.Status == "New" ? true : false
                    }
                };
            }
            @Html.DropDownList("Status", statusItems, "-- Select --", new { @class = "k-dropdown", @style= "width: 120px;font-size: 0.9em; padding: 0;"})

                        </td>
                    </tr>                      
                    <tr>
                        <td><input class="k-button" style="font-size: 0.9em; color: #ff6a00; width: 100px" type="submit" name="filter" value="Filter" /></td>
                        <td><input class="k-button" style="font-size: 0.9em; color: #ff6a00; width: 100px" type="submit" name="filter" value="Remove Filter" onclick="ClearFilter()" /></td>
                    </tr>
                </table>
        }
            </div>

我有第二个 jQuery/java 脚本：

$(document).ready(function () {
    $('#filterPanel').dialog({
        autoOpen: false,
        modal: true
    });

    function OpenPanel() {
        $('#filterPanel').dialog("open");
    }

});

在控制器中一切似乎都很好：

[HttpPost]
public ActionResult Vehicle(FormCollection collection)
{
   ...
   return View(vehicle);
}

Div 总是显示在页面上，并且在按钮单击时没有弹出消息（我猜没有调用脚本）。我肯定错过了一些东西，但我看不到它。问题出在哪里？

P.S 另外，由于某些原因，我的 jQuery 中的函数变成了“未捕获的类型错误：未定义不是函数”。

编辑： 我已经包含了 jquery.ui

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));

【问题讨论】：

包含 jquery ui 文件...
包括在内。稍等，我会更新问题
您使用的是哪个 jqueryui 版本？？
jquert-ui-1.8.24 和 jquery-1.8.2

标签： c# javascript jquery asp.net-mvc-4

【解决方案1】：

在您的页面中添加以下working code 并确保它有效。如果没有，则更新 jquery 库版本。

<div id="dialog">Your non-modal dialog</div>
<a href="#" id="open">Open dialog</a>

<script type="text/javascript">
    $('#open').click(function () {
        $('#dialog').dialog('open');
    });

    $(document).ready(function () {
        $("#dialog").dialog({
            autoOpen: false,
            modal: true,
            open: function () {
                jQuery('.ui-widget-overlay').bind('click', function () {
                    jQuery('#dialog').dialog('close');
                })
            }
        });
    });
</script>

如果它有效，那么更改现有的呼叫者按钮您已经在使用。

<input id="open" class="k-button" type="button" value="Filter" onclick="OpenPanel()" />

【讨论】：

试过这个。不工作。在这两个函数上：“未捕获的 TypeError：未定义不是函数”。不明白，这真的是图书馆的问题吗？因为我尝试制作类似于此youtube.com/watch?v=RokXgBFSvp8&feature=youtu.be 并且恰好使用了 1.8.24 和 1.82 jquert 版本。
你看到小提琴的例子了吗？该代码绝对是有效的代码。您是否尝试过更新 jquery 和 UI 库？
已更新。很快就会看到（构建）
不。图书馆更新没有做任何事情。并且由于某种原因 $("#dialog").dialog({ is Uncaught TypeError: undefined is not a function.
$("#dialog").dialog() is Uncaught TypeError: undefined is not a function。很明显，页面中没有加载 jquery UI 库。在你的页面中添加这行代码

【解决方案2】：

您可以使用jquery UI Dialog 作为弹出窗口。让我们在这里做一个小设置。

我们会有一个主窗体的视图模型：

public class MyViewModel
{
    public string ValueId { get; set; }
    public IEnumerable<SelectListItem> Values 
    { 
        get 
        {
            return new[]
            {
                new SelectListItem { Value = "1", Text = "item 1" },
                new SelectListItem { Value = "2", Text = "item 2" },
                new SelectListItem { Value = "3", Text = "item 3" },
            };
        } 
    }

    public string NewValue { get; set; }
}

控制器：

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

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return Content("thanks for submitting");
    }
}

还有一个视图（~/Views/Home/Index.aspx）：

<%@ Page 
    Language="C#" 
    MasterPageFile="~/Views/Shared/Site.Master" 
    Inherits="System.Web.Mvc.ViewPage<AppName.Models.MyViewModel>" 
%>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <% using (Html.BeginForm()) { %>
        <%= Html.DropDownListFor(x => x.ValueId, Model.Values) %>
        <br/>
        <%= Html.EditorFor(x => x.NewValue) %>
        <%= Html.ActionLink("Suggest Value", "New", "NewValue", null, new { id = "new-value-link" }) %>
        <button type="submit">OK</button>
    <% } %>

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

</asp:Content>

然后我们可以处理弹出窗口。我们为它定义一个视图模型：

public class NewValueViewModel
{
    public string Foo { get; set; }
    public string Bar { get; set; }
}

控制器：

public class NewValueController : Controller
{
    public ActionResult New()
    {
        return PartialView(new NewValueViewModel());
    }

    [HttpPost]
    public ActionResult New(NewValueViewModel model)
    {
        var newValue = string.Format("{0} - {1}", model.Foo, model.Bar);
        return Json(new { newValue = newValue });
    }
}

以及对应的局部视图（~/Views/NewValue/New.ascx）：

<%@ Control 
    Language="C#" 
    Inherits="System.Web.Mvc.ViewUserControl<AppName.Models.NewValueViewModel>" 
%>

<% using (Html.BeginForm(null, null, FormMethod.Post, new { id = "new-value-form" })) { %>
    <%= Html.EditorFor(x => x.Foo) %>
    <%= Html.EditorFor(x => x.Bar) %>
    <button type="submit">OK</button>
<% } %>

现在剩下的就是编写一些 javascript 来连接所有内容。我们包括 jquery 和 jquery ui：

<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.js") %>" type="text/javascript"></script>

还有一个包含我们代码的自定义 javascript 文件：

$(function () {
    $('#new-value-link').click(function () {
        var href = this.href;
        $('#dialog').dialog({
            modal: true,
            open: function (event, ui) {
                $(this).load(href, function (result) {
                    $('#new-value-form').submit(function () {
                        $.ajax({
                            url: this.action,
                            type: this.method,
                            data: $(this).serialize(),
                            success: function (json) {
                                $('#dialog').dialog('close');
                                $('#NewValue').val(json.newValue);
                            }
                        });
                        return false;
                    });
                });
            }
        });
        return false;
    });
});

【讨论】：