使用 JQuery 在 mvc 中加载部分视图答案

【问题标题】：Loading a partial view in mvc using JQuery使用 JQuery 在 mvc 中加载部分视图
【发布时间】：2018-11-16 02:11:57
【问题描述】：

我正在尝试使用 this question 将部分视图添加到我的布局中。

我有以下相关代码：

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>
}

StatisticsController.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);

    }

我收到以下错误消息：

Uncaught ReferenceError: 数据未定义在 Object.success (3:21) 着火（jquery-3.3.1.js:3268）在 Object.fireWith [as resolveWith] (jquery-3.3.1.js:3398) 完成后（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

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

【问题讨论】：

您需要将脚本包装在$(document).ready() 中或将脚本移动到页面底部（您正在向尚不存在的DOM 元素添加处理程序）
@StephenMuecke 啊，是的，你是对的，现在我确实收到一条错误消息，让我改变我的问题

标签： jquery asp.net-mvc

【解决方案1】：

<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>

【讨论】：