如何将HTML表单绑定到MVC控制器方法参数？解决415请求错误

你遇到的415错误（Unsupported Media Type）核心原因是请求的媒体类型与服务器期望的不匹配，加上AJAX配置、表单元素的几个细节问题，导致控制器方法无法触发。以下是具体修正步骤：

1. 修正表单元素：添加name属性 #

HTML表单的输入元素必须设置name属性（与模型属性名对应），否则无法正确获取表单值，也会影响模型绑定。修改后的表单：

<form id="form1" method="post">
    <label for="name">Your name</label>
    <input type="text" id="name" name="Name" placeholder="Enter your name here please" />
    <label for="starrating">How would you like to rate us?</label>
    <input type="range" min="1" max="5" placeholder="choose the rate here" id="starrating" name="StarRating" />
    <input type="submit" id="btn1" onclick="return addComment()" />
</form>

2. 修正AJAX请求配置 #

原AJAX请求存在3个关键问题：未指定POST方法、未设置JSON请求头、未将数据转为JSON字符串。修改后的JS脚本：

function addComment() {
    // 阻止表单默认提交行为，避免页面刷新中断AJAX请求
    event.preventDefault();

    // 构造符合模型结构的数据，注意属性名与C#模型对应（大小写不敏感，但建议保持一致）
    var commentData = {
        Name: document.getElementById('name').value,
        StarRating: parseInt(document.getElementById('starrating').value) // 转为int类型，匹配模型的StarRating属性
    };

    $.ajax({
        url: "https://localhost:44342/addcomment",
        method: "POST", // 明确指定POST方法，匹配控制器的[HttpPost]特性
        contentType: "application/json", // 告诉服务器请求体是JSON格式，对应[FromBody]的要求
        dataType: "json", // 预期服务器返回JSON格式响应
        data: JSON.stringify(commentData), // 将JS对象转为JSON字符串，符合[FromBody]的解析要求
        success: function (result) {
            console.log(result);
        },
        error: function(xhr, status, error) {
            console.log("请求错误: " + xhr.status + " - " + error);
        }
    });

    return false; // 双重保险，阻止表单默认提交
}

3. 关键原理说明 #

• [FromBody]特性要求请求体必须是JSON格式，且请求头Content-Type为application/json，否则服务器会返回415错误。
• 表单的默认提交行为会导致页面刷新，必须通过event.preventDefault()或return false阻止，才能让AJAX请求正常完成。
• 模型绑定依赖表单元素的name属性，只有设置了name，才能将表单值映射到模型的对应属性。

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