Mohamed Naguib
Mohamed Naguib

Reputation: 1730

how to Render CSS with Razor instead of HTML

I have a CSS using this code

input[type="text"] {
    border: 1px solid #CCCCCC;
    border-radius: 5px 5px 5px 5px;
    box-shadow: none;
    padding: 5px 8px;
}

and the HTML page has the following code to use the CSS

<input id="product-name" type="text" required="required">

I want to use the Razor in the view to render the text box called product-name How can i do this ?

Upvotes: 0

Views: 406

Answers (2)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038710

You could use the TextBox helper:

@Html.TextBox("product-name", null, new { required = "required" })

But personally I would recommend you to use a view model:

public class MyViewModel
{
    public string ProductName { get; set; }
}

and then have the controller action populate and pass this view model to the view:

public ActionResult Index()
{
    MyViewModel model = new MyViewModel();
    model.ProductName = "some product name";
    return View(model);
}

and now your view could be strongly typed to the view model:

@model MyViewModel
@Html.TextBoxFor(x => x.ProductName, new { required = "required" })

Upvotes: 1

Aditi
Aditi

Reputation: 1188

You could just add the helper and add a class attribute to it to connect it to the css..

@Html.TextBox("name", null, new { id = "product-name", @class = "textbox", required = "required" });

and the css will change to

.textbox {
    border: 1px solid #CCCCCC;
    border-radius: 5px 5px 5px 5px;
    box-shadow: none;
    padding: 5px 8px;
}

Upvotes: 0

Related Questions