Javascript ASPMVC试图显示对话框以向组合框添加新项

我正试图做到这一点： 添加模式对话框的步骤向具有模式对话框的组合框添加新值的步骤。但是，我不断遇到以下错误：

0x800a139e-JavaScript运行时错误：无法在初始化之前调用对话框上的方法；试图调用方法“open”

我的代码如下：

    @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.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" })>

@Html.DropDownListFor（model=>model.CityDistrictID，model.CityDistrictList，“选择名称城市地区”，htmlAttributes:new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.CityDistrictID，“，new{@class=“text danger”}）>

如果您能帮助您克服此错误，我们将不胜感激！ 谢谢

部分视图中不存在元素

#genreDialog

，因此您的代码无法创建对话框。在局部视图的末尾添加一个带有

id

genreDialog

的

div

，它应该可以工作-

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

---

该错误表示，您试图在不存在的jquery对话框上调用open方法，因此您缺少了在您发布的文章中提到的隐藏div

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

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