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 ?
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" })
ViewData["product-name"] = "some product name";. But personally that's not the approach I would recommend you. Strongly typed views and view models is the correct way to do ASP.NET MVC.required="required" attribute and decorate your view model property with the [Required] validation attribute. Now all you need to do is include the jquery.validate.unobtrusive.js and you will get automatic client side validation out of the box without the need to write any custom code.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;
}
