在 jquery 对话框中显示 ASP MVC 视图

Question

我有一个 ASP.NET MVC 视图并希望在 jquery 对话窗口中显示详细视图。最后，我的目标是在 jquery 数据表中显示一些链接以修改/删除或仅显示行项目的详细信息。

但基本上我试图显示没有任何表格的对话框，但它不起作用。 我收到以下 javascript 错误：TypeError: $(...).dialog is not a function

以下是我的观点：

@model IList<CarRentalService.Core.DomainObjects.Car>

@{
ViewBag.Title = "Overview of existing Cars";
Layout = "~/Views/Shared/_LayoutPartially.cshtml";
}

@section PageScripts{

<script type="text/javascript">

    $(document).ready(function() {
        var carsTable = $('#CarsTable').dataTable(
            {
                "aoColumns": [
                    { "sWidth": "10%" }, // ID
                    { "sWidth": "20%" }, // Kennzeichen
                    { "sWidth": "15%" }, // Marke
                    { "sWidth": "15%" }, // Leistung
                    { "sWidth": "15%" }, // Marke
                    { "sWidth": "15%" }, // Sacharbeiter
                    { "sWidth": "10%" } // For later usage of buttons 
                ]
            });
    });

    function openProductDetailsDialog(id) {
        $.ajax({
            type: "GET",
            url: encodeURI('@Url.Action("EditCar", "Staffer")' + "?id=" + id),
            cache: false,
            dataType: 'html',
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                $("#CarsDetailsDialogDiv").html(errorThrown);
            },

            success: function(data, textStatus, XMLHttpRequest) {
                $("#CarsDetailsDialogDiv").html(data);
            },

            complete: function(XMLHttpRequest, textStatus) {

                $('#CarsDetailsDialogDiv').dialog({
                    modal: true,
                    width: "300px"/*,
                    close: function(event, ui) { $("#ProductDetailsDialogDiv").html(""); },
                    buttons: {
                        "Ok": function() { $(this).dialog("close"); }
                    }*/
                });
            }
        });
    }

</script>
}

<h2>@ViewBag.Title</h2>
<h2>@ViewBag.Messsage</h2>
<a href="javascript:openProductDetailsDialog(1);">Edit car</a>

<div class="carsTableContainer">
<table id="CarsTable" class="carTable">
    <thead>
        <tr>
            <th class="id">
                Id
            </th>
            <th class="registration">
                Kennzeichen
            </th>
            <th class="trademark">
                Marke
            </th>
            <th class="modell">
                Modell
            </th>
            <th class="enginepower">
                Leistung
            </th>
            <th class="staffer">
                Sacharbeiter
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @{
            if (Model != null)
            {
                foreach (var item in Model)
                {
                    <tr>
                        <td>
                            @item.Id
                        </td>
                        <td>
                            @item.Registration
                        </td>
                        <td>
                            @item.Trademark
                        </td>
                        <td>
                            @item.Modell
                        </td>
                        <td>
                            @item.EnginePower
                        </td>
                        <td>
                            @item.Responsible.Username
                        </td>
                        <td>

                        </td>
                    </tr>
                }
            }
        }
    </tbody>
</table>


</div>

<div class="dummy">

</div>

<div id="CarsDetailsDialogDiv" title="Product details">
</div>

我在网上找到了很多处理这个问题的线索 - 但没有任何东西对我有用，所以我请求你在这个主题上提供一些帮助。

因为我发现的一些解决方案是包含错误的 javascript 库，这里是从 mvc 生成的渲染 html 的列表：

<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/demo_table.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.5.3.js"></script>
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jquery.dataTables.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/jquery-ui-1.8.20.js"></script>

Answer 1

您是否尝试过在$(document).ready(function() 中初始化对话框 然后调用$("#CarsDetailsDialogDiv").dialog("open");

$(document).ready(function() {
    $('#CarsDetailsDialogDiv').dialog({
                modal: true,
                width: "300px",
                autoOpen: false
     });
});

function openProductDetailsDialog(id) {
    $.ajax({
        type: "GET",
        url: encodeURI('@Url.Action("EditCar", "Staffer")' + "?id=" + id),
        cache: false,
        dataType: 'html',
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            $("#CarsDetailsDialogDiv").html(errorThrown);
        },

        success: function(data, textStatus, XMLHttpRequest) {
            $("#CarsDetailsDialogDiv").html(data);
        },

        complete: function(XMLHttpRequest, textStatus) {
            $("#CarsDetailsDialogDiv").dialog("open");
        }
    });
}