单个表单实现按钮与下拉框提交触发不同MVC控制器动作的最优方案

看起来你遇到的核心问题是：当前表单不管是下拉框变更提交，还是点击保存按钮提交，都会触发同一个POST动作，没法区分两者。下面给你几个实用的解决方案，你可以根据自己的需求选择：

方案1：动态修改表单的Action属性（最简单的整页刷新方案） #

这个思路很直接：让下拉框提交时把表单的action指向NoSave动作，保存按钮提交时指向Save动作。这样两个提交就会分别命中对应的控制器方法。

修改后的表单代码：

<form method="POST" id="myForm" action="@Url.Action("Save")"> 
    <!-- dropdown list --> 
    <div class="row"> 
        @Html.LabelFor(x => x.FieldName, "Field Name:") 
        @Html.DropDownListFor(x => x.FieldName, Model.FieldName, new { 
            @class = "browser-default", 
            @onchange = @"
                document.getElementById('myForm').action = '@Url.Action("NoSave")'; 
                document.getElementById('myForm').submit();" 
        }) 
        @Html.ValidationMessageFor(x => x.FieldName) 
    </div> 

    <!-- save button--> 
    <div class="save-button"> 
        <input 
            type="submit" 
            class="btn" 
            value="Save" 
            onclick="document.getElementById('myForm').action = '@Url.Action("Save")';" 
        /> 
    </div> 
</form>

对应的控制器需要两个POST动作：

[HttpPost]
public ActionResult Save(YourViewModel model)
{
    // 这里写你的保存逻辑，比如把数据存入数据库
    return View(model);
}

[HttpPost]
public ActionResult NoSave(YourViewModel model)
{
    // 这里写修改视图的逻辑（比如更新Model里的其他关联字段），但不保存数据
    return View(model);
}

⚠️ 注意：保存按钮的onclick事件一定要加上，不然下拉框提交后表单的action会停留在NoSave，下次点保存也会走这个动作。

方案2：用隐藏字段标记动作类型（更灵活的分支处理） #

如果不想频繁修改表单action，可以在表单里加一个隐藏字段，用来标记当前是哪种提交动作，然后在控制器里根据这个标记分支处理，或者用特性映射到不同的动作方法。

子方案2.1：单动作分支处理 #

表单代码：

<form method="POST" id="myForm"> 
    <!-- 新增隐藏字段标记动作类型 -->
    <input type="hidden" id="actionType" name="actionType" value="Save" />

    <!-- dropdown list --> 
    <div class="row"> 
        @Html.LabelFor(x => x.FieldName, "Field Name:") 
        @Html.DropDownListFor(x => x.FieldName, Model.FieldName, new { 
            @class = "browser-default", 
            @onchange = @"
                document.getElementById('actionType').value = 'NoSave'; 
                document.getElementById('myForm').submit();" 
        }) 
        @Html.ValidationMessageFor(x => x.FieldName) 
    </div> 

    <!-- save button--> 
    <div class="save-button"> 
        <input 
            type="submit" 
            class="btn" 
            value="Save" 
            onclick="document.getElementById('actionType').value = 'Save';" 
        /> 
    </div> 
</form>

控制器单动作处理：

[HttpPost]
public ActionResult HandleForm(YourViewModel model, string actionType)
{
    if (actionType == "NoSave")
    {
        // 执行不保存的逻辑，比如更新Model的关联数据
        return View(model);
    }
    else
    {
        // 执行保存逻辑
        return View(model);
    }
}

子方案2.2：多动作特性映射 #

如果想把逻辑拆分到两个独立的动作方法，可以自定义一个ActionNameSelectorAttribute来判断：

先定义特性类：

public class ActionTypeAttribute : ActionNameSelectorAttribute
{
    public string TargetAction { get; set; }

    public override bool IsValidName(ControllerContext controllerContext, string actionName, MethodInfo methodInfo)
    {
        // 从表单里获取动作类型标记
        var submittedAction = controllerContext.HttpContext.Request.Form["actionType"];
        return submittedAction == TargetAction;
    }
}

然后控制器里的两个动作：

[HttpPost]
[ActionType(TargetAction = "Save")]
public ActionResult Save(YourViewModel model)
{
    // 保存逻辑
    return View(model);
}

[HttpPost]
[ActionType(TargetAction = "NoSave")]
public ActionResult NoSave(YourViewModel model)
{
    // 不保存的视图修改逻辑
    return View(model);
}

方案3：AJAX异步提交（最佳用户体验） #

如果不想每次提交都整页刷新，用AJAX异步提交是更好的选择。这种方式只会更新页面的部分内容，用户体验更流畅。

表单代码（注意把保存按钮改成type="button"，避免默认表单提交）：

<form id="myForm"> 
    <!-- dropdown list --> 
    <div class="row"> 
        @Html.LabelFor(x => x.FieldName, "Field Name:") 
        @Html.DropDownListFor(x => x.FieldName, Model.FieldName, new { 
            @class = "browser-default", 
            id = "fieldNameDropdown" 
        }) 
        @Html.ValidationMessageFor(x => x.FieldName) 
    </div> 

    <!-- save button--> 
    <div class="save-button"> 
        <button type="button" class="btn" id="saveBtn">Save</button> 
    </div> 
</form>

<!-- 引入jQuery，如果你项目里已经有了可以跳过 -->
<script src="~/Scripts/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    // 下拉框变更时异步提交到NoSave动作
    $('#fieldNameDropdown').change(function(){
        var formData = $('#myForm').serialize();
        $.ajax({
            url: '@Url.Action("NoSave")',
            type: 'POST',
            data: formData,
            success: function(result){
                // 用返回的视图HTML替换当前表单
                $('#myForm').replaceWith(result);
            }
        });
    });

    // 保存按钮点击时异步提交到Save动作
    $('#saveBtn').click(function(){
        var formData = $('#myForm').serialize();
        $.ajax({
            url: '@Url.Action("Save")',
            type: 'POST',
            data: formData,
            success: function(result){
                alert('保存成功！');
                $('#myForm').replaceWith(result);
            },
            error: function(){
                alert('保存失败，请重试！');
            }
        });
    });
});
</script>

控制器的动作和方案1的一样，只需要返回View(model)即可，AJAX会接收返回的HTML并替换页面上的表单。

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