Question

所以我有一张表格。我正在使用标签助手。表单只有一个文本输入，我正在尝试使用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);
}

Answer 1

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

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

<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>

通过javascript调用表单提交时，Tag Helpers不绑定数据

1 个答案: