如何将EditorFor控件值传入Url.Action作为分页参数？

核心问题在于@Html.PagedListPager是服务器端渲染的，它生成的分页链接在页面加载时就已经固定了，没法直接嵌入客户端日期选择器的动态值。所以我们需要用JavaScript来动态修改这些链接的URL，把日期值加进去。

下面是两种可行的实现方式：

方式一：使用占位符替换 #

先让服务器生成带占位符的基础URL，再用JS替换成实际日期值：

1. 第一步：修改PagedListPager的代码，给from和to设置占位符（比如__FROM__和__TO__）：

@Html.PagedListPager(Model, page => Url.Action("Index", new { from = "__FROM__", to = "__TO__", page }), new { @class = "pagination" })

2. 第二步：添加JavaScript代码，动态更新分页链接：

// 封装更新分页链接的函数
function updatePagerLinks() {
    // 获取日期选择器的值
    const fromDate = document.getElementsByClassName("date")[0].value;
    const toDate = document.getElementsByClassName("date")[1].value;
    
    // 遍历所有分页按钮的链接
    const pagerLinks = document.querySelectorAll(".pagination a");
    pagerLinks.forEach(link => {
        // 替换URL里的占位符，注意用encodeURIComponent处理特殊字符
        const updatedUrl = link.href
            .replace("__FROM__", encodeURIComponent(fromDate))
            .replace("__TO__", encodeURIComponent(toDate));
        link.href = updatedUrl;
    });
}

// 页面加载完成后立即更新一次
document.addEventListener("DOMContentLoaded", updatePagerLinks);

// 给日期选择器绑定change事件，值变化时自动更新链接
const datePickers = document.getElementsByClassName("date");
for (const picker of datePickers) {
    picker.addEventListener("change", updatePagerLinks);
}

方式二：直接追加URL参数 #

如果不想用占位符，也可以让服务器生成不带from和to的基础分页链接，再用JS把参数追加进去：

1. 第一步：修改PagedListPager代码：

@Html.PagedListPager(Model, page => Url.Action("Index", new { page }), new { @class = "pagination" })

2. 第二步：对应的JavaScript代码：

function updatePagerLinks() {
    const fromDate = encodeURIComponent(document.getElementsByClassName("date")[0].value);
    const toDate = encodeURIComponent(document.getElementsByClassName("date")[1].value);
    const paramString = `from=${fromDate}&to=${toDate}`;
    
    const pagerLinks = document.querySelectorAll(".pagination a");
    pagerLinks.forEach(link => {
        // 判断URL是否已有参数，决定用?还是&分隔
        const separator = link.href.includes("?") ? "&" : "?";
        link.href = `${link.href}${separator}${paramString}`;
    });
}

// 页面加载和日期变化时触发更新
document.addEventListener("DOMContentLoaded", updatePagerLinks);
document.querySelectorAll(".date").forEach(picker => {
    picker.addEventListener("change", updatePagerLinks);
});

注意事项 #

• 确保日期选择器的class确实是date，如果你的MyPickerTemplate生成的input用了其他class，记得修改JS里的选择器（比如用id或者其他属性选择器）。
• 使用encodeURIComponent是为了处理日期中的特殊字符（比如/），避免URL格式错误，保证参数能正确传递到后台Action。

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