asp.net-mvc – MVC3,Razor,Html.TextAreaFor()：调整高度以适应

发布时间：2020-12-16 07:28:10 所属栏目：asp.Net 来源：网络整理

导读：我目前在视图中使用以下代码来调整 Html.TextAreaFor()的高度以适应其内容.有没有明显更好的 /更简洁的方法来做到这一点？ ...int width = 85;int lines = 1;string[] arr = Model.Text.Split(new string[] {"rn","n","r"},StringSplitOptions.None);for

我目前在视图中使用以下代码来调整 Html.TextAreaFor()的高度以适应其内容.有没有明显更好的& /更简洁的方法来做到这一点？

...
int width = 85;
int lines = 1;
string[] arr = Model.Text.Split(new string[] {"rn","n","r"},StringSplitOptions.None);
foreach (var str in arr)
{
    if (str.Length / width > 0)
    {
        lines += str.Length / width + (str.Length % width <= width/2 ? 1 : 0);
    }
    else
    {
        lines++;
    }
}
@Html.TextAreaFor(m => m.Text,new
                  {
                      id = "text",style = "width:" + width + "em; height:" + lines + "em;"
                  })

...

解决方法

代码看起来很好.一种可能的改进是将其外部化为可重用的帮助程序,以避免污染视图：

public static class TextAreaExtensions
{
    public static IHtmlString TextAreaAutoSizeFor<TModel,TProperty>(
        this HtmlHelper<TModel> htmlHelper,Expression<Func<TModel,TProperty>> expression,object htmlAttributes
    )
    {
        var model = ModelMetadata.FromLambdaExpression(expression,htmlHelper.ViewData).Model;
        var text = model as string ?? string.Empty;
        int width = 85;
        int lines = 1;
        string[] arr = text.Split(new string[] { "rn","r" },StringSplitOptions.None);
        foreach (var str in arr)
        {
            if (str.Length / width > 0)
            {
                lines += str.Length / width + (str.Length % width <= width / 2 ? 1 : 0);
            }
            else
            {
                lines++;
            }
        }
        var attributes = new RouteValueDictionary(htmlAttributes);
        attributes["style"] = string.Format("width:{0}em; height:{1}em;",width,lines);
        return htmlHelper.TextAreaFor(expression,attributes);
    }
}

并在视图中：

@Html.TextAreaAutoSizeFor(m => m.Text,new { id = "text" })

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!