всплывающий диалог в MVC 4 Asp.net

Question

всплывающий диалог в MVC 4 Asp.net

0

У меня есть раскрывающийся список для выбора Destination в _ChooseGenre.cshtml файл вида @Html.DropDownList("DestinationID", ViewBag.Destination как SelectList, String.Empty)

Я хочу добавить сокращение, чтобы пользователь мог добавить новое назначение, поэтому я добавляю ссылку для /Destination/Create page

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

создает скрытый div с идентификатором DestinationDialog. Мы будем использовать jQuery для подключения диалогового окна Add Genre с идентификатором DestinationDialog в этом div.

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

javascript файл для selectDestination.js Ответчик использует идентификатор DestinationDialog для создания диалогового окна в теге div в представлении \StoreManager_ChooseGenre.cshtml

создайте диалоговое окно тега div в представлении \StoreManager_ChoosDestination.cshtml. Следующий код в файле Scripts\chooseDestinatio.js показывает, как кнопка "Добавить новое 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 debugger

Uncaught ReferenceError: jQuery не определен jquery-ui-1.10.3.js: 314
Uncaught TypeError: Object [object Object] не имеет метода '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>

Mohammad Saad 06 янв. 2014, в 09:41

Источник

0

Я не уверен, но вы должны поставить http://code.jquery.com/ui/1.10.3/jquery-ui.js .
Anup 06 янв. 2014, в 08:42

Теги:

jquery

asp.net

asp.net-mvc-4

dialog

1 ответ

Ещё вопросы

Я не уверен, но вы должны поставить http://code.jquery.com/ui/1.10.3/jquery-ui.js .

Anup · Answer 1 · 2014-01-06T06-43-00.000Z

Вы можете столкнуться с 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;
});