mvc 4 Asp.net 中的弹出对话框

Question

我在 _ChooseGenre.cshtml 视图文件中有选择目的地的下拉列表 @Html.DropDownList("DestinationID", ViewBag.Destination as SelectList, String.Empty)

我想添加快捷方式以使用户能够添加新的目的地，这就是我为 /Destination/Create 页面添加链接的原因

<a class="button" href="@Url.Content("~/Destination/Create")" id="DestinationAddLink">Add New Destination</a>

创建一个隐藏的 div，ID 为 DestinationDialog。我们将使用 jQuery 将我们的 Add Genre 对话框与此 div 中的 ID DestinationDialog 挂钩。

<div id="DestinationDialog" class="hidden">
</div>

chooseDestination.js 响应的 javascript 文件使用 ID DestinationDialog 在 Views\StoreManager_ChooseGenre.cshtml 中的 div 标签上创建一个对话框

在 Views\StoreManager_ChoosDestination.cshtml 中的 div 标签上创建一个对话框 Scripts\chooseDestinatio.js 文件中的以下代码显示了 Add New Destinatio 按钮如何连接到单击事件，以及如何创建 Add New Destinatio 对话框。

$(function () {
    $('#DestinationDialog').dialog({
        autoOpen: false,
        width: 400,
        height: 300,
        modal: true,
        title: 'Add Destination',
        buttons: {
            'Save': function () {
                var createDestinationForm = $('#createDestinationForm');
                if (createDestinationForm.valid()) {
                    $.post(createDestinationForm.attr('action'), createDestinationForm.serialize(), function (data) {
                        if (data.Error != '') {
                            alert(data.Error);
                        }
                        else {
                            // Add the new Destination to the dropdown list and select it
                            $('#DestinationId').append(
                                    $('<option></option>')
                                        .val(data.Destination.DestinationId)
                                        .html(data.Destination.DestinationName)
                                        .prop('selected', true)  // Selects the new Destination in the DropDown LB
                                );
                            $('#DestinationDialog').dialog('close');
                        }
                    });
                }
            },
            'Cancel': function () {
                $(this).dialog('close');
            }
        }
    });

    $('#DestinationAddLink').click(function () {
        var createFormUrl = $(this).attr('href');
        $('#DestinationDialog').html('')
        .load(createFormUrl, function () {
            // The createDestinationForm is loaded on the fly using jQuery load. 
            // In order to have client validation working it is necessary to tell the 
            // jQuery.validator to parse the newly added content
            jQuery.validator.unobtrusive.parse('#createDestinationForm');
            $('#DestinationDialog').dialog('open');
        });

        return false;
    });
}); 

当我运行时，我从浏览 google chrome jquery 调试器得到错误

未捕获的 ReferenceError：未定义 jQuery jquery-ui-1.10.3.js:314
Uncaught TypeError: Object [object Object] has no method 'dialog' chooseDestination.js:2

注意我指的是 jscript 文件

<link href="@Url.Content("//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css")" 
      rel="stylesheet" type="text/css" />
<script src="@Url.Content("//code.jquery.com/ui/1.10.3/jquery-ui.js")" 
        type="text/javascript"></script>
<script src="@Url.Content("//code.jquery.com/jquery-1.9.1.js")" 
        type="text/javascript"></script>

Answer 1

你可能面临 Jquery 冲突，试试这个：-

var jq = jQuery.noCOnflict();

jq('#DestinationAddLink').click(function () {
    var createFormUrl = jq(this).attr('href');
    jq('#DestinationDialog').html('')
    .load(createFormUrl, function () {
        // The createDestinationForm is loaded on the fly using jQuery load. 
        // In order to have client validation working it is necessary to tell the 
        // jQuery.validator to parse the newly added content
        jQuery.validator.unobtrusive.parse('#createDestinationForm');
        jq('#DestinationDialog').dialog('open');
    });

return false;
});