Question

我在_ChooseGenre.cshtml视图文件中有选择目标的下拉列表 @ Html.DropDownList（“DestinationID”，ViewBag.Destination as SelectList，String.Empty）

我想添加快捷方式，以便用户添加新目的地，为什么我为/目的地/创建页面添加链接

<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的ipavascript文件使用ID DestinationDialog在Views \ StoreManager_ChooseGenre.cshtml中的div标签上创建一个对话框

在Views \ StoreManager_ChoosDestination.cshtml中的div标签上创建一个对话框 Scripts \ chooseDestinatio.js文件中的以下代码显示了Add New Destinatio按钮如何连接到click事件，以及如何创建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
未捕获的TypeError：对象[object Object]没有方法'对话'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 Conflict，试试这个： -

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;
});

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

1 个答案: