Asp.Net Core中如何通过Ajax将输入框值作为Razor循环的计数参数

Razor 是服务端渲染技术，你写的 @for 循环会在页面返回浏览器之前就执行完成，渲染成固定的 HTML 结构，所以无法在前端点击按钮的时候直接修改服务端的 count 参数。你可以通过 JavaScript 在客户端动态生成对应数量的文件上传框，实现需求：

步骤1：给原有循环加外层容器 #

给循环生成的文件输入框外层加一个带 id 的容器，方便后续插入元素：

<div id="slideFileContainer">
@for (int i = 0; i < count; i++)
{
    <div class="form-group">                               
        <input type="file" onchange="readURL(this);" class="form-control">                               
    </div>
}
</div>

步骤2：添加点击事件逻辑 #

在页面底部添加 JavaScript 代码，监听 Add 按钮的点击事件，读取输入框的数值后生成对应数量的文件输入框：

document.getElementById('add-slide').addEventListener('click', function(e) {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    // 读取输入框数值并做合法性校验
    const inputCount = parseInt(document.querySelector('input[asp-for="CountSlide"]').value.trim());
    if (isNaN(inputCount) || inputCount < 1) {
        alert('请输入大于0的合法数值');
        return;
    }
    const container = document.getElementById('slideFileContainer');
    // 若需要每次点击都清空原有已生成的输入框，取消注释下一行即可
    // container.innerHTML = '';
    // 生成对应数量的文件上传框
    for (let i = 0; i < inputCount; i++) {
        const formGroup = document.createElement('div');
        formGroup.className = 'form-group';
        const fileInput = document.createElement('input');
        fileInput.type = 'file';
        fileInput.className = 'form-control';
        fileInput.onchange = () => readURL(fileInput);
        // 如果你需要提交表单后后端能绑定到模型集合，补充name属性，示例：
        // 假设你的接收模型有属性 public List<IFormFile> Slides { get; set; }
        // fileInput.name = `Slides[${i}]`;
        formGroup.appendChild(fileInput);
        container.appendChild(formGroup);
    }
});

可选补充 #

如果你需要生成的输入框和 Razor 服务端渲染的完全保持一致，直接复用你原来的 HTML 结构拼接即可。

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