วิธีสร้างกล่องข้อความแบบอ่านอย่างเดียวใน ASP.NET MVC3 Razor

ฉันจะสร้างกล่องข้อความแบบอ่านอย่างเดียวใน ASP.NET MVC3 ด้วย Razor view engine ได้อย่างไร

มีวิธี HTMLHelper ที่สามารถทำได้หรือไม่?

สิ่งต่อไปนี้?

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

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

คุณสามารถสร้างตัวช่วย HTML สำหรับสิ่งนี้ได้ แต่นี่เป็นเพียงแอตทริบิวต์ HTML เหมือนที่อื่น ๆ คุณจะสร้าง HTML Helper สำหรับกล่องข้อความที่มีคุณสมบัติอื่น ๆ หรือไม่?

อัปเดต: ตอนนี้การเพิ่มแอตทริบิวต์ 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ใน~/Views/Shared/
2. สร้างมีดโกนPartialViewชื่อString.cshtml

3. กรอก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" })
   }

4. ในชั้นเรียนรุ่นใส่แอตทริบิวต์เกี่ยวกับคุณสมบัติที่คุณต้องการที่จะเป็น[ReadOnly(true)]readonly

ตัวอย่างเช่น,

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

คุณสามารถใช้วิธีนี้สำหรับประเภทของข้อมูลใด ๆ ( DateTime, DateTimeOffset, DataType.Text, DataType.MultilineTextและอื่น ๆ ) เพียงแค่สร้างeditor-templateไฟล์.

วิธีแก้ปัญหาด้วย 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>

โดยทั่วไปโซลูชันนี้จะป้องกันไม่ให้มีการแก้ไขฟิลด์ แต่แสดงมูลค่าของมัน ไม่จำเป็นต้องมีการแก้ไขโค้ดหลัง

พร้อมเครดิตสำหรับคำตอบก่อนหน้าโดย @Bronek และ @Shimmy:

นี่เหมือนกับว่าฉันได้ทำสิ่งเดียวกันใน ASP.NET Core:

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

อินพุตแรกเป็นแบบอ่านอย่างเดียวและอินพุตที่สองส่งผ่านค่าไปยังคอนโทรลเลอร์และถูกซ่อนไว้ ฉันหวังว่ามันจะเป็นประโยชน์สำหรับคนที่ทำงานกับ ASP.NET Core

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

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

ใช้ได้ดีสำหรับกล่องข้อความ อย่างไรก็ตามหากคุณพยายามทำเช่นเดียวกันให้checkboxลองใช้สิ่งนี้หากคุณกำลังใช้:

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

แต่อย่าใช้disableเพราะปิดใช้งานจะส่งค่าเริ่มต้นfalseไปยังเซิร์ฟเวอร์เสมอไม่ว่าจะอยู่ในสถานะที่เลือกหรือไม่เลือกก็ตาม และreadonlyไม่ทำงานสำหรับช่องทำเครื่องหมายและradio button. readonlyใช้ได้กับtextฟิลด์เท่านั้น

คุณสามารถใช้โค้ดด้านล่างเพื่อสร้างกล่องข้อความเป็นแบบอ่านอย่างเดียว

วิธีที่ 1

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

วิธีที่ 2

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