如何在ASP.NET MVC3 Razor中创建只读文本框

时间:2012-01-06 17:13:26

标签: c# asp.net-mvc-3 razor html-helper readonly-attribute

如何使用Razor视图引擎在ASP.NET MVC3中创建只读文本框?是否有HTMLHelper方法可以做到这一点?

这样的事情?

@Html.ReadOnlyTextBoxFor(m => m.userCode)

7 个答案:

答案 0 :(得分:226)

@Html.TextBoxFor(m => m.userCode, new { @readonly="readonly" })

欢迎您为此制作HTML帮助程序,但这只是一个HTML属性,与其他任何一样。你会为具有其他属性的文本框制作HTML Helper吗?

答案 1 :(得分:29)

<强>更新 现在,将html属性添加到默认编辑器模板非常简单。意味着而不是这样做:

@Html.TextBoxFor(m => m.userCode, new { @readonly="readonly" })

你只需要这样做:

@Html.EditorFor(m => m.userCode, new { htmlAttributes = new { @readonly="readonly" } })

好处:您无需为模板调用.TextBoxFor等。只需致电.EditorFor


虽然@ Shark的解决方案正常运行并且简单实用,但我的解决方案(我总是使用)就是这个创建一个editor-template来处理readonly属性

  1. EditorTemplates
  2. 中创建名为~/Views/Shared/的文件夹
  3. 创建名为PartialView
  4. 的剃须刀String.cshtml
  5. 使用以下代码填充String.cshtml

    @if(ViewData.ModelMetadata.IsReadOnly) {
        @Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue,
            new { @class = "text-box single-line readonly", @readonly = "readonly", disabled = "disabled" })                                     
    } else {
        @Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue,
            new { @class = "text-box single-line" }) 
    }
    
  6. 在模型类中,将[ReadOnly(true)]属性放在您想要的属性readonly上。

  7. e.g。

    public class Model {
        // [your-annotations-here]
        public string EditablePropertyExample { get; set; }
    
        // [your-annotations-here]
        [ReadOnly(true)]
        public string ReadOnlyPropertyExample { get; set; }
    }
    

    现在您可以简单地使用razor的默认语法:

    @Html.EditorFor(m => m.EditablePropertyExample)
    @Html.EditorFor(m => m.ReadOnlyPropertyExample)
    

    第一个,像这样呈现正常text-box

    <input class="text-box single-line" id="field-id" name="field-name" />
    

    和第二个,将呈现给;

    <input readonly="readonly" disabled="disabled" class="text-box single-line readonly" id="field-id" name="field-name" />
    

    您可以将此解决方案用于任何类型的数据(DateTimeDateTimeOffsetDataType.TextDataType.MultilineText等等。只需创建一个editor-template

答案 2 :(得分:5)

使用TextBoxFor的解决方案没问题,但是如果你不希望看到像EditBox那样的字段(它可能会让用户感到困惑)涉及如下更改:

<强> 1。更改前的剃刀代码

<div class="editor-field">
     @Html.EditorFor(model => model.Text)
     @Html.ValidationMessageFor(model => model.Text)
</div>

<强> 2。更改后

<!-- new div display-field (after div editor-label) -->
<div class="display-field">
    @Html.DisplayFor(model => model.Text)
</div>

<div class="editor-field">            
    <!-- change to HiddenFor in existing div editor-field -->
    @Html.HiddenFor(model => model.Text)
    @Html.ValidationMessageFor(model => model.Text)
</div>

一般来说,此解决方案会禁止编辑,但会显示其值。 不需要代码隐藏修改。

答案 3 :(得分:1)

赞助@Bronek和@Shimmy

之前的答案

这是我在ASP.NET Core中做了同样的事情

<input asp-for="DisabledField" disabled="disabled" />
<input asp-for="DisabledField" class="hidden" />

第一个输入是readonly,第二个输入是将值传递给Controller并隐藏。希望它对使用ASP.Net Core的人有用。

答案 4 :(得分:0)

 @Html.TextBox("Recivers", Model, new { @class = "form-control", style = "width: 300px", @readonly = "readonly" })

答案 5 :(得分:0)

@Html.TextBoxFor(model => model.IsActive, new { readonly= "readonly" })

这对文本框很好。但是,如果您尝试对checkbox执行相同操作,请尝试使用此项

@Html.CheckBoxFor(model => model.IsActive, new { onclick = "return false" })

但是不要使用disable,因为无论是处于检查还是未检查状态,disable都会向服务器发送默认值false。 readonly不适用于复选框和radio buttonreadonly仅适用于text字段。

答案 6 :(得分:0)

您可以使用以下代码将TextBox创建为只读。

方法-1

 @Html.TextBoxFor(model => model.Fields[i].TheField, new { @readonly = true })

方法-2

@Html.TextBoxFor(model => model.Fields[i].TheField, new { htmlAttributes = new {disabled = "disabled"}})