通过 javascript 调用表单提交时标签助手不绑定数据答案

【问题标题】：Tag Helpers not binding data when calling form submit via javascript通过 javascript 调用表单提交时标签助手不绑定数据
【发布时间】：2016-11-20 13:54:34
【问题描述】：

所以我有一个表格。我正在使用标签助手。该表单只有一个文本输入，我正在尝试使用 Bootstrap “input-group-addon” div 作为这个小表单的提交按钮。

我遇到了奇怪的行为。如果我只是在输入内容后按下回车键，数据就会很好地绑定到控制器操作中。

但是，如果我将 onclick 侦听器附加到 div，并运行 getElementById('Form').submit();，当我单击 div 时，它仍会将我带到控制器操作，但没有数据绑定到模型的传入。

剃刀形态：

<form asp-controller="Search" asp-action="HomeBuyersSearchSubmit" id="Home_Buyers_Search_Form">
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <div class="input-group">
                    <input asp-for="Query" class="form-control" placeholder="City, Neighborhood, Address, Postal Code or MLS #" />
                    <div onclick="javascript: document.getElementById('Home_Buyers_Search_Form').submit();" class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
                </div>
            </div>   
        </div>
    </div>
</form>

控制器动作：

[HttpPost]
public IActionResult HomeBuyersSearchSubmit(SearchFilter filter)
{
     return RedirectToAction("Index", filter);
}

【问题讨论】：

标签： javascript twitter-bootstrap-3 asp.net-core-mvc

【解决方案1】：

我找到了解决办法，但我仍然想知道发生了什么。

对于那些感兴趣的人，我所做的是将“input-group-addon”更改为一个按钮，并对填充和边距进行了一些细微的修改，以使该按钮看起来像 div 对应项。这也需要 Bootstrap 在表单上的“form-inline”。数据绑定现在按预期工作。

<form asp-controller="Search" asp-action="HomeBuyersSearchSubmit" id="Home_Buyers_Search_Form" class="form-inline">
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                    <input asp-for="Query" class="form-control" placeholder="City, Neighborhood, Address, Postal Code or MLS #" />
                    <button type="submit" class="input-group-addon"><i class="glyphicon glyphicon-search"></i></button>
            </div>   
        </div>
    </div>
</form>

【讨论】：