ASP.NET MVC

Lớp HtmlHelper trong ASP.NET MVC

Posted on by nvtgroup
15
Dec

Trong phần này, bạn sẽ tìm hiểu HtmlHelper trong ASP.NET MVC là gì và cách sử dụng chúng trong Razor View.

Lớp HtmlHelper tạo các phần tử HTML bằng cách sử dụng đối tượng lớp Model trong Razor View.

Nó liên kết đối tượng Model với các phần tử HTML để hiển thị giá trị của các thuộc tính Model trong các phần tử HTML.

Nó cũng sẽ gán giá trị của các phần tử HTML cho các thuộc tính Model khi gửi biểu mẫu tới web server.

Vì vậy, luôn luôn sử dụng lớp HtmlHelper trong Razor View thay vì viết các thẻ html thủ công.

Hình dưới đây cho thấy việc sử dụng lớp HtmlHelper trong Razor View.

Như bạn có thể thấy trong hình trên, @Html là một đối tượng của lớp HtmlHelper. (Ký tự @ được sử dụng để truy cập đối tượng phía máy chủ theo cú pháp Razor).

Html là một thuộc tính kiểu HtmlHelper của lớp WebViewPage. ActionLink() và DisplayNameFor() là các phương thức mở rộng trong lớp HtmlHelper.

Lớp HtmlHelper sẽ tạo ra các phần tử HTML. Ví dụ, @Html.ActionLink("Create New", "Create") sẽ tạo thẻ link sau <a href="/Student/Create">Create New</a>

Có nhiều phương thức mở rộng trong lớp HtmlHelper để tạo ra các Control HTML khác nhau.

Bảng sau liệt kê các phương thức HtmlHelper và điều khiển html mỗi phương thức tạo ra.

HtmlHelper HtmlHelper Định Kiểu Mạnh Control Html
Html.ActionLink Anchor link
Html.TextBox Html.TextBoxFor Textbox
Html.TextArea Html.TextAreaFor TextArea
Html.CheckBox Html.CheckBoxFor Checkbox
Html.RadioButton Html.RadioButtonFor Radio button
Html.DropDownList Html.DropDownListFor Dropdown, combobox
Html.ListBox Html.ListBoxFor multi-select list box
Html.Hidden Html.HiddenFor Hidden field
Html.Password Html.PasswordFor Password textbox
Html.Display Html.DisplayFor Html text
Html.Label Html.LabelFor Label
Html.Editor Html.EditorFor Tạo các control Html dựa trên kiểu dữ liệu của thuộc tính Model được chỉ định. Ví dụ: textbox cho thuộc tính string, numericbox cho kiểu int, double hoặc kiểu số khác.

Sự khác biệt giữa việc sử dụng các phương thức HtmlHelper và sử dụng thẻ html là phương thức HtmlHelper được thiết kế để giúp dễ dàng liên kết dữ liệu Model với View.

Bây giờ chúng ta sẽ tìm hiểu về các phương thức của HtmlHelper trong ASP.NET MVC.

HtmlHelper – TextBox

Trong phần này bạn sẽ tìm hiểu cách tạo  phần tử textbox trong HTML bằng HtmlHelper trong Razor View.

Lớp HtmlHelper có hai phương thức mở rộng tạo ra một phần tử textbox trong HTML (<input type=”text”>) trong Razor View là: TextBox() và TextBoxFor().

Phương thức TextBox() là phương thức mở rộng được định kiểu lỏng lẻo trong khi TextBoxFor() là phương thức mở rộng được định kiểu mạnh.

Chúng tôi sẽ sử dụng lớp Model Student sau để minh họa cho phương thức TextBox() và TextBoxFor().

public class Student
{
    public int StudentId { get; set; }
    [Display(Name="Name")]
    public string StudentName { get; set; }
    public int Age { get; set; }
    public bool IsNewlyEnrolled { get; set; }
    public string Password { get; set; }
}
C#

Html.TextBox()

Phương thức Html.TextBox() tạo phần tử <input type=”text”> với các tham số name, value và htmlAttributes.

Chữ ký phương thức Html.TextBox()


MvcHtmlString Html.TextBox(string name, string value, object htmlAttributes)
C#

Phương thức TextBox() có nhiều phương thức quá tải. Vui lòng truy cập MSDN để biết tất cả các phương thức quá tải của phương thức Html.TextBox().

Phương thức TextBox() là một phương thức được định kiểu lỏng lẻo vì tham số name là một chuỗi. Tham số name có thể là tên thuộc tính của đối tượng Model.

Nó liên kết thuộc tính được chỉ định với textbox HTML. Vì vậy, nó tự động hiển thị một giá trị của thuộc tính Model trong một textbox và ngược lại.

@model Student

@Html.TextBox("StudentName", null, new { @class = "form-control" })
C#

Kết quả HTML:

<input class="form-control" 
        id="StudentName" 
        name="StudentName" 
        type="text" 
        value="" />
C#

Trong ví dụ trên, tham số đầu tiên là thuộc tính “StudentName” của lớp Model Student sẽ được đặt làm name và id của textbox.

Tham số thứ hai là một giá trị để hiển thị trong textbox, trong ví dụ trên là NULL. Nếu bạn muốn hiển thị giá trị của thuộc tính StudentName thì bạn chỉ cần thay null bằng Model.StudentName.

Tham số thứ ba sẽ được đặt làm thuộc tính class của textbox. Tham số htmlAttributes là kiểu object, vì vậy nó có thể là đối tượng ẩn danh.

Trong ví dụ trên, vì thuộc tính class của textbox trùng tên với từ khóa class trong C# nên bạn phải sử dụng ký tự @ ở đằng trước để trình biên dịch hiểu đây không phải là khai báo lớp trong C#.

Bạn cũng có thể chỉ định bất kỳ tên cho hộp văn bản. Tuy nhiên, nó sẽ không được liên kết với thuộc tính của lớp Model.


@Html.TextBox("myTextBox", "This is value", new { @class = "form-control" })
C#

Kết quả HTML:

<input class="form-control" 
        id="myTextBox" 
        name="myTextBox" 
        type="text" 
        value="This is value" />
C#
HtmlHelper - TextBox

Html.TextBoxFor

Phương thức trợ giúp Html.TextBoxFor() là một phương thức mở rộng được định kiểu mạnh. Nó tạo ra một phần tử textbox cho thuộc tính Model được chỉ định bằng biểu thức lambda.

Phương thức Html.TextBoxFor() liên kết một thuộc tính đối tượng Model đã chỉ định với textbox. Vì vậy, nó tự động hiển thị giá trị của thuộc tính Model trong textbox và ngược lại.

Chữ ký phương thức Html.TextBoxFor()


MvcHtmlString TextBoxFor(Expression<Func<TModel,TValue>> expression, object htmlAttributes)
C#

Phương thức Html.TextBoxFor() có nhiều phương thức quá tải. Truy cập MSDN để biết tất cả các phương thức quá tải của phương thức Html.TextBoxFor().

Ví dụ minh họa phương thức Html.TextBoxFor():

@model Student

@Html.TextBoxFor(m => m.StudentName, new { @class = "form-control" })
C#

Kết quả HTML:

<input class="form-control" 
        id="StudentName" 
        name="StudentName" 
        type="text" 
        value="John" />
HTML

Trong ví dụ trên, tham số đầu tiên trong phương thức Html.TextBoxFor() là biểu thức lambda chỉ định thuộc tính StudentName để liên kết với textbox. Nó tạo ra một phần tử input với id và name được đặt thành tên thuộc tính

Thuộc tính value sẽ được gán giá trị của thuộc tính StudentName, ví dụ John. Hình dưới đây cho thấy phần tử input được tạo bởi ví dụ trên.

Sự khác biệt giữa @Html.TextBox() và @Html.TextBoxFor()

  • @Html.TextBox() là phương thức mở rộng được định kiểu lỏng lẻo trong khi @Html.TextBoxFor() là phương thức mở rộng được định kiểu mạnh.
  • @Html.TextBox() yêu cầu tên thuộc tính dưới dạng tham số chuỗi trong đó @Html.TextBoxFor() yêu cầu biểu thức lambda làm tham số.
  • @Html.TextBox() không cung cấp cho bạn lỗi thời gian biên dịch nếu bạn chỉ định sai tên thuộc tính. Nó sẽ ném ngoại lệ lúc thực thi.
  • @Html.TextBoxFor() là phương thức được định kiểu mạnh vì vậy nó sẽ cung cấp cho bạn lỗi lúc biên dịch nếu bạn chỉ định sai tên thuộc tính.
  • @Html.TextBoxFor() giúp mã có khả năng duy trì tốt hơn, nhất là trong trường hợp thay đổi tên thuộc tính của lớp Model. Trong trường hợp này bạn không phải sửa lại tên thuộc tính trong view, nếu bạn sử dụng @Html.TextBox() hoặc thẻ HTML thì bạn sẽ phải sửa lại tên thuộc tính trong View.
nvtgroup

880 thoughts on “Lớp HtmlHelper trong ASP.NET MVC”

  51. Amado Duerkson says:

    Congratulations on your incredible gift for writing! Your article is an engaging and enlightening read. Wishing you a New Year full of achievements and happiness!

  57. Puravive Supplement says:

    I do trust all the ideas youve presented in your post They are really convincing and will definitely work Nonetheless the posts are too short for newbies May just you please lengthen them a bit from next time Thank you for the post

  60. email temporario says:

    you are truly a just right webmaster The site loading speed is incredible It kind of feels that youre doing any distinctive trick In addition The contents are masterwork you have done a great activity in this matter

  66. Rastrear Celular says:

    Isso pode ser irritante quando seus relacionamentos são interrompidos e o telefone dela não pode ser rastreado. Agora você pode realizar essa atividade facilmente com a ajuda de um aplicativo espião. Esses aplicativos de monitoramento são muito eficazes e confiáveis ​​e podem determinar se sua esposa está te traindo.

  71. Temp Mail says:

    It was great seeing how much work you put into it. The picture is nice, and your writing style is stylish, but you seem to be worrying that you should be presenting the next article. I’ll almost certainly be back to read more of your work if you take care of this hike.

  73. HenryHok says:

    После решения вести здоровый образ жизни, я осознал необходимость в соковыжималке механической. ‘Все соки’ предоставили мне именно то, что мне нужно. Их механическая соковыжималка проста в использовании и очень эффективна. https://h-100.ru/collection/ruchnye-shnekovye-sokovyzhimalki – Соковыжималка механическая стала моим незаменимым помощником.

  78. DonaldScugh says:

    Профессиональные seo https://seo-optimizaciya-kazan.ru услуги для максимизации онлайн-видимости вашего бизнеса. Наши эксперты проведут глубокий анализ сайта, оптимизируют контент и структуру, улучшат технические аспекты и разработают индивидуальные стратегии продвижения.

  91. CharlesBindy says:

    Хотите сделать в квартире ремонт? Тогда советуем вам посетить сайт https://stroyka-gid.ru, где вы найдете всю необходимую информацию по строительству и ремонту.

  92. VictorFloks says:

    https://loveflover.ru — сайт посвященный комнатным растениям. Предлагает подробные статьи о выборе, выращивании и уходе за различными видами комнатных растений. Здесь можно найти полезные советы по созданию зелёного уголка в доме, руководства по декору и решению распространённых проблем, а также информацию о подходящих горшках и удобрениях. Платформа помогает создавать уютную атмосферу и гармонию в интерьере с помощью растений.

  94. GeorgeBaing says:

    Pin-up Casino https://pin-up.admsov.ru/ is an online casino licensed and regulated by the government of Curacao . Founded in 2016, it is home to some of the industry’s leading providers, including NetEnt, Microgaming, Play’n GO and others. This means that you will be spoiled for choice when it comes to choosing a game.

  96. kupic prawo jazdy says:

    gdzie mozna kupic prawo jazdy z wpisem do rejestru, kupić prawo jazdy, legalne prawo jazdy do kupienia, kupię prawo jazdy, jak załatwić prawo jazdy, bez egzaminu, jak kupić prawo jazdy, czy można kupić prawo jazdy, legalne prawo jazdy do kupienia 2024, pomogę zdać egzamin na prawo jazdy, prawo jazdy bez egzaminu, gdzie kupić prawo jazdy bez egzaminu, gdzie kupić prawo jazdy na lewo, jak kupić prawo jazdy w niemczech, gdzie kupic prawo jazdy legalnie, kupić prawo jazdy b

  97. bootsführerschein kaufen says:

    sportbootführerschein binnen und see, sportbootführerschein binnen prüfungsfragen, sportbootführerschein binnen kosten, sportbootführerschein binnen online, sporthochseeschifferschein kaufen, sportbootführerschein binnen berlin, sportbootführerschein binnen segel, sportbootführerschein kaufen, sportseeschifferschein kaufen erfahrungen, sportküstenschifferschein kaufen schwarz, sportbootführerschein see kaufen, sportbootführerschein binnen kaufen, sportbootführerschein see kaufen ohne prüfung, bootsführerschein kaufen, bootsführerschein kaufen polen, bootsführerschein kaufen erfahrungen, bootsführerschein online kaufen, bootsführerschein tschechien kaufen, SSS kaufen, SKS kaufen, SHS kaufen

  100. Jeffreytaw says:

    Реальные анкеты проституток https://prostitutki-213.ru Москвы с проверенными фото – от элитных путан до дешевых шлюх. Каталог всех индивидуалок на каждой станции метро с реальными фотографиями без ретуши и с отзывами реальных клиентов.

  101. MatthewRit says:

    Смотрите онлайн сериал Отчаянные домохозяйки https://domohozyayki-serial.ru в хорошем качестве HD 720 бесплатно, рейтинг сериала: 8.058, режиссер сериала: Дэвид Гроссман, Ларри Шоу, Дэвид Уоррен.

  104. JamesLiede says:

    Изготовление памятников и надгробий https://uralmegalit.ru по низким ценам. Собственное производство. Высокое качество, широкий ассортимент, скидки, установка.

  105. GeorgeRon says:

    Pin Up Casino https://pin-up.ergojournal.ru приглашает игроков зарегистрироваться на официальном сайте и начать играть на деньги в лучшие игровые автоматы, а на зеркалах онлайн казино Пин Ап можно найти аналогичную витрину слотов

  106. TerryCrogy says:

    Pin-up casino https://pin-up.jes-design.ru популярное онлайн-казино и ставки на спорт. Официальный сайт казино для доступа к играм и другим функциям казино для игры на деньги.

  107. Milesblurf says:

    Pin Up https://pin-up.fotoevolution.ru казино, которое радует гемблеров в России на протяжении нескольких лет. Узнайте, что оно подготовило посетителям. Описание, бонусы, отзывы о легендарном проекте. Регистрация и вход.

  110. Williamraf says:

    Pinup казино https://pin-up.vcabinet.kz это не просто сайт, а целый мир азартных развлечений, где каждый может найти что-то свое. От традиционных игровых автоматов до прогнозов на самые популярные спортивные события.

  113. acheter permis de conduire says:

    acheter permis de conduire en ligne, acheter un permis de conduire belge, achat permis de conduire, acheter un permis de conduire, acheter permis de conduire belgique, acheter le permis de conduire, permis de conduire acheter, faux permis de conduire belge, j’ai acheter mon permis de conduire sur internet, acheter son permis de conduire belgique, acheter son permis de conduire légalement, acheter un vrai permis de conduire, acheter permis moto a2, acheter permis moto étranger, Acheter permis de conduire enregistré, acheter permis de conduire enregistré en préfecture forum, permis de conduire légalement enregistré.

  123. JeffreyFep says:

    Gianluigi Buffon https://buffon.com.az Italian football player, goalkeeper. Considered one of the best goalkeepers of all time. He holds the record for the number of games in the Italian Championship, as well as the number of minutes in this tournament without conceding a goal.

  136. KennethKeymn says:

    Thibaut Nicolas Marc Courtois https://thibaut-courtois.real-madrid-ar.com Footballeur belge, gardien de but du Club espagnol “Real Madrid”. Lors de la saison 2010/11, il a ete reconnu comme le meilleur gardien de la Pro League belge, ainsi que comme joueur de l’annee pour Genk. Trois fois vainqueur du Trophee Ricardo Zamora, decerne chaque annee au meilleur gardien espagnol

  139. SamuelGex says:

    Saud Abdullah Abdulhamid https://saud-abdulhamid.real-madrid-ar.com Saudi footballer, defender of the Al -Hilal” and the Saudi Arabian national team. Asian champion in the age category up to 19 years. Abdulhamid is a graduate of the Al-Ittihad club. On December 14, 2018, he made his debut in the Saudi Pro League in a match against Al Bateen

  141. comprare patente says:

    Comprare patente registrata presso Motorizzazione civile (DMV)? La decisione di comprare patente online in Italia , comprare una patente, patente originale, comprare patente c, acquisto patente b, comprare patente prezzo, compro patente, acquistare patente b, dove posso comprare la patente b, compra patente online, comprare patente b online, comprare la patente a napoli, dove si può comprare la patente, quanto costa comprare la patente, comprare patente di guida, comprare patente senza.

  145. führerschein kaufen says:

    lkw führerschein kaufen legal, führerschein kaufen ohne vorkasse, registrierten führerschein kaufen erfahrungen, führerschein kaufen erfahrungen, führerschein kaufen ohne prüfung Köln, führerschein kaufen österreich, führerschein kaufen ohne prüfung österreich, führerschein kaufen ohne prüfung österreich, führerschein kaufen in österreich, führerschein kaufen Frankfurt, führerschein kaufen schweiz.

  148. comprar carta de conduçao says:

    comprar carta de conduçao preço, comprar carta de condução verdadeira, comprar carta de conduçao, comprar carta de condução lisboa, comprar carta de condução legal, comprar carta de condução, carta de condução comprar, comprar carta de conduçao, comprar carta de condução em Portugal, comprar carta, comprar carta de condução portugal, comprar carta de condução online, comprar a carta de condução, carta de condução, comprar carta de carro, imt carta de condução, comprar carta de condução no porto

  150. CraigWrise says:

    Видеопродакшн студия https://humanvideo.ru полного цикла. Современное оборудование продакшн-компании позволяет снимать видеоролики, фильмы и клипы высокого качества. Создание эффективных видеороликов для рекламы, мероприятий, видеоролики для бизнеса.

  151. JustinMet says:

    Заказать вывоз мусора https://musorovozzz.ru в Москве и Московской области, недорого и в любое время суток в мешках или контейнерами 8 м?, 20 м?, 27 м?, 38 м?, собственный автопарк. Заключаем договора на вывоз мусора.

  152. ArturobuS says:

    Реальные анкеты снять проститутку в москве Москвы с проверенными фото – от элитных путан до дешевых шлюх. Каталог всех индивидуалок на каждой станции метро с реальными фотографиями без ретуши и с отзывами реальных клиентов.

  153. AnthonyUtege says:

    Совсем недавно открылся новый интернет портал BlackSprut (Блекспрут) https://bs2cite.cc в даркнете, который предлагает купить нелегальные товары и заказать запрещенные услуги. Самая крупнейшая площадка СНГ. Любимые шопы и отзывчивая поддержка.

  158. ChrisUnida says:

    Монтаж систем отопления https://fectum.pro, водоснабжения, вентиляции, канализации, очистки воды, пылеудаления, снеготаяния, гелиосистем в Краснодаре под ключ.

  162. RobertbeK says:

    Game World https://kz-games.kz offers the latest online gaming news, game reviews, gameplay and ideas, gaming tactics and tips . Start playing our most popular and amazing games and get ready to become the leader in the online gaming world!

  171. ThomasBup says:

    Доставка груза и грузоперевозки https://tamozhennyy-deklarant.blogspot.com по России через транспортную компанию автотранспортом доступна и для частных лиц. Перевозчик отправит или доставит ваш груз: выгодные тарифы индивидуальный подход из рук в руки 1 машиной.

  173. JamesAmott says:

    Предлагаем купить гаражное оборудование https://profcomplex.pro, автохимию, технику и уборочный инвентарь для клининговых компаний. Доставка по Москве и другим городам России.

  174. Kennethacips says:

    Купить зеркала https://zerkala-m.ru по низким ценам. Более 1980 моделей, купить недорого в интернет-магазине в Москве с доставкой по России. Удобный каталог, низкие цены, качественные фото.

  194. JamesBus says:

    Промышленные насосы https://nasosynsk.ru/catalog/promyshlennoe_oborudovanie Wilo предлагают широкий ассортимент решений для различных отраслей промышленности, включая водоснабжение, отопление, вентиляцию, кондиционирование и многие другие. Благодаря своей высокой производительности и эффективности, насосы Wilo помогают снизить расходы на энергию и обслуживание, что делает их идеальным выбором для вашего бизнеса.

  199. Robbiemix says:

    Полезные советы и пошаговые инструкции по строительству https://syndyk.by, ремонту и дизайну домов и квартир, выбору материалов, монтажу и установке своими руками.

  260. OrlandoJew says:

    Официальный сайт онлайн-казино Vavada https://vavada-kz-game.kz это новый адрес лучших слотов и джекпотов. Ознакомьтесь с бонусами и играйте на реальные деньги из Казахстана.

  327. Eddienub says:

    Единственная в России студия кастомных париков https://wigdealers.ru, где мастера индивидуально подбирают структуру волос и основу по форме головы, после чего стригут, окрашивают, делают укладку и доводят до идеала ваш будущий аксессуар.

  350. RonnieAcciz says:

    Хотите научиться готовить самые изысканные и сложные торты? В этом https://v1.skladchik.org/tags/tort/ разделе вы найдете множество подробных пошаговых рецептов самых трендовых и известных тортов с возможностью получить их за сущие копейки благодаря складчине. Готовьте с удовольствием и открывайте для себя новые рецепты вместе с Skladchik.org

  390. SamuelBup says:

    Сайт https://ps-likers.ru предлагает уроки по фотошоп для начинающих. На страницах сайта можно найти пошаговые руководства по анимации, созданию графики для сайтов, дизайну, работе с текстом и фотографиями, а также различные эффекты.

  393. Jeffreykix says:

    RDBox.de https://rdbox.de bietet schallgedammte Gehause fur 3D-Drucker, die eine sehr leise Druckumgebung schaffen – nicht lauter als ein Kuhlschrank. Unsere Losungen sorgen fur stabile Drucktemperatur, Vibrationsisolierung, Luftreinigung und mobile App-Steuerung.

  468. Gregoryvaw says:

    Indibet is a premier online casino offering a wide array of games including slots, table games, and live dealer options. Renowned for its user-friendly interface and robust security measures, Indibet ensures a top-notch gaming experience with exciting bonuses and 24/7 customer support.

  480. Thomasdop says:

    Помощь в решении задач https://zadachireshaem-online.ru. Опытные авторы с профессиональной подготовкой окажут консультацию в решении задач на заказ недорого, быстро, качественно