MVC中如何将视图JS函数获取的选中值传递至指定控制器Action？

嘿，我来给你几个实用的方案，帮你把JS里拿到的选中值顺利传到控制器的fd Action里～

方法一：使用表单提交（同步刷新） #

这种方法简单直接，适合不需要异步操作的场景：

1. 首先在你的视图里添加一个隐藏表单，里面放一个和控制器参数名匹配的隐藏输入框：

<!-- 替换YourController为你实际的控制器名称 -->
<form id="fileForm" action="/YourController/fd" method="post">
    @Html.AntiForgeryToken() <!-- 别忘了加这个，MVC POST请求需要防伪造令牌 -->
    <input type="hidden" id="fidInput" name="Fid" value="" />
</form>

2. 修改你的fileSelected函数，把选中的值赋值给隐藏输入框，然后提交表单：

function fileSelected(data) {
    var el = document.getElementById("fileId");
    var fidInput = document.getElementById("fidInput");
    
    if (data) {
        el.innerText = data.selected;
        fidInput.value = data.selected; // 将选中值存入隐藏输入框
    } else {
        el.innerText = "None";
        fidInput.value = "";
    }
    
    // 提交表单到控制器的fd Action
    document.getElementById("fileForm").submit();
}

这样提交后，控制器的fd Action就能通过string Fid参数接收到选中的值了，因为输入框的name属性和参数名完全一致，MVC的模型绑定会自动完成映射。

方法二：使用AJAX异步提交（无刷新） #

如果不想刷新页面，用AJAX异步提交会更友好，用户体验更好：

1. 首先确保视图里有防伪造令牌（如果没加的话，加上@Html.AntiForgeryToken()），然后修改fileSelected函数：

function fileSelected(data) {
    var el = document.getElementById("fileId");
    var selectedValue = data ? data.selected : "";
    
    el.innerText = data ? data.selected : "None";

    // 用原生Fetch API提交请求
    fetch('/YourController/fd', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            // 带上防伪造令牌，避免400错误
            'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
        },
        // 把选中值编码后作为参数传递，参数名要和控制器的Fid一致
        body: `Fid=${encodeURIComponent(selectedValue)}`
    })
    .then(response => response.text())
    .then(result => {
        // 这里可以处理控制器返回的结果，比如更新页面部分内容
        console.log('提交成功啦！返回结果:', result);
    })
    .catch(error => {
        console.error('提交出错了:', error);
    });
}

2. 你的控制器Action不需要修改，保持原样即可：

[HttpPost]
public ActionResult fd(string Fid)
{
    Debug.WriteLine(Fid);
    return View();
}

如果是异步场景，你也可以把返回值改成JsonResult，比如return Json(new { Success = true, Message = "接收成功" });，这样JS里能更方便地处理返回的状态。

备注：内容来源于stack exchange，提问作者IchBinDicky