javascript - 单击 .NET Core 中的单选按钮时 FORM 未提交

Question

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

我正在使用 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>

Javascript：

@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会打印消息

我不太明白我做错了什么！！！

项目链接
https://github.com/dev-agk/WebFormList

.NET FIDDLE
dotnetfiddle.net/8IzLE8

标签： javascriptjqueryasp.net.netasp.net-core

Answer 1

您的代码中有几个错误：

首先，你的代码

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

会被渲染成

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

注意action属性xx不是xxx/xx. 我想你应该使用asp-action和asp-controller来修复你的代码，例如：

<form id="myform" asp-action="MyTestActionName" asp-controller="MyTestControlerName" method="post">

其次，有两种具有相同of 的多种形式，idmyform最好为 id 分配不同的名称或id使用删除属性$(this).closest("form").submit()：

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

最后，当您使用以下方式编写inputTagHelper时asp-for：

<input type="hidden" asp-for="@Model[item].a" />
<input type="hidden" asp-for="@Model[item].b" />
...

它将被渲染成类似的东西：

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

请注意，名称以 . 为前缀[1].。这会使绑定变得困难。因为您想将单个项目提交到服务器，所以我个人建议您应该通过替换您的来重命名它：@Model[item].@item.

@for( var i = 0; i < Model.Count(); i++ )
{
    变量项 = 模型 [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 " />
        ...