C# Blazor的生长区

我需要一个文本区域，随着行数的增加而增加。一旦行被删除，文本区域将再次缩小。在最佳情况下，具有最大高度

它如何与Javascript协同工作我已经在这里读到了：

但不幸的是，据我所知，Blazor中的文本区域没有“滚动高度”

---

（我的问题与有关，它允许使用C#（+HTML/CSS）进行浏览器前端开发，而不是像WPF/WinForms这样的桌面UI。）

只要知道文本中有多少行，就可以使用TextView上的“行”属性，如下所示

<textarea rows="@Rows"
          @bind-value="MyText"
          @bind-value:event="oninput" />

我从处理对“MyText”的更改的代码中调用CalculateSize，可以是这样的自定义setter，也可以是a.N.Other方法

string _myText;
protected string MyText
{
  get => _myText;
  set
  {
    _myText = value; 
    CalculateSize(value);
  }
}

对于设计方法，可以通过CSS轻松设置最大高度，也可以通过向CalculateSize方法添加另一个约束来设置最大高度

private void CalculateSize(string value)
{
  Rows = Math.Max(value.Split('\n').Length, value.Split('\r').Length);
  Rows = Math.Max(Rows, MIN_ROWS);
  Rows = Math.Min(Rows, MAX_ROWS);
}

---

选择2 如果您想要简单，并且不介意一点内联JS（如果您介意，那么是时候打开JSInterop了……）

---

选择3 如果您确实想使用JSInterop，可以这样做，或者将代码放在JS文件中并包含在页面中

<textarea id="MyTextArea"
      rows="2" 
      placeholder="Sample text."
      @oninput="Resize"></textarea>

<label>This area is @(MyHeight)px</label>
@code
{
[Inject] IJSRuntime JSRuntime { get; set; }
double MyHeight=0;
async Task Resize()
{
    var result = await JSRuntime.InvokeAsync<object>("eval",@"(function() {
            MyTextArea.style.height='auto';
            MyTextArea.style.height=(MyTextArea.scrollHeight)+'px';
            return MyTextArea.scrollHeight;
        })()");
    Double.TryParse(result.ToString(), out MyHeight);
}
}

这个区域是@（我的高度）px
@代码
{
[Inject]IJSRuntime JSRuntime{get；set；}
双MyHeight=0；
异步任务调整大小（）
{
var result=await JSRuntime.InvokeAsync（“eval”，@”（function（）{
MyTextArea.style.height='auto'；
MyTextArea.style.height=（MyTextArea.scrollHeight）+'px'；
返回MyTextArea.scrollHeight；
})()");
Double.TryParse（result.ToString（），out MyHeight）；
}
}

@Oswald您链接的问题与Blazor中控件的大小无关。我也尝试过类似于您在此处描述的解决方案。我还计算了换行数，并从中创建了行。问题是当写一行比TextArea长而没有换行符时。看这里：我真的希望没有JS它也能工作。也许在将来。非常感谢你的帮助！选项2是我的选择。选项2仅在输入时起作用，当textarea以其初始值加载时，它将始终有2行。我还没有找到解决方法。@托克维尔将文本区域中的rows属性改为1，以修复初始两行。我不想找到这个答案，但我喜欢你使用

eval

调用一些javascript，这太好了。谢谢

<textarea 
      rows="2" 
      placeholder="Sample text."
      style="resize:both;"
      oninput="this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px';">
</textarea>

<textarea id="MyTextArea"
      rows="2" 
      placeholder="Sample text."
      @oninput="Resize"></textarea>

<label>This area is @(MyHeight)px</label>
@code
{
[Inject] IJSRuntime JSRuntime { get; set; }
double MyHeight=0;
async Task Resize()
{
    var result = await JSRuntime.InvokeAsync<object>("eval",@"(function() {
            MyTextArea.style.height='auto';
            MyTextArea.style.height=(MyTextArea.scrollHeight)+'px';
            return MyTextArea.scrollHeight;
        })()");
    Double.TryParse(result.ToString(), out MyHeight);
}
}