Perbedaan antara Html.TextboxFor dan Html.EditorFor di MVC dan Razor


170

Mengapa secara default ini diubah saat menambahkan tampilan "edit" baru? Apa keuntungan bila menggunakan EditorFor()vs TextboxFor()?

aku menemukan ini

Secara default, buat dan Edit perancah sekarang menggunakan helper Html.EditorFor bukan helper Html.TextBoxFor. Ini meningkatkan dukungan untuk metadata pada model dalam bentuk atribut anotasi data ketika kotak dialog Tambah Tampilan menghasilkan tampilan.


5
apakah ada yang punya contoh bagaimana ini dilakukan? misalnya menulis editor untuk DatePicker?
ShaneKm

Jawaban:


166

Keuntungannya EditorForadalah bahwa kode Anda tidak terikat dengan <input type="text". Jadi, jika Anda memutuskan untuk mengubah sesuatu ke aspek bagaimana kotak teks Anda ditampilkan seperti membungkusnya di dalam, divAnda cukup menulis templat editor khusus ( ~/Views/Shared/EditorTemplates/string.cshtml) dan semua kotak teks di aplikasi Anda akan secara otomatis mendapat manfaat dari perubahan ini sedangkan jika Anda telah melakukan hardcode pada Html.TextBoxForAnda harus memodifikasinya di mana-mana. Anda juga bisa menggunakan Anotasi Data untuk mengontrol cara ini diberikan.


Ada bug, mungkin dalam versi lama. EditorFor tidak mengenali 'ganda'. Untuk 'panjang' itu menganggapnya sebagai 'int' dan langkah = "0,01" tidak berfungsi dalam atribut jadi saya menggunakan TextBoxFor dan menambahkan @ type = 'number' @ step = "0,01" sehingga berhasil
Charlie

129

TextBoxFor : Ini akan merender seperti elemen html input teks yang sesuai dengan ekspresi yang ditentukan. Dengan kata sederhana itu akan selalu ditampilkan seperti kotak teks input terlepas dari tipe properti yang semakin terikat dengan kontrol.

EditorFor : Kontrol ini agak pintar. Ini membuat markup HTML berdasarkan tipe data properti. Misalnya misalkan ada properti boolean dalam model. Untuk merender properti ini dalam tampilan sebagai kotak centang, kami dapat menggunakan CheckBoxFor atau EditorFor. Keduanya akan menghasilkan markup yang sama.

Apa keuntungan menggunakan EditorFor?

Seperti yang kita ketahui, tergantung pada tipe data properti itu menghasilkan markup html. Jadi anggaplah besok jika kita mengubah tipe data properti dalam model, tidak perlu mengubah apa pun dalam tampilan. Kontrol EditorFor akan mengubah markup html secara otomatis.


15
jawaban luar biasa dan sederhana yang mudah diserap bahkan oleh seorang pemula.
Raja


Apakah pernah ada kasus di mana Anda harus benar-benar menggunakan TextBoxFor?
eaglei22

55

The Html.TextboxForselalu menciptakan sebuah textbox ( <input type="text" ...).

Sementara EditorFor melihat jenis dan informasi meta, dan dapat membuat kontrol lain atau templat yang Anda berikan.

Misalnya untuk properti DateTime Anda bisa membuat templat yang menggunakan DatePicker jQuery.


12
Ada Contoh tentang cara menerapkan jepery datepicker menggunakan editfor?
Peru

2
terima kasih telah menyederhanakan perbedaan dengan menggunakan kasing waktu.
Raja

1
@Peru, disini atau disini adalah bagaimana implement jquery datepickerdan menggunakannya dengan EditorForini di sini
shaijut

8

Ini adalah salah satu perbedaan mendasar yang tidak disebutkan dalam komentar sebelumnya:
Readonlyproperti akan bekerja dengan kotak teks dan tidak akan bekerja dengan EditorFor.

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

Atas karya kode, dimana dengan mengikuti Anda tidak dapat membuat kontrol untuk dibaca .

@Html.EditorFor(model => model.DateSoldOn, new { @readonly = "readonly" })

16
Anda dapat membuat EditorFor dibaca hanya menggunakan sintaks berikut: @ Html.EditorFor (model => model.DateSoldOn, new {htmlAttributes = new {@readonly = "readonly"}})
Doug Knudsen

4

Ada juga sedikit perbedaan dalam output html untuk tipe data string.

Html.EditorFor:  
<input id="Contact_FirstName" class="text-box single-line" type="text" value="Greg" name="Contact.FirstName">

Html.TextBoxFor:
<input id="Contact_FirstName" type="text" value="Greg" name="Contact.FirstName">

2
itu benar-benar jawaban yang salah, karena perbedaan utama adalah bahwa Texbox mengembalikan input dan editor untuk mengembalikan template Anda di mana input adalah template default untuk editorfor.
Artem G
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.