如何从 razor 页面获取 html 表单值？

Question

我有一个表单，其中包含 Name 和 isVisible 作为复选框。数据从 api 加载。现在我想编辑名称（部分名称）的可见性状态。我有可见性的复选框，这没问题，但是名称如何根据选中的复选框获取名称的 ID。

html代码：

<div class="col-md-12 bg-white p-5 rounded-8">
    <div class="col-md-12 text-right mt-3">
        <button type="submit" id="btnSaveSectionVisibility" value="Save" class="btn btn-custom">Save</button>
        <a class="btn btn-custom" id="lnksectionVisibileCancel">Cancel</a>
    </div>
    <form class="row row-margin-zero needs-validation" asp-controller="Group" asp-action="AddVisibility" method="Post" id="frmAddSectionVisibility" autocomplete="off" novalidate>
        <table class="research" border="1" style="background-color:azure;text-transform:full-width">
            <tbody>
                @foreach (var groups in Model)
                {

                    <tr class="accordion" style="cursor:pointer">
                        <td colspan=@Model.Count.ToString() ;>@groups.Name</td>
                    </tr>
                }

                <tr>

                    <td><strong>Section</strong></td>
                    <td><strong>Visibility</strong></td>

                </tr>

                @foreach (var groups in Model)
                {
                    for (int i = 0; i < groups.SectionRespnses.Count; i++)
                    {
            <tr>
                <td>@groups.SectionRespnses[i].Name</td>
                <td><input type="text" class="chk" name="name4" id="groups.SectionRespnses[i].id"/>@groups.SectionRespnses[i].Name</td>
                <td><input type="checkbox" class="chk" name="name4" /></td>
            </tr>
                    }

                 }

            </tbody>
        </table>
    </form>

</div>

javascript:

<script>
    $(function () {
        $(".research tr:not(.accordion)").hide();
        $(".research tr:first-child").show();

        $(".research tr.accordion").click(function () {
            $(this).nextAll("tr").fadeToggle(500);
        }).eq(0).trigger('click');
    });
    $("#btnSaveSectionVisibility").click(function () {
        var form = $("#frmAddSectionVisibility");
        alert(form);
        //if (form.valid()) {

        var url = form.attr("action");
       
        var lists = [];
        $('.chk:checked').each(function () {
            var data = [
                $(this).val()
            ]
            lists.push(data);
        });


        // var data = form.serialize()

        var sectionCreateRequest = {
            GroupId: $("#hdnGroupId").val(),
            SectionIds: lists
        }
        $.ajax({
            type: 'Post',
            url: url,
            data: sectionCreateRequest
        }).done(function (response) {
            if (response.toLowerCase().indexOf("success") >= 0) {
                toastr.success(response);

                /* GetAllGroups();*/
                //LoadRolesTable()
            }
            else
                toastr.info(response);
        });
    });

</script>

Answer 1

例如创建一个简单的 HTML 表单：

在Form.cshtml

<!DOCTYPE html>
<html>
    <head>
        <title>Customer Form</title>
    </head>
    <body>
      <form method="post" >
        <fieldset>
          <legend>Add Customer</legend>
          <div>
            <label for="CompanyName">Company Name:</label>
            <input type="text" name="CompanyName" value="" />
          </div>
          <div>
            <label for="ContactName">Contact Name:</label>
            <input type="text" name="ContactName" value="" />
          </div>
          <div>
            <label for="Employees">Employee Count:</label>
            <input type="text" name="Employees" value="" />
          </div>
          <div>
            <label>&nbsp;</label>
            <input type="submit" value="Submit" class="submit" />
          </div>
        </fieldset>
      </form>
    </body>
</html>

正在从表单读取用户输入：

要处理表单，您需要添加代码来读取提交的字段值并对其进行处理。此过程向您展示如何读取字段并在页面上显示用户输入。

在 Form.cshtml 文件的顶部，输入以下代码：

@{
    if (IsPost) {
        string companyname = Request.Form["companyname"];
        string contactname = Request.Form["contactname"];
        int employeecount = Request.Form["employees"].AsInt();

        <text>
          You entered: <br />
          Company Name: @companyname <br />
          Contact Name: @contactname <br />
          Employee Count: @employeecount <br />
        </text>
    }
}

Answer 2

how to get the id of the name against the checkbox selected

你的意思是你想要在选中复选框时获取文本框的id属性吗？

获取textbox的id属性，我们可以使用checkbox的点击事件，勾选checkbox后，我们可以找到它的父元素（<tr>元素），然后我们可以根据它找到textbox类型（因为所选行中只有一个文本框），并获取 id 属性。

1.Add两个<div>形式的结尾。它们用于显示选择的id值。

    <tr>                
       <td>@groups.SectionRespnses[i].Name</td>
       <td><input type="text" class="chk" name="name4" id="@groups.SectionRespnses[i].id"/>@groups.SectionRespnses[i].Name</td>                                       
       <td><input type="checkbox" class="chk" name="name4" /></td>                   
    </tr> 



 <div id="selectedLabel" style="display:none"></div>
 <span id="selected"></span>

[注意]：绑定id属性时，代码应该是id="@groups.SectionRespnses[i].id"

2.js 演示如下

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(function () {
    //get all 
        var $all = $('.chk');
    //get the area to write the results 
    var $selectedListing = $('#selected');
    //get the label
    var $selectedLabel = $('#selectedLabel');

    //when you click a checkbox, do the logic
    $all.on('click', function () {
        //set the content of the results
        $selectedListing.html(
            //only return those that are checked
            $all.filter(':checked').map(function (index, checkbox) {
                //return a id of the name against the checkbox selected
                var id = $(this).parent().parent().find("input[type='text']").attr("id");
                return id;
            }).get() //get  a id of the name against the checkbox selected
        );

    //hide the label if no checkboxes are selected
    if ($selectedListing.text().trim().length) {
        $selectedLabel.show();
        } else {
        $selectedLabel.hide();
        }
   });
});
</script>

结果：

如何从 razor 页面获取 html 表单值？

How to get the html form value from razor page?

html

asp.net-core

razor-pages