如果在foreach循环下动态生成Textarea不止一次，如何在Razor（blazor）组件中获取Textarea值

Posted 2023-03-05

【中文标题】如果在foreach循环下动态生成Textarea不止一次，如何在Razor（blazor）组件中获取Textarea值

【英文标题】：How to get Textarea values in Razor(blazor) component, if Textarea is generated under foreach loop dynamically for more then once

【发布时间】：2020-04-12 04:22:12

【问题描述】：

如果 Textarea 在 foreach 循环下动态生成不止一次，任何人都可以帮助从 Razor 组件获取 Textarea 值。

我已尝试使用 @bind-Value and value，但仍然无法单独获取所有 Textareas 值。

Razor component code
<EditForm Model="@userans" OnValidSubmit="@oninput">
    <DataAnnotationsValidator />
    <h3>Test </h3>


    @if (Questiontable == null)
    

        <p><em>Loading...</em></p>
    
    else
    
        <table class="table">
            <thead>
                <tr>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Questiontable[0].Questiondata)
                
                    <tr>
                        <td>@item.Question</td>
                    </tr>
                    <tr>
                        <th>
                            **<textarea id="TextArea1" rows="2" cols="20" @bind="@userans.answers"></textarea>**
                        </th>
                    </tr>
                
            </tbody>
        </table>
        <div align="center">
            <button class="btn btn-primary" type="submit" @onclick="btnnextclick">Next</button>
        </div>
    
</EditForm>

Razor 组件正在加载来自数据库的数据并生成与数据库记录一样多的 Textarea，但一旦我更新 Textarea，我需要获取不同 Textarea 中可用的所有值。

【问题讨论】：

userans.answer 的类型是什么，IMO，它应该是一个列表，如果您将其设置为字符串，这将是您无法单独获取所有 Textareas 值的原因。

@XingZou 你是对的，userans.answer 是类的属性，我现在使用 List 并且它的工作，。

【参考方案1】：

任何时候你想根据输入的动态数量来获取输入，你应该实例化一个数组或列表。 然后，对于生成标记的循环中的每次迭代，将一个实例添加到列表中，然后将输入绑定到数组中输入实例的索引值。

我之前没有使用过 blazor，所以请不要在语法上引用我，但这个总体思路应该是您正在寻找的：

@
    List<string> myInputs = new List<string>();
 
@for (int i = 0; i < Questiontable[0].Questiondata.length; i++)
    myInputs.Add(string.Empty);
    <th>
    <textarea id="TextArea" rows="2" cols="20" @bind="@myInputs[i]"></textarea>
    </th>

 

希望对您有所帮助！

【参考方案2】：

问题是你的每一个文本区域都绑定到同一个userans.answers

您可以执行我刚刚测试过的类似操作：

 @page  "/test-loop"

<h3>TestLoop</h3>
@foreach (var test in TestList)

    <div>Id: @test.Id</div>
    <textarea @bind="test.TextAreaValue">

    </textarea>



@* To show it's working: *@/
@foreach (var test in TestList)

    <div>Id: @test.Id</div>
    @test.TextAreaValue

<br />

@* Get The values on an event test *@
<button @onclick="ButtonClicked">
    Test
</button>
@code 

    List<TestObject> TestList = new List<TestObject>();

    protected override void OnInitialized()
    
        base.OnInitialized();
        TestList.Add(new TestObject()
        
            Id = 1
        );
        TestList.Add(new TestObject()
        
            Id = 2
        );
        TestList.Add(new TestObject()
        
            Id = 3
        );
    

    public void ButtonClicked()
    
        //TestList has the values of each textarea in it
    

    public class TestObject
    
        public int Id  get; set; 
        public string TextAreaValue  get; set; 
    

【讨论】：

谢谢@kyle，它起作用了，唯一的问题是我使用的是类而不是 List.现在我已将课程更改为列表。您能否解释一下，为什么它不能与 Class 一起使用？

因为必填字段验证器在这种情况下不起作用，对吗？

如果将它们全部绑定到一个类，那么每个输入都绑定到同一个对象。如果将它们全部存储为类列表，则每个输入都绑定到一个单独的类。