MVC - 模态不使用 AJAX 显示

Question

我在弹出页面上显示信息时遇到问题。我创建了用户单击卡片的主视图，它应该触发一个模式以通过 ajax 显示所需的信息（包括部分视图），但是应该通过控制器显示部分页面，但控制器内的操作结果根本不会触发尽管我已经用我的 java-script 函数指定了 data-url。

这是我的索引页：

    <div id="pageContainer">
    <div class="container">

        <!--Boxers Cards-->
        <div class="row text-center default-div-top-padding">

            <div class="col-lg-3 col-md-6 mb-4 rounded fighter-card" id="FighterDetails">
                <a id="popup-button" data-url="@Url.Action("FighterDetails", "RankingsController")" data-toggle="modal" data-target=".fighter-modal">

                    <img class="card-img-top" src="http://nyfights.com/wp-content/uploads/2017/12/Screen-Shot-2017-12-11-at-5.10.25-PM.png" alt="" />

                    <div class="card-body fighter-card-body-color" style="border-bottom: 2px solid rgb(255, 172, 0)">
                        <div class="card-title fighter-card-title">Vasyl Lomachenko</div>

                        <ul class="fighter-card-information">
                            <li>
                                <div class="fighter-card-information-title">Belts: </div>
                                <div class="fighter-card-information">WBA, WBO, IBF, WBC</div>
                            </li>
                            <li>
                                <div class="fighter-card-information-title">Record:</div>
                                <div class="fighter-card-information">11-1-0 9KO</div>
                            </li>
                        </ul>

                    </div>

                    <div class="card-footer fighter-card-ranking-position fighter-card-footer-color">
                        <h1>1</h1>
                    </div>

                    <input type="hidden" name="popup=title" value="Fighter Details" />

                </a>
            </div>

        </div>
        <!--Boxers Cards End-->

    </div>
</div>

<!--Modal-->
<div class="modal fade fighter-modal" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">

            <div class="modal-header blueBackground goldBorderBottom">
                <button type="button" class="close" data-dismiss="modal" aria-label="close" data-toggle="tooltip" data-placement="left" title="close">
                    <span aria-hidden="true">
                        &times;
                    </span>
                </button>
                <span class="modal-title" id="gridSystemModalLabel"></span><br />
            </div>

            <div class="modal-body">
                <div class="container-fluid">
                    <div class="">
                        <div id="ajax-target-container"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script type="text/javascript">

    $(document).ready(function () {

        //AJAX Popup Control - Renders a popup with designed partial view
        $("container").on("click", "#popup-button", function () {

            //Set the URL
            var url = $(this).attr('data-url');

            //Set the title
            var popupTitle = $(this).find($('input[name=popup-title]')).val();
            $(".modal-title").text(popupTitle);

            //Set a default spinner
            $(".modal #ajax-target-container").append("<span class='blueText'><i class='fa fa-spinner fa-spin fa-3x fifteenPxSpacingRight'></i> Loading... </span>");

            $.ajax({
                type: "GET",
                cache: false,
                url: url,
                success: function (data) {
                    $(".modal #ajax-target-container").empty();
                    $(".modal #ajax-target-container").html(data);
                }
            })
        });

    });

</script>

我的部分观点：

<div class="row">
@using (Html.BeginForm("", "", FormMethod.Post, new { @id = "Fighter-Details" }))
{
    @Html.AntiForgeryToken()

    <div class="card-body fighter-card-body-color" style="border-bottom: 2px solid rgb(255, 172, 0)">
        <div class="card-title fighter-card-title">Vasyl Lomachenko</div>

        <ul class="fighter-card-information">
            <li>
                <div class="fighter-card-information-title">Belts: </div>
                <div class="fighter-card-information">WBA, WBO, IBF, WBC</div>
            </li>
            <li>
                <div class="fighter-card-information-title">Record:</div>
                <div class="fighter-card-information">11-1-0 9KO</div>
            </li>
        </ul>

    </div>
}

还有我的控制器：

    [HttpGet]
    public PartialViewResult FighterDetails()
    {
        return PartialView("~/Views/Rankings/PartialViews/FighterDetails.cshtml");
    }

现在，当我单击卡片时，它只会显示弹出窗口的顶部：

就是这样。控制器根本没有被触发，所以它似乎没有通过 java 脚本函数，但我不知道为什么。

任何帮助将不胜感激， 谢谢

Answer 1

在您的 JS 代码中，您似乎缺少 '.'在 jQuery 选择器中的“容器”之前。由于 'container' 是一个类属性，所以正确的 jQuery 选择器是 '.container'。

尝试改变

$("container").on("click", "#popup-button", function () {

到

$(".container").on("click", "#popup-button", function () {