如何从剃须刀页面获取 html 表单值？

Posted 2023-03-27

【中文标题】如何从剃须刀页面获取 html 表单值？

【英文标题】：How to get the html form value from razor page?

【发布时间】：2022-01-16 22:53:57

【问题描述】：

我有一个表单，其中包含 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>

【参考方案1】：

如何根据选中的复选框获取名称的 id

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

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

1.在表格末尾添加两个<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 Demo如下。

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

结果：

【参考方案2】：

例如创建一个简单的 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>
    

【讨论】：

对，但是如何获取带有键映射值的复选框。我们需要处理一些js代码来获取复选框后面的值吗？