不允许发布表单的按钮组答案

【问题标题】：Button group not allowing form to be posted不允许发布表单的按钮组
【发布时间】：2020-07-10 18:25:29
【问题描述】：

我可以选择表单中的单选按钮，但我将它们用作按钮组。但是我想将选择的值传递回控制器。但它根本没有发回它只是坐在那里，为什么 btn 组会让表单以这种方式运行。

@using (Html.BeginForm("Create", "Relationships", FormMethod.Post, null)) { 

    <div class="btn-group" data-toggle="buttons">

        <div class="btn-group type-select pull-left top-buffer add-on btn-group-lg" data-toggle="buttons">
            <label class="btn btn-primary">
                <input type="radio" name="RealtionShipType" data-relationshiptype="1" style="display:none" value="1">
                <i class="fa fa-person-booth fa-4x"></i>
            </label>

            <label class="btn btn-primary">
                <input type="radio" name="RealtionShipType" data-relationshiptype="1" value="2">
                <i class="fa fa-ship fa-4x"></i>
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="RealtionShipType" Value="3">
                <i class="fa fa-location-arrow fa-4x"></i>
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="RealtionShipType" data-relationshiptype="1" value="4">
                <i class="fa fa-brain fa-4x"></i>
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="RealtionShipType" data-relationshiptype="1" value="5">
                <i class="fa fa-car fa-4x"></i>
            </label>

            <label class="btn btn-primary">
                <input type="radio" name="RealtionShipType" style="display:none" value="5">
                <i class="fa fa-mobile fa-4x"></i>
            </label>

        </div>
        <input type="submit" class="btn-success" value="Save And Edit">


    </div>
    }

我已经为它添加了一个 .net fiddle 作为体验，表单根本不会发布。

https://dotnetfiddle.net/FMiprT

【问题讨论】：

标签： c# html twitter-bootstrap asp.net-core razor

【解决方案1】：

外部按钮组 div：

<div class="btn-group" data-toggle="buttons">
...
</div>

似乎是多余的，但它也阻止了您的“提交”按钮的单击事件触发（有关详细信息，请参阅https://getbootstrap.com/docs/4.0/components/buttons/#toggle-states）。您不需要将提交按钮置于切换模式，只有单选按钮需要这个 - 而且您已经有另一个 div 围绕这些按钮来执行此操作。

只需删除该 div，按钮就会再次起作用。

演示：https://dotnetfiddle.net/qeRX9I

【讨论】：

我最初让它从图像中隐藏单选按钮，因为如果没有它，它就会出现
不，不是。你到底是什么意思？当我在 dotnetfiddle 中更改它时，它对外观没有任何影响。不知道你说的是什么图片。
我无法在 dotnet fiddle 中配置好字体，所以不知道如何向你展示
好的。但是我还是不太明白你的意思。删除此 div 是否会导致您出现问题？究竟出了什么问题？也许截图会有所帮助。

【解决方案2】：

同意 ADyson，看来问题与外部按钮组 div 有关。删除后，我们就可以提交表单了。

如果您不想删除外部按钮组 div，作为一种解决方法，您可以考虑使用 JQuery 方法提交表单。

这样的代码：

@using (Html.BeginForm("Create", "Home", FormMethod.Post, new { @class="mainform" }))
{

    <div class="btn-group" data-toggle="buttons">

        <div class="btn-group type-select pull-left top-buffer add-on btn-group-lg" data-toggle="buttons">
            ...
        </div>
        <input type="submit" class="btn-success" value="Save And Edit"> 
    </div>
}

JavaScript 代码：

<script type="text/javascript">
    jQuery(document).ready(function () {
        $(".btn-success").click(function () {
            //find the form and submit
            $(".mainform").submit();
        });
    });
</script>

【讨论】：