Question

我无法在弹出页面上显示信息。我创建了主视图，用户单击卡，该主视图应触发模式以通过ajax显示所需的信息（包括局部视图），但是该局部页面应通过控制器显示，但控制器内的动作结果根本不会触发尽管我已经使用java-script函数指定了数据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选择器中的“容器”之前。由于“容器”是一个类属性，因此正确的jQuery选择器是“ .container”。

尝试更改

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

到

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

MVC-模式未使用AJAX显示

1 个答案: