Just started a project at work building an employee management website with MVC4 and I'm really impressed so far with what I've seen very good product from Microsoft. Later on I'll supplement this blog with a full website example in MVC4 also I have toyed with a series on WCF web services which are my forte at the moment I have written quite a few webservices using the WCF technology and have learned some cool tricks but back to the matter at hand.
I started this new web project using twitter bootstrap I've been primarily a backend guy and twitter bootstrap really makes sense for me. I hate dealing with custom styles and building the foundation CSS tools that I need to make my website Twitter bootstrap gives you all those tools right out of the box. No more worrying about layout and disign or dynamic layout it's all included and with the following tools you can build a template and just include it in your project and the bulk of your CSS is done.
So once you add these style sheets and a jquery reference how do we add these styles to our MVC4 elements? Well it's actually quite easy. First thing you must know when you are using the MVC4 @Html elements they take parameters. The first specifies a binding to your Model object you will see this association threw a lamba expression depending on which element you are currently using. Then you have some controller options if the element is an action element such as a link that redirects to another page. After that these element take a generic object for a parameter and that is where the magic happens. There you can access all the attributes of the DOM including the style class.
Here are a couple of examples:
So you can see here in the first example this is an action controller that redirects the the "Alerts" method on the "Dashboard" Controller and the value of my link is "Alerts" as well this is what will show up on the page. Also I added the boostrap classes for the button so this link should look great when it renders on the page.
So the second example same story also you will see that I added a water mark to the text box as well. So you can see all attributes are accessible. So when I stack a few of these links I can make a nice little menu.
Here is my textbox with the water mark:
I really hope this helps someone else out mostly I keep this blog so when I forget something I've learned I can come back and check it out save some time. Hope this also saves other developers time as well. Remember to code like vikings!!!