Question

我有一个AJAX请求，要求将目录从一个组移动到另一个组。本质上，所有这些操作只是更新表中的一行。我的问题是我不从模式发送请求，到那时我不确定如何知道要与请求一起发送的表中的哪一行（哪个目录ID）。导致我出现问题的是，我的模态超出了我显示所有目录的foreach循环的范围。

我尝试了一些不同的操作，例如将Catalog 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)返回哪个元素进入或退出了模态。

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

1 个答案: