如何通过PartialView的AJAX调用获取数据并展示视图？

嘿，我懂你现在的困扰——点击新闻后AJAX拿到的是带完整布局的页面HTML，这显然不是你想要的。你应该是希望获取数据库里的新闻详情数据，然后在当前页面合理展示，而不是拿到整个页面的冗余代码对吧？下面给你两种常用的解决方案，按需选就行：

方案1：返回局部视图（PartialView） #

如果还是想用Razor来渲染详情内容，这种方案最直接，只需要让Action返回局部视图，这样AJAX拿到的就只有详情的HTML内容，没有布局页的多余代码。

第一步：创建新闻详情的局部视图 #

新建一个名为_NewsDetailPartial.cshtml的局部视图，只放详情的核心内容：

@model Models.Managers.News
<div class="news-detail">
    <h3>@model.Title</h3>
    <p>@model.Content</p>
    <span class="news-date">@model.PublishDate.ToString("yyyy-MM-dd")</span>
</div>

第二步：修改NewsController里的NewsDetail方法 #

把原来返回完整View的代码改成返回PartialView，这样就不会包含布局页了：

public ActionResult NewsDetail(int id)
{
    // 用using包裹DbContext，确保数据库连接能被正确释放
    using (var dbContext = new DbContext())
    {
        // 用FirstOrDefault避免找不到新闻时抛出异常
        var news = dbContext.News.FirstOrDefault(x => x.ID == id);
        if (news == null)
        {
            return HttpNotFound(); // 返回404，处理新闻不存在的情况
        }
        return PartialView("_NewsDetailPartial", news);
    }
}

第三步：修改AJAX的回调逻辑，把返回的HTML插入页面 #

在你的NewsPartialView.cshtml里先加一个用来展示详情的容器，然后调整AJAX的success回调：

<!-- 新增一个容器，用来展示新闻详情 -->
<div id="news-detail-container"></div>

<script>
$(document).ready(function () {
    $('.fright').click(function () {
        var id = $(this).attr('id');
        $.ajax({
            type: 'GET',
            url: '/Content/NewsDetail/' + id,
            success: function (data) {
                // 把返回的局部视图HTML插入到容器中
                $('#news-detail-container').html(data);
            },
            error:function() {
                alert("加载新闻详情失败，请稍后重试");
            }
        });
    });
});
</script>

@model IEnumerable<Models.Managers.News>
<!-- 你的新闻列表渲染代码 -->
@foreach(var item in Model)
{
    <div class="news fright" id="@item.ID">Read New >></div>
}

方案2：返回JSON数据，前端手动渲染 #

如果想做前后端分离，让后端只返回纯数据，前端用JS自己拼接内容，这种方案灵活性更高：

第一步：修改Action返回JSON数据 #

public ActionResult NewsDetail(int id)
{
    using (var dbContext = new DbContext())
    {
        var news = dbContext.News.FirstOrDefault(x => x.ID == id);
        if (news == null)
        {
            // 返回错误信息
            return Json(new { success = false, message = "该新闻不存在" }, JsonRequestBehavior.AllowGet);
        }
        // 只返回需要的字段，避免返回整个实体的冗余数据
        var result = new {
            success = true,
            title = news.Title,
            content = news.Content,
            publishDate = news.PublishDate.ToString("yyyy-MM-dd")
        };
        // 允许GET请求获取JSON数据
        return Json(result, JsonRequestBehavior.AllowGet);
    }
}

第二步：修改AJAX回调，手动渲染数据 #

<div id="news-detail-container"></div>

<script>
$(document).ready(function () {
    $('.fright').click(function () {
        var id = $(this).attr('id');
        $.ajax({
            type: 'GET',
            url: '/Content/NewsDetail/' + id,
            dataType: 'json', // 指定接收JSON类型，避免解析错误
            success: function (data) {
                if (data.success) {
                    // 用模板字符串拼接HTML内容
                    var detailHtml = `
                        <div class="news-detail">
                            <h3>${data.title}</h3>
                            <p>${data.content}</p>
                            <span class="news-date">${data.publishDate}</span>
                        </div>
                    `;
                    $('#news-detail-container').html(detailHtml);
                } else {
                    alert(data.message);
                }
            },
            error:function() {
                alert("加载新闻详情失败，请稍后重试");
            }
        });
    });
});
</script>

@model IEnumerable<Models.Managers.News>
@foreach(var item in Model)
{
    <div class="news fright" id="@item.ID">Read New >></div>
}

几个小提醒 #

• 把原来的First改成FirstOrDefault，不然找不到新闻的时候会直接抛出异常，影响体验
• 一定要用using包裹DbContext，不然数据库连接可能不会被及时释放
• 如果是ASP.NET MVC 5及以上版本，返回JSON时需要加上JsonRequestBehavior.AllowGet来允许GET请求获取JSON，或者你也可以把AJAX请求改成POST

内容的提问来源于stack exchange，提问作者Developer007