Question

您好我正试图通过按钮点击打开弹出窗口。我有一个局部视图，我在点击按钮时加载到弹出窗口。 Dialoge没有打开，而当我点击按钮局部视图在主屏幕上打开它没有popop自己。我想打开局部视图作为弹出窗口。请参阅OpenCreatePopup（）。的

Main screen code
------------------------------------------------------------------------------------ 

@model IEnumerable<SampleCRUD.Models.Product>
@{
    ViewBag.Title = "ProductList";
    Layout = "~/Views/Shared/_Layout.cshtml";
    <style type="text/css">
        .grid {
            width: 100%;
        }
    </style>
}
<h2>ProductList</h2>

<div style="padding:7px 0;">
    <input type="button" value="Add New Product" onclick="OpenCreatePopup()" />
</div>

<div style="width:100%;">

    @{
        WebGrid grid = new WebGrid(Model);

        @grid.GetHtml(
         tableStyle: "grid",
         fillEmptyRows: false,
         headerStyle: "gvHeading",
         alternatingRowStyle: "gvAlternateRow",
         rowStyle: "gvRow",
         footerStyle: "gvFooter",

         mode: WebGridPagerModes.All,
         firstText: "<< First",
         previousText: "< Prev",
         nextText: "Next >",
         lastText: "Last >>",
         columns: new[] {
         grid.Column("ProductId",header: "ID"),
         grid.Column("ProductName",header: "Product"),
         grid.Column("Price"),
         grid.Column("Qunatity"),
         grid.Column("ReorderLevel", header: "R.O.L."),
         grid.Column("ContactusId", header: "Action", canSort:false,

         format: @<text>
            @Html.Raw("<img src='/Images/edit.png' title='Edit' onclick='EditProduct(" + item.ProductId + ")'/>")
            @Html.Raw("<img src='/Images/delete.png' title='Delete'onclick='DeleteProduct(" + item.ProductId + ")'/>")
        </text>
        )
     })
    }
</div>

<div id="DivToAppendPartialVoew"></div>

<script type="text/javascript">
    function EditProduct(pid) {
        var ph = $("#DivToAppendPartialVoew");
        ph.load("/Products/edit?productid=" + pid, function () {
            ph.dialog({
                modal: true,
                width: 500,
                height: 438,
                title: "Edit Product",
                resizable: false
            });
        });
    }

    function DeleteProduct(pid) {
        if (confirm("Do you want to delete product: " + pid)) {
            var data = { 'ProductId': pid }
            $.post('/Products/Delete', data,
            function (data) {
                if (data == true)
                    location = location.href;
                else
                    alert("Could not delete");
            });
        }
    }

    function OpenCreatePopup() {
        debugger;
        var div = $("#DivToAppendPartialVoew");
        div.load("/Prducts/Create", function () {
            div.dialog({
                modal: true,
                width: 500,
                height: 438,
                title: "Add New Product",
                resizable: false,
            });
        });
    }

</script>  
   ---------------------------------------------------------------------------------- 

    Below is my partial view code :

    @model SampleCRUD.Models.Product

    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

    @using (Html.BeginForm()) {

        @Html.ValidationSummary(true)

        <fieldset>
            <legend>Product</legend>

            <div class="editor-label">
                @Html.LabelFor(model => model.ProductName)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.ProductName)
                @Html.ValidationMessageFor(model => model.ProductName)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.Price)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Price)
                @Html.ValidationMessageFor(model => model.Price)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.Qunatity)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Qunatity)
                @Html.ValidationMessageFor(model => model.Qunatity)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.ReorderLevel)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.ReorderLevel)
                @Html.ValidationMessageFor(model => model.ReorderLevel)
            </div>

            <p>
                <input type="submit" value="Create" onclick="SaveProduct()" />
            </p>
        </fieldset>
    }

    <div>
        @Html.ActionLink("Close", "Index")
    </div>
    <script type="text/javascript">

        function SaveProduct() {

            var pname = $("#ProductName").val();
            var pprice = $("#Price").val();
            var pqty = $("#Qunatity").val();
            var prol = $("#ReorderLevel").val();

            var product = {
                "ProductName": pname, "Price": pprice,
                "Qunatity": pqty, "ReorderLevel": prol
            };

            $.post('/products/create', product,
            function (data) { if (data == 0) { location = location.href; } }, 'json');

        }
    </script>

    --

Answer 1

如果你得到的控制台错误是dialog is undefined，那么我怀疑罪魁祸首是你导入了jQuery，而不是jQuery UI（定义了对话框）。

你可以从这里下载它：http://jqueryui.com/download/（如果你不需要完整的jQuery UI，它就在Widget部分）

或者您可以从Google CDN或类似网站导入它：

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

MVC 4的Jquery对话框问题

1 个答案: