时间戳

首页 > 解决方案 > 使用 JQuery 在 mvc 中加载部分视图

jquery - 使用 JQuery 在 mvc 中加载部分视图

问题描述

我正在尝试使用这个问题向我的布局添加部分视图。

我有以下相关代码：

ShowStatistics.cshtml

 <script src="/scripts/jquery-3.3.1.js" type="text/javascript"></script>
    <script>


$(document).ready(function () {
        $('.jsload').on('click', function (evt) {
                evt.preventDefault();
                evt.stopPropagation();

            var $detailDiv = $('#detailsDiv'),
                url = $(this).data('url');

            $.get(url, function (data) {
                $detailDiv.replaceWith(data);
            });
        });
})
</script>

<div id="detailsDiv">
            <!--Content gets loaded by JQuery-->
</div>
        <button data-url='@Url.Action("Details","Statistics", new { id = Model.Id } )' class="jsload">
            Show Skills
        </button>

PlayerSkills.cshtml

@model MVC.Models.ViewPlayerSkills
@{
    Layout = null;
}
<p>HAHAHAHAHAHAHHAHAHAHHAHAHAHAHHAH</p>
@foreach (var property in ViewData.ModelMetadata.Properties)
{
    <div class="editor">
        <label>@(property.DisplayName ?? property.PropertyName):</label>
        @Html.Display(property.PropertyName)
    </div>
}

统计控制器.cs

        public ActionResult Details(int id)
    {
        List<Player> allPlayers = GetPlayers();
        Player pl = allPlayers.Where(x => x.Id == id).FirstOrDefault();
        ViewPlayerSkills player = new ViewPlayerSkills(pl);
        return PartialView("PlayerSkills", player);

    }

我收到以下错误消息：

未捕获的 ReferenceError：数据未在 Object.fireWith [as resolveWith] (jquery-3.3.1.js:3398) 处的 Object.success (3:21) 处定义 (jquery-3.3.1.js:3268) 完成(jquery-3.3.1.js:9305) 在 XMLHttpRequest。(jquery-3.3.1.js:9548) (匿名) @ 3:21 fire @ jquery-3.3.1.js:3268 fireWith @ jquery-3.3.1.js:3398 done @ jquery-3.3.1.js: 9305（匿名）@jquery-3.3.1.js:9548 加载（异步）发送@jquery-3.3.1.js:9567 ajax@jquery-3.3.1.js:9206 jQuery.（匿名函数）@jquery-3.3 .1.js:9355（匿名）@ 3:20 dispatch @ jquery-3.3.1.js:5183 elemData.handle @ jquery-3.3.1.js:4991

当我转到网址http://localhost :{port}/Statistics/Details/5

我确实得到了我想要的输出：

输出

标签： jqueryasp.net-mvc

解决方案

<script src="/scripts/jquery-3.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.jsload').on('click', function (evt) {
            evt.preventDefault();
            evt.stopPropagation();;
            $('#detailsDiv').load($(this).data('url'));
        });
    })
</script>
<div id="detailsDiv">
    <!--Content gets loaded by JQuery-->
</div>
<button data-url='@Url.Action("Details","Statistics", new { id = Model.Id } 
)' class="jsload">
  Show Skills
</button>

推荐阅读