Inline CSS and Styles with Html Helpers in MVC3 Razor

Inline CSS and Styles with Html Helpers in MVC3 Razor

27 Mar 2024
Intermediate
218K Views
5 min read

Inline CSS and Styles with HTML Helpers: An Overview

In this MVC Tutorial, I am going to explain how can we change the style of HTML Helpers by using CSS. In Asp.Net, we can customize the look and feel of server controls by using CSS class, id, and inline CSS. Similarly, we can change the style of HTML Helpers in MVC Razor.

Inline HTML Helpers

"@helper" syntax is used to create a reusable inline helper method. They make the code more reusable, as well as more readable. Let’s see how to use them.

Read More: MVC Interview Questions and Answers

Step 1: Create an empty ASP.Net MVC Application.

Inline HTML Helpers

Step 2: Then Right-click the controller and add a controller.

Step 2: Then Right-click the controller and add a controller.

public class HomeController : Controller  
{    
    public ActionResult InlineHTMLHelper()  
    {  
        return View();  
    }          
}  

Step 3: Right-click the action method and click add view.

Step 3: Right-click the action method and click add view.

@{  
    Layout = null;  
}  
  
@helper OrderedList(string[] words)  
{  
    <ol>  
        @foreach(string word in words)  
        {  
            <li>@word</li>  
        }  
    </ol>  
}  
<!DOCTYPE html>  
  
<html>  
<head>  
    <meta name="viewport" content="width=device-width" />  
    <title>Inline HTML Helper</title>  
</head>  
<body>  
    <div>   
        @OrderedList(new string[]{"Komal","Puja","Saourav","Niha"})  
  
    </div>  
</body>  
</html>    
  

Output

Komal
Puja
Saourav
Niha

In the above code, We made an inline helper method i.e. OrderedList, which takes a string array as an argument and displays each word in an ordered list. We can reuse the inline HTML helpers multiple times on the same view. To access the same inline HTML helper across the different views, we have to move our @helper methods in .cshtml files to the App_Code folder.

@helper OrderedList(string[] words)  
{  
    <ol>  
        @foreach (string word in words)  
       {  
          <li>@word</li>  
     }  
  </ol>  



@{  
   Layout = null;  
}  
!DOCTYPE html>  
html>  
meta name="viewport" content="width=device-width" />  
<title>Inline HTML Helper App Code</title>  
</head>  
<body>  
    <div>  
      @InlineHelplerCode.OrderedList(new string[] { "Komal", "Puja", "Saourabh", "Niha" })  
    </div>  
</body>  
</html>  

Output

Komal
Puja
Saourabh
Niha

CSS Class

 .inputclass
{
 width:100px;
 height:25px;
} 

1. Apply CSS Class to Html Helpers

Suppose the above CSS class is defined in the external style sheet. Now if you want to apply this class to html helpers then we need to add a class name by using @class like :

 @Html.TextBox("Name", new { @class="inputclass" })
@Html.TextBoxFor(model => model.Name, new { @class="inputclass" }) 

2. Apply Inline CSS to HTML Helpers

We can also add inline CSS to html helpers by using styles like:

 @Html.TextBoxFor(model => model.Name, new { style="width:100px;height:25px" })
@Html.TextBox("Name", new { style="width:100px;height:25px" })
Summary

I hope you will enjoy these tricks while programming with MVC Razor. I would like to have feedback from my blog readers. Your valuable feedback, questions, or comments about this article are always welcome. Enjoy Coding..!

FAQs

Q1. What is inline HTML helpers in MVC?

@helper syntax is used to create reusable inline helper method. 

Q2. How do you make an inline style in HTML?

The attribute starts with style, followed by an equals sign, =, and then finally uses double quotes, ", which contain the value of the attribute.

Q3. Why we use HTML helpers in MVC?

To implement a method that returns a string.
Share Article

Live Classes Schedule

Our learn-by-building-project method enables you to build practical/coding experience that sticks. 95% of our learners say they have confidence and remember more when they learn by building real world projects.
ASP.NET Core Certification Training May 26 SAT, SUN
Filling Fast
08:30PM to 10:30PM (IST)
Get Details
Advanced Full-Stack .NET Developer Certification Training May 26 SAT, SUN
Filling Fast
08:30PM to 10:30PM (IST)
Get Details
ASP.NET Core Certification Training Jun 14 MON, WED, FRI
Filling Fast
07:00AM to 08:30AM (IST)
Get Details
ASP.NET Core (Project) Jun 22 SAT, SUN
Filling Fast
08:30PM to 10:30PM (IST)
Get Details

Can't find convenient schedule? Let us know

About Author
Shailendra Chauhan (Microsoft MVP, Founder & CEO at Scholarhat by DotNetTricks)

Shailendra Chauhan is the Founder and CEO at ScholarHat by DotNetTricks which is a brand when it comes to e-Learning. He provides training and consultation over an array of technologies like Cloud, .NET, Angular, React, Node, Microservices, Containers and Mobile Apps development. He has been awarded Microsoft MVP 8th time in a row (2016-2023). He has changed many lives with his writings and unique training programs. He has a number of most sought-after books to his name which has helped job aspirants in cracking tough interviews with ease.
Accept cookies & close this