ASPMVC尝试显示Dialog以向Combobox添加新项目

时间:2015-09-26 19:52:29

标签: javascript c# jquery asp.net combobox

我试图遵循这个: http://www.asp.net/mvc/overview/older-versions/working-with-the-dropdownlist-box-and-jquery/adding-a-new-category-to-the-dropdownlist-using-jquery-ui 添加模式对话框以使用模式对话框向组合框添加新值。但是,我不断收到以下错误:

0x800a139e - JavaScript运行时错误:在初始化之前无法调用对话框上的方法;试图调用方法'打开'

我的代码如下:

    @section Scripts {
    @Scripts.Render("~/bundles/jqueryval")



    <script type="text/javascript">

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

            $('#genreAddLink').click(function () {
                var createFormUrl = $(this).attr('href');
                $('#genreDialog').html('')
                .load(createFormUrl, function () {
                    // The createGenreForm 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('#createGenreForm');
                    $('#genreDialog').dialog('open');
                });

                return false;
            });
        });

    </script>
}

我的观点:

@Html.Partial("_ChooseCityDistrict")

我的偏见:

@Html.DropDownListFor(model => model.CityDistrictID, Model.CityDistrictList, "Select Name City District", htmlAttributes: new { @class = "form-control" })

<a class="button" href="@Url.Content("~/NameCityDistricts/Create")" id="genreAddLink">Add New City District</a>

@Html.ValidationMessageFor(model => model.CityDistrictID, "", new { @class = "text-danger" })>

任何帮助您解决此错误都将非常感谢! 谢谢!

2 个答案:

答案 0 :(得分:0)

元素#genreDialog在您的局部视图中不存在,因此您的代码无法创建对话框。添加div id genreDialog到部分视图的末尾,它应该有效 -

<div id="genreDialog"></div>

答案 1 :(得分:0)

该错误说,你试图在非现有的jquery对话框上调用open方法,所以你错过了你发布的文章中提到的隐藏div

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