从脚本向控制器发送按钮值答案

【问题标题】：Send Button Value to Controller from Script从脚本向控制器发送按钮值
【发布时间】：2016-04-24 21:27:28
【问题描述】：

假设有一个带有多个输入按钮的 .NET Bootstrap 表单。当用户按下 Enter 键时，无论用户在哪个面板中修改数据，都会将默认按钮值发送到控制器。我认为代码确定了哪个面板处于活动状态以及哪个按钮对应于该面板，但是如何将正确的面板的按钮值发送到控制器？ $closestButton.Submit();没有用，我在这里找不到搜索问题的答案。提前致谢！

控制器：

[HttpPost]
public ActionResult SaveData(SaveDataViewModel model, string buttonCommand)
{
    if (buttonCommand == "Save Basics")
    {
        //Do stuff
    }
    else if (buttonCommand == "Save Owner")
    {
        //Do other stuff
    }
    return View();
}

观点：

<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default" id="basicsPanel">
            <div class="panel-heading">Basic Info</div>
            <div class="panel-body">
                <div class="row">
                    <!-- Text boxes and such -->
                </div>
                <div class="row">
                    <!-- This is the default button upon pressing Enter key, and its value is always sent to the Controller -->
                    <button type="submit" id="saveBasics" name="buttonCommand" class="btn btn-success pull-right" value="Save Basics">Save Basics</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-info" id="ownerPanel">
            <div class="panel-heading">Owner</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-4">
                        <!-- Other text boxes and such -->
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12 text-right">
                        <!-- This button should be the one used when a User presses the Enter key while filling in data in this panel -->
                        <button type="submit" id="saveOwner" name="buttonCommand" class="btn btn-success" value="Save Owner">Save Owner</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

最后，检测到哪个按钮被按下的脚本，但无法设置“buttonCommand”的值：

$(document).keypress(function (e) {
    if (e.which == 13) {
        var $activeElement = document.activeElement.id;
        var $closestPanel = $($activeElement).closest('panel');
        var $closestButton = $($closestPanel).children('input[type=submit]');
        //Got the intended button, now how to send its value?
    }
});

【问题讨论】：

这应该可以帮助你stackoverflow.com/questions/4825295/…
另一种选择是给他们唯一的名字
@jamiedanq 被“按下”的按钮是已知的，因为它始终是默认按钮。用户正在工作的面板的按钮也可以通过脚本获知。需要的是能够将按 Enter 始终发送到控制器的默认按钮替换为用户打算激活的脚本中的按钮。此外，更改按钮名称不会影响此默认 Enter 键按钮，这是此链接中的方法 1：dotnet-tricks.com/Tutorial/mvc/…

标签： javascript jquery asp.net asp.net-mvc twitter-bootstrap

【解决方案1】：

这里的答案是：a) 捕获一个按键事件并测试它是否是 Enter 键； b) 如果是，调用一个函数来防止默认行为； c) 获取活动元素； d) 获取最近面板的 id 属性； e) 检查面板名称是否等于页面的面板名称之一，并在该面板的按钮 ID 上调用 .click()。

【讨论】：