将特定的表 ID 值传递给来自 Modal 的 AJAX 请求

Question

我有一个 AJAX 请求，我正在将目录从一个组移动到另一个组。从本质上讲，所有这些所做的只是更新表中的一行。我的问题是我不从模态发送请求，此时我不确定如何知道表中的哪一行(哪个目录 ID(与请求一起发送。导致我出现问题的是我的模态超出了我的foreach循环，我在其中运行显示每个目录。

我已经尝试了一些不同的事情，例如将目录 ID 附加到模态的数据，然后在模态显示后抓取它(这是我在下面尝试的(，但我的参数仍然通过 null。我有一个后端控制器方法，那里没有任何问题，我只是在为如何将正确的目录 ID 传递给调用而苦苦挣扎。下面是一些代码：

模 态：

<div id="frmMoveCatalog" class="modal" tabindex="-1" role="dialog" aria-labelledby="frmMoveCatalog" aria-hidden="true">
                <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h3 class="modal-title" style="text-align:center" id="frmCatalogLabel">Move Catalog to Group</h3>
                        </div>
                        <div class="modal-body">
                            <div class="container-fluid form-group">
                                <label for="txtGroupName" class="control-label">Current Group: @Model.Group.Name</label>
                                <br />
                                <label for="txtGroupCode" class="control-label">Select new group:</label>
                                @Html.DropDownList("txtGroupID",
                                    lGroupCodes,
                                    "Select Group",
                                    new { @class = "form-control" })
                            </div>
                            <div class="container-fluid form-group">
                                <input class="btn btn-primary text-right pull-right btn-move-catalog" type="button" value="Move" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>

HTML/C# .NET 表：

@foreach (var lCatalogVersion in Model.LatestCatalogVersions)
                {
                    <tr>
                        <td>
                            <div class="dropdown">
                                <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                                    <span class="fa-chevron-down"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    @if (!lCatalogVersion.IsPublished)
                                    {
                                        <li><a href="#">Activate Version</a></li>
                                    }
                                    <li><a href="#">Items</a></li>
                                    <li><a href="#">Products</a></li>
                                    @if (lCatalogVersion.IsPublished)
                                    {
                                        <li><a href="@Url.Content($"~/Catalog/{lCatalogVersion.Guid}/Copy")">Copy to New Version</a></li>
                                    }
                                    <li><a class="fa-folder pointer" data-target="#frmMoveCatalog" data-toggle="modal" data-original-title="move this catalog to a new group" data-catalogid="@lCatalogVersion.CatalogID">Move Catalog to New Group</a></li>
                                </ul>
                            </div>
                        </td>
                        <td>
                            <a href="@Url.Content($"~/Catalog/{lCatalogVersion.Guid}")">@lCatalogVersion.Code</a>
                        </td>
                        <td>
                            @lCatalogVersion.Guid.ToString()
                        </td>
                        <td>
                            <a href="@Url.Content($"~/Catalog/{lCatalogVersion.Guid}")">@lCatalogVersion.GetName(Steelcase.Application.EBusiness.CatalogBuilder.DataModel.MetaData.LanguageEnum.English)</a>
                        </td>
                        <td>
                            @lCatalogVersion.GetDescription(Steelcase.Application.EBusiness.CatalogBuilder.DataModel.MetaData.LanguageEnum.English)
                        </td>
                        <td data-sort="@lCatalogVersion.VersionNumber.SortableVersionNumber()">
                            @if (lCatalogVersion.Status == CatalogVersion.CatalogVersionStatusEnum.Active)
                            {
                                <a href="@Url.Content($"~/Catalog/{lCatalogVersion.Guid}/Version")">@lCatalogVersion.VersionNumber.ToString()</a>
                            }
                            else
                            {
                                var lVersion = Model.ActiveCatalogVersions.FirstOrDefault(x => x.Code == lCatalogVersion.Code);
                                if (lVersion != null)
                                {
                                    <a href="@Url.Content($"~/Catalog/{lVersion.Guid}/Version")">@lVersion.VersionNumber.ToString()</a>
                                }
                                else
                                {
                                    <text>N/A</text>
                                }
                            }
                        </td>
                        <td data-sort="@lCatalogVersion.VersionNumber.SortableVersionNumber()">
                            <a href="@Url.Content($"~/Catalog/{lCatalogVersion.Guid}/Version")">@lCatalogVersion.VersionNumber.ToString()</a> (@lCatalogVersion.Status.ToString())
                        </td>
                        <td>
                            @if (lAllCatalogTags.ContainsKey(lCatalogVersion.ID))
                            {
                                foreach (TagValue lTag in lAllCatalogTags[lCatalogVersion.ID])
                                {
                                    <span class="label label-default">@lTag.Value</span>
                                }
                            }
                        </td>
                    </tr>
                }

AJAX 代码/呼叫：

$(function () {
        var $container = $('#div-@lGuid');
        var moveGroupModal = $container.find('#frmMoveCatalog');
        moveGroupModal.on('show.bs.modal', function (event) {
            var pCatalogID = $(event.relatedTarget).data('val');
            moveGroupModal.data('pCatalogID', pCatalogID);
        });
        var btnMoveCatalog = $container.find('.btn-move-catalog');
            btnMoveCatalog.click(function () {
            var form = new FormData();
            form.append("pGroupID", $container.find('#txtGroupID').val());
            form.append("pCatalogID", $('#moveGroupModal').data('pCatalogID'));
            $.post({
                url: '@Url.Content("~/Group/" + Model.Group.Guid + "/MoveCatalog")',
                contentType: false,
                processData: false,
                data: form,
                success: function (data) {
                        if (data.error) {
                            //Show error
                            scs.site.alert('Error', data.message);
                        } else {
                        $('#frmMoveCatalog').modal('hide');
                        $("#catalog-list").html(data);
                        }
                    },
                error: function (textStatus, errorThrown) { scs.site.alert('Error', textStatus + ':' + errorThrown); },
                cache: false
            });
        });
    });

任何帮助都非常感谢！

Answer 1

我能够通过以下方式解决此问题：

moveGroupModal.on('show.bs.modal', function (event) {
            pCatalogID = $(event.relatedTarget).attr('data-catalogid');
        });

然后，我在 AJAX 调用中使用pCatalogID作为要传递给表单的变量。$(event.relatedtarget)返回进入或退出模态的元素。