MVC中无需刷新主视图渲染Partial View的实现方法

别担心，这是Partial View和Ajax结合的常见场景，我一步步给你讲怎么实现：

1. 给Partial View添加容器 #

首先修改你的主视图，把Partial View放到一个单独的容器里，这样后续Ajax返回的HTML可以直接替换这个容器的内容：

@model pjct.Models.Main_Model
@using (Html.BeginForm("main_view", "pjct", FormMethod.Post))
{
    // 主表单详情
    <div id="partialContainer">
        @Html.Partial("partial_view", Model.partial_model)
    </div>
    // 主表单详情
}

2. 修改后端Action，返回Partial View #

你的get_price Action需要生成Partial对应的模型，然后直接返回渲染好的Partial View HTML，而不是返回原始数据：

public ActionResult get_price(string c_code)
{
    // 1. 根据c_code生成Partial View需要的模型（替换成你的实际业务逻辑）
    var partialModel = new pjct.Models.Partial_Model(); // 换成你实际的Partial模型类型
    // 示例：从数据库/业务层获取数据填充模型
    partialModel.Price = YourService.GetPriceByCode(c_code);
    partialModel.OtherField = ...;

    // 2. 返回Partial View，指定视图名和模型
    return PartialView("partial_view", partialModel);
}

注意：确保你的Partial View顶部声明了正确的模型类型，比如@model pjct.Models.Partial_Model，这样才能正确绑定数据。

3. 修正前端Ajax逻辑，更新Partial容器 #

调整你的JS代码，修复原来的判断逻辑问题，并在请求成功后用返回的HTML替换容器内容：

$("#services").on('change', '#code', function () {
    var code = $("#code").val();
    // 修正判断逻辑，确保code不为空
    if (code && code.trim() !== '') {
        $.ajax({
            type: "GET",
            // 建议用Url.Action生成可靠的URL，避免相对路径出错
            url: '@Url.Action("get_price", "main")',
            data: { c_code: code },
            success: function (html) {
                // 把后端返回的Partial View HTML替换到容器中
                $("#partialContainer").html(html);
            },
            error: function() {
                // 可选：添加错误处理，提示用户
                $("#partialContainer").html("<p>获取数据失败，请检查输入或重试</p>");
            }
        });
    } else {
        // 如果code为空，清空Partial容器或者显示默认提示
        $("#partialContainer").html("");
    }
});

原理说明 #

整个流程是这样的：

• 文本框值变化时，触发Ajax请求到后端get_price Action
• 后端生成Partial模型，调用Partial View渲染成HTML字符串
• 前端接收到HTML后，替换页面上的Partial容器内容，实现无刷新更新

这样就不用刷新主视图，就能动态更新Partial View的内容啦！

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