Adding Bootstrap Classes to MVC @Html elements

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!!!

Jquery Change CSS upon table value

I was just checking out stackoverflow there was a chap on there that was trying to change the css of a table based on the value of the content. I remembered doing this on a company website so to archive it and to help others here is the simple solution I came up with to accommodate the requirements.

So the gist of this code is there is a style class that has been assigned in the header. There is a snippet of code in jquery that is where the magic happens. I select all the table elements by class you could also just select on the basic element td but in this case I went for a more practical approach since most likely you are not going to want to change css for every td on the site but who knows maybe you do. More power to you my friend. I use the each function to step through the different jquery objects in the array. For each object I pull the value and if it's negative I assign the class. It's really simple straight forward. I hope this helps someone and saves them some time.