0

多くの人が解決したと思われる問題がありますが、どの解決策もうまくいかないようです。多分それは私のアプローチです。

編集ページ ( 用Album) があり、その中にforeachを挿入する がありPartial Viewます。編集ページは、Genreそのための の動的なリストを表示することを目的とAlbumしています。現在、新しいドロップダウン (部分ビュー) を追加し、(コントローラーで) 選択して保存できます。

これは、JQuery 3.x を利用した Entity Framework を使用した MVC であることを付け加えておきます。

Edit.cshtml@foreach (var albumGenre in Model.AlbumGenres)ビュー（および後でAjaxリンクに注意@Ajax.ActionLink(）：

@model x.ViewModel.AlbumView
@using HtmlHelpers.BeginCollectionItem

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">

        @* Removing a bunch of code *@

        <div class="form-group">
            @Html.LabelFor(model => model.AlbumGenres, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div>
                    <table id="genres" style="border: 0px solid black;">
                        <tr>
                            <td>&nbsp;</td>
                        </tr>

                        @foreach (var albumGenre in Model.AlbumGenres)
                        {
                            TempData["Genres"] = new SelectList(ViewBag.Genres, "Value", "Text", albumGenre.Genre.Oid);

                            //This is the PartialView
                            @Html.Partial("~/Views/Genres/_EditGenre.cshtml", albumGenre, ViewData)
                        }

                    </table>

                    <div class="form-group">
                        <div class="col-md-10" style="float: right;">

                            // This calls the Controller = 
                            // public ActionResult AddNewGenre(Guid id) { return PartialView("~/Views/Genres/_EditGenre.cshtml", new AlbumsGenres(id)); }
                            @Ajax.ActionLink(
                                "Add Genre to Album",
                                "AddNewGenre", 
                                null,
                                new { id = Model.Oid },
                                new AjaxOptions
                                {
                                    HttpMethod = "GET",
                                    InsertionMode = InsertionMode.InsertAfter,
                                    UpdateTargetId = "genres"
                                },
                                new { style = "btn btn-info" }
                            )
                        </div>
                    </div>

                </div>

            </div>
        </div>

        @* Save button *@
    </div>
}

@* Next line is commented out as I need to run this script inside the _CreateGenre.cshtml (show further down in this question) *@
@* Hoping to load the JavaScript here so that it only needs to run once (not foreach Genre in the Album *@
@*<script src="~/Scripts/ContentPub/AddGenre.js" type="text/javascript"></script>*@

@* *@

そこから私は_EditGenre.cshtmlビューを持っています：

@model ContentPub.Models.Music.AlbumsGenres

@{ 
    if (TempData["Genres"] == null)
    {
        TempData["Genres"] = new SelectList(ViewBag.Genres, "Value", "Text", null);
    }

    TempData["ShowDisplay"] = false;
    TempData["BlankValue"] = "Select a Genre";
}

@using (Html.BeginCollectionItem("AlbumGenres"))
{
    <tr>
        <td>
            <div id="GenreRow" class="form-group colorRow">
                <div class="col-md-7">
                    @Html.HiddenFor(model => model.Oid)
                    @Html.HiddenFor(model => model.Album.Oid)

                    @Html.DropDownListFor(model => model.Genre.Oid, TempData["Genres"] as SelectList, TempData["BlankValue"] as String, htmlAttributes: new { @class = "form-control genreDropDown" })
                    @Html.ValidationMessageFor(model => model.Genre.Oid, "", new { @class = "text-danger" })
                </div>

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

                <div class="col-md-5">
                    <a class="button genreLink" href="@Url.Content("~/Genres/_Create")" id="genreAddLink_@Model.Oid">+</a>
                </div>
            </div>

        </td>
    </tr>
}

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


@* This needs to be active for the button to work, it looks like this: id="genreAddLink_@Model.Oid" *@
@* Also sad that it needs to be called for each Genre Partial View *@
<script src="~/Scripts/ContentPub/AddGenre.js" type="text/javascript"></script>

@* *@

以下は私のAddGenre.jsスクリプトです：

最初の.dialogセクション：

$(document).ready(function () {

    $('#genreDialog').dialog({
        autoOpen: false,
        width: 600,
        height: 300,
        modal: true,
        title: 'Add Genre',

        buttons: {
            'Save': function () {
                // Removed for simplicity
            },

            'Cancel': function () {
                $(this).dialog('close');
            }
        }
    });

});

次に、.on('click'...セクション (これは、Ajax コンテンツがページに追加されたときに呼び出されないものです):

//$(document).ready(function () { //Tried with and without this

    // This is the old code that didn't work
    // $('.genreLink').on('click', function () { 

    //This is the supposive solution
    $('#GenreRow').on('click', '.genreLink', function () { // Also tried 'body' where '#GenreRow' is

        console.log("Clicked");
        var select = $(this).parent().parent().find('select');

        $('#genreDialog')
            .data("select", select)
            .dialog('open');

        var createFormUrl = $(this).attr('href');

        $('#genreDialog').html('')

            .load(createFormUrl, function () {
                jQuery.validator.unobtrusive.parse('#createGenreForm');
            });

        return false;

    });

//});

要するに、この編集ページを開き、+(モーダル ウィンドウで) をクリックして新しいジャンルを追加し、すべてのドロップ ダウンを更新し (適切なドロップ ダウンで新しいオプションを選択する)、JavaScript を使用して満足しています。ただし、Add Genre to Album(Ajax 呼び出し) をクリックできず+、新しいジャンル ドロップダウンの横をクリックする_CreateGenreと、モーダル ウィンドウを開きたいときに移動します (JavaScript/jQuery が起動しません)。

は$('#GenreRow').on('click', '.genreLink', function () {解雇されておらず、それを行う方法がわかりません。console.log('JavaScript test');別の例として、 Ajax を介して部分ビューからコンテンツをロードする場合、addingは起動しません。

4

1 に答える 1