Javascript 在.NET Core中单击单选按钮时未提交表单

我正试图在切换（单选按钮）上提交表单

我正在使用JQuery提交如下表单：

        @for (var item = 0; item < Model.Count(); item++)
        {
        <form id="myform" action="xx" controller="xxx" method="post">
            <input type="hidden" asp-for="@Model[item].a" />
            <input type="hidden" asp-for="@Model[item].b" />
            <input type="hidden" asp-for="@Model[item].c" />
            <input type="hidden" asp-for="@Model[item].d"  />
            <tr>
                <td>
                    @Html.DisplayFor(model => model[item].a)
                </td>
                <td>
                    @Html.DisplayFor(model => model[item].b)
                </td>
                <td>
                    @Html.DisplayFor(model => model[item].c)
                </td>
                <td>
                    @if(Model[item].istrue)
                    {
                        <input asp-for="@Model[item].istrue" type="radio" value="@Model[item].istrue" class="form-check form-control"/> @Model[item].istrue
                        <input asp-for="@Model[item].istrue" type="radio" value="False" class="form-check form-control" />
                    }
                    else  
                    {
                        <input asp-for="@Model[item].istrue" type="radio" value="@Model[item].istrue" class="form-check form-control" /> @Model[item].istrue
                        <input asp-for="@Model[item].istrue" type="radio" value="True" class="form-check form-control" />
                    }
                </td>
            </tr>
        </form>

@section Scripts {
        <script type="text/javascript">
    $('input[type=radio]').on('click', function () {
        console.log("trigger works");
        $(this).closest("form").submit();
    });
</script>
}

[HttpPost]
public IActionResult someaction(somemodel s)
{
--
--
}

表格：

        @for (var item = 0; item < Model.Count(); item++)
        {
        <form id="myform" action="xx" controller="xxx" method="post">
            <input type="hidden" asp-for="@Model[item].a" />
            <input type="hidden" asp-for="@Model[item].b" />
            <input type="hidden" asp-for="@Model[item].c" />
            <input type="hidden" asp-for="@Model[item].d"  />
            <tr>
                <td>
                    @Html.DisplayFor(model => model[item].a)
                </td>
                <td>
                    @Html.DisplayFor(model => model[item].b)
                </td>
                <td>
                    @Html.DisplayFor(model => model[item].c)
                </td>
                <td>
                    @if(Model[item].istrue)
                    {
                        <input asp-for="@Model[item].istrue" type="radio" value="@Model[item].istrue" class="form-check form-control"/> @Model[item].istrue
                        <input asp-for="@Model[item].istrue" type="radio" value="False" class="form-check form-control" />
                    }
                    else  
                    {
                        <input asp-for="@Model[item].istrue" type="radio" value="@Model[item].istrue" class="form-check form-control" /> @Model[item].istrue
                        <input asp-for="@Model[item].istrue" type="radio" value="True" class="form-check form-control" />
                    }
                </td>
            </tr>
        </form>

@section Scripts {
        <script type="text/javascript">
    $('input[type=radio]').on('click', function () {
        console.log("trigger works");
        $(this).closest("form").submit();
    });
</script>
}

[HttpPost]
public IActionResult someaction(somemodel s)
{
--
--
}

我已经在应该触发的控制器操作上放置了断点

控件不转到操作

但是，当切换时，会打印

console.log

消息

我不太明白我做错了什么

项目链接

.NET小提琴

---

嗨@Abhilash Gopalakrishna

我建议做两个改变 1：为每个项目创建局部视图（包含每个项目的表单） 2：标识每个myform元素以使单选按钮触发其正确项的想法。

根据您的业务，Guid可以是模型项的ID

---

你能看一下我的演示吗：

你的代码中有几个错误：

首先，你的代码

<form id="myform" action="xx" controller="xxx" method="post">

其次，有两个多个表单具有相同的

id

的

myform

，最好为id指定不同的名称，或者使用

$（this）删除
id
属性。最近的（“表单”）。submit（）

：

@section Scripts {
    <script type="text/javascript">
        $('input[type=radio]').on('click', function () {
            console.log("trigger works");
            $(this).closest("form").submit();
        });
    </script>
}

它将被渲染为如下内容：

<input type="hidden" id="z1__a" name="[1].a" value="a1">
<input type="hidden" id="z1__a" name="[1].b" value="b1">
...

---

您是否检查了浏览器控制台是否有任何错误？是的，没有控制台错误。您是否还确认了浏览器网络选项卡未触发POST请求？我的理解是，最多可能发生的情况是，它未获取元素或元素值为空。两者都需要显示控制台错误。我会错过一些明显的东西吗？@MohsinMehmood yup确认没有触发POST请求无法访问演示：）这是一种保持代码整洁的好方法，我相信这会因为局部视图的控制循环而变得更容易，但我仍然面临同样的错误，所以我现在不会接受答案，但这真是一个很棒的方法！！！谢谢：）@tuwnv2t对上面的

@部分脚本{$（'input[type=radio]'）做了一些更改。在（'click'，function（）{console.log（$（this）.closest（'form'）.serialize（）；$（this）.closest（'form'）。submit（function（e）{alert（“submitted”）；}；}

部分视图中的脚本不是约定的，在索引中添加了上面的内容，这里是我们得到的表单值，但是表单没有提交。@tuwnv2t借用了您的项目，希望可以：）尝试了上面的内容和@tuanv2t的建议，但没有成功触发onclick事件，但是表单没有提交

@section Scripts{$（'input[type=radio]'）.on（'change'，function（e）{console.log（“触发器工作”）；console.log（$（this.closest（'form'）.serialize（）；$（this.closest（'form'））.submit（function（e）{e.preventDefault（）；alert（“submitted”）；）}）；}

尝试了上述序列化，但返回空值string@AbhilashGopalakrishna原因是您误解了

submit（）

方法。在您的代码中，您实际上是通过

.submit（function（）{…}）绑定了
submit
事件处理程序

，如果您想触发提交事件，您需要将其更改为

.submit（）

，不带任何参数。@AbhilashGopalakrishna我测试您的代码并创建一个PR，如果您有任何进一步的问题，请随时更新我。感谢上述内容，我不知道，但问题是

.submit（）

未触发事件处理程序 @for(var i = 0; i < Model.Count(); i++) { var item = Model[i]; <div style="border: 1px solid ;"> <form id="myform" asp-action="Test" asp-controller="Home" method="post"> <input type="hidden" asp-for="@item.a" /> <input type="hidden" asp-for="@item.b" /> <input type="hidden" asp-for="@item.c" /> <input type="hidden" asp-for="@item.d" /> ...