MVC中如何在Script区块调用Partial View并获取数据？

嘿，我看到你在MVC里用Partial View实现点击按钮加载数据时遇到了小麻烦，咱们一步步把问题捋清楚，再给你靠谱的解决方案～

首先得指出你当前代码的核心问题：

• 主视图里的@{Html.RenderPartial("partialView"); }是服务器端代码，页面渲染的时候就会执行，根本不会等到按钮点击才运行，把它放在客户端的click事件里完全起不到“点击后调用”的效果。
• 另外你的JS语法也有问题，if ($("#btnFilter").click(...))这种写法是错误的，绑定点击事件不需要用if包裹。

下面给你两种常用的正确实现方式，选适合你的场景就行：

这种方式是页面加载时先把Partial View渲染出来，点击按钮时触发里面的AJAX请求获取数据，适合Partial本身需要保留在页面上，只是刷新数据的场景。

1. 修正主视图代码 #

主视图里只需要绑定按钮的点击事件，触发Partial里的方法就行：

<!-- 页面加载时先渲染Partial View -->
@{Html.RenderPartial("partialView");}

<script>
// 绑定按钮点击事件，调用Partial里的获取数据方法
$("#btnFilter").click(function () {
    loadFilteredData();
});
</script>

2. 修正Partial View代码 #

把AJAX逻辑封装成一个可调用的函数，同时注意Url.Action的写法（第一个参数是Action名，第二个是控制器名，你之前写反啦）：

<!-- 用来展示数据的容器 -->
<div id="dataContainer"></div>

<script>
// 封装获取数据的函数
function loadFilteredData() {
    var dtDrpVals = new selectedDateDrpdnVal();
    debugger;
    $.ajax({
        dataType: "json",
        type: "POST",
        // 注意Url.Action的顺序：Action在前，Controller在后
        url: "@Url.Action("YourActionName", "Dashbrd")",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({
            "regionalManager": dtDrpVals.drpValue,
            "dtFrom": dtDrpVals.fromDate,
            "dtTo": dtDrpVals.toDate
        }),
        success: function (result) {
            // 拿到数据后渲染到容器里，这里可以根据需求改成HTML渲染
            $("#dataContainer").html(JSON.stringify(result));
        },
        error: function (xhr, status, error) {
            // 处理错误，方便调试
            console.error("加载数据失败：" + error);
        }
    });
}
</script>

3. 控制器对应的Action #

确保你的Dashbrd控制器里有接收参数并返回数据的Action：

public class DashbrdController : Controller
{
    [HttpPost]
    public JsonResult YourActionName(string regionalManager, DateTime dtFrom, DateTime dtTo)
    {
        // 这里写你的业务逻辑，比如从数据库获取对应数据
        var data = // 你的数据处理逻辑
        return Json(data);
    }
}

如果你的Partial View需要根据参数渲染不同的HTML内容，这种方式更合适——点击按钮时直接请求服务器返回渲染好的Partial View，再插入到页面中。

1. 主视图代码 #

主视图里留一个容器，点击按钮时发AJAX请求获取Partial的HTML：

<!-- 用来存放Partial View的容器 -->
<div id="partialContainer"></div>

<script>
$("#btnFilter").click(function () {
    var dtDrpVals = new selectedDateDrpdnVal();
    $.ajax({
        type: "GET", // 也可以用POST，看你的需求
        url: "@Url.Action("GetPartialView", "Dashbrd")",
        data: {
            regionalManager: dtDrpVals.drpValue,
            dtFrom: dtDrpVals.fromDate,
            dtTo: dtDrpVals.toDate
        },
        success: function (result) {
            // 把返回的Partial视图HTML插入到容器里
            $("#partialContainer").html(result);
        },
        error: function (xhr, status, error) {
            console.error("加载Partial View失败：" + error);
        }
    });
});
</script>

2. 控制器对应的Action #

这个Action返回渲染好的Partial View，把参数传递给Partial：

public class DashbrdController : Controller
{
    public ActionResult GetPartialView(string regionalManager, DateTime dtFrom, DateTime dtTo)
    {
        // 根据参数获取对应的模型数据
        var model = // 你的数据处理逻辑
        // 返回Partial View并传入模型
        return PartialView("partialView", model);
    }
}

3. Partial View代码 #

Partial View直接使用控制器传递的模型渲染内容：

@model YourNamespace.YourModelType

<!-- 用模型渲染你需要的内容 -->
<h3>筛选结果</h3>
<p>区域经理：@Model.RegionalManager</p>
<p>时间范围：@Model.DtFrom.ToString("yyyy-MM-dd") 到 @Model.DtTo.ToString("yyyy-MM-dd")</p>
<!-- 其他数据展示内容 -->

最后提醒几个关键点：

• 确保selectedDateDrpdnVal构造函数能正确获取drpValue、fromDate、toDate的值，不然AJAX传递的参数会为空。
• 控制器Action的参数名称要和AJAX里传递的参数名称完全一致，不然MVC的参数绑定会失败。
• 如果用POST请求，记得处理CSRF验证——要么在页面里生成__RequestVerificationToken并在AJAX里带上，要么在Action上添加[ValidateAntiForgeryToken]注解。

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