Cara membuat kotak teks hanya baca di ASP.NET MVC3 Razor

118

Bagaimana cara membuat kotak teks hanya-baca di ASP.NET MVC3 dengan mesin tampilan Razor?

Apakah ada metode HTMLHelper yang tersedia untuk melakukan itu?

Sesuatu seperti berikut ini?

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

Jawaban:

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

Anda dipersilakan untuk membuat Pembantu HTML untuk ini, tetapi ini hanyalah atribut HTML seperti yang lainnya. Apakah Anda akan membuat Pembantu HTML untuk kotak teks yang memiliki atribut lain?


sumber
1
@Shyju Maaf, saya kehilangan @awalan readonlyproperti. Lihat suntingan saya.
7
Di masa mendatang, jika Anda mendapatkan jenis kesalahan apa pun yang menambahkan properti ke argumen objek dinamis, Anda dapat memperbaikinya dengan ekstensi @. Anda biasanya hanya akan melihatnya dengan kata kunci yang cocok dengan atribut HTML (seperti hanya baca, kelas, dll.)
Brad Christie
10
@BradChie: Tidak; Anda hanya perlu @menggunakan atribut yang cocok dengan kata kunci C # .
SLaks
1
@BradChristie: Saya salah membaca komentar Anda ("kata kunci" itu ambigu)
SLaks
1
Jika Anda memiliki beberapa atribut html, Anda dapat melakukan sesuatu seperti:@Html.TextBoxFor(m => m.userCode, new { @readonly="readonly", @class="form-control" })
benscabbia
32

PEMBARUAN: Sekarang sangat mudah untuk menambahkan atribut HTML ke template editor default. Ia tidak pernah melakukan ini:

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

Anda cukup melakukan ini:

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

Manfaat: Anda tidak perlu menelepon .TextBoxFor, dll. Untuk templat. Telepon saja .EditorFor.


Sementara solusi @ Shark berfungsi dengan benar, dan sederhana serta berguna, solusi saya (yang selalu saya gunakan) adalah yang ini: Buat atribut editor-templateyang dapat menanganireadonly :

  1. Buat folder bernama EditorTemplatesdalam~/Views/Shared/
  2. Buat pisau cukur PartialViewbernamaString.cshtml
  3. Isi String.cshtmldengan kode ini:

    @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. Di kelas model, letakkan [ReadOnly(true)]atribut pada properti yang Anda inginkan readonly.

Sebagai contoh,

public class Model {
    // [your-annotations-here]
    public string EditablePropertyExample { get; set; }

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

Sekarang Anda dapat menggunakan sintaks default Razor:

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

Yang pertama membuat normal text-boxseperti ini:

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

Dan yang kedua akan membuat;

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

Anda dapat menggunakan solusi ini untuk semua jenis data ( DateTime, DateTimeOffset, DataType.Text, DataType.MultilineTextdan sebagainya). Buat saja editor-template.

ravy amiry
sumber
2
+1 karena Anda menggunakan "ViewData.ModelMetadata.IsReadOnly". Saya berharap MVC akan memperhitungkan hal-hal ini di versi 4.
cleftheris
@cleftheris baik kita dalam versi 5 sekarang, dan MVC masih tidak mengambilnya;)
ravy amiry
2
@Javad_Amiry - jawaban bagus - Saya telah menerapkannya dan tampaknya berfungsi dengan baik sampai saya mengklik Simpan di halaman Edit Berancah. Kemudian ternyata Properties dengan [ReadOnly (true)] akan menghasilkan NULL yang dikirim ke database alih-alih nilai Properti yang sebenarnya - Pernahkah Anda menemukan ini?
Percy
5

Solusi dengan TextBoxFor tidak apa-apa, tetapi jika Anda tidak ingin melihat bidang seperti EditBox bergaya (mungkin akan sedikit membingungkan pengguna) melibatkan perubahan sebagai berikut:

  1. Kode silet sebelum perubahan

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

    <!-- 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>

Umumnya, solusi ini mencegah bidang dari pengeditan, tetapi menunjukkan nilainya. Tidak perlu modifikasi di belakang kode.

Bronek
sumber
1
Saya pikir memiliki CSS untuk kelas editor-field dan display-field di sini mungkin sangat membantu.
DOK
Apa yang Anda maksud dengan "solusi ini menonaktifkan pengeditan," (tampaknya tidak bisa dimengerti)? Harap balas dengan mengedit jawaban Anda , bukan di sini di komentar (jika perlu).
Peter Mortensen
3

Dengan kredit untuk jawaban sebelumnya oleh @Bronek dan @Shimmy:

Ini seperti saya telah melakukan hal yang sama di ASP.NET Core:

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

Masukan pertama hanya-baca dan yang kedua meneruskan nilai ke pengontrol dan disembunyikan. Saya berharap ini akan bermanfaat bagi seseorang yang bekerja dengan ASP.NET Core.

Adithya Baddula
sumber
0
 @Html.TextBox("Receivers", Model, new { @class = "form-control", style = "width: 300px", @readonly = "readonly" })
Hossein Dahr
sumber
1
Penjelasannya akan teratur.
Peter Mortensen
0
@Html.TextBoxFor(model => model.IsActive, new { readonly= "readonly" })

Ini bagus untuk kotak teks. Namun, jika Anda mencoba melakukan hal yang sama untuk checkboxkemudian coba gunakan ini jika Anda menggunakannya:

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

Tetapi jangan gunakan disable, karena nonaktifkan selalu mengirimkan nilai default falseke server - baik dalam status dicentang atau tidak dicentang. Dan readonlytidak berfungsi untuk kotak centang dan radio button. readonlyhanya bekerja untuk textladang.

gdmanandamohon
sumber
Bagaimana dengan daftar drop down?
pengguna3020047
Semoga ini bisa membantu stackoverflow.com/questions/1636103/…
gdmanandamohon
0

Anda dapat menggunakan kode di bawah ini untuk membuat TextBox sebagai read-only.

Metode 1

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

Metode 2

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