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.

Window's InputSimulator Radio Button Check

Just another day another learning experience. I was asked by my employer to write a selenium script to import about 2000 data entries into a web portal. This was the first selenium script I have wrote and with help from a colleague that works with selenium daily I was able to accomplish this task.

First the Dependencies:

WindowsInput
Selenium


WindowsInput is a dll you can paste and reference in your bin a short google search should yield results for this  so I won't go to any detail unless someone requests it then I'll do a follow up post. Selenium and be installed via the Nuget Manager within Visual Studio which is a blessing from heaven no more searching around the web for what you need.

So here is my little method which is more just to display some of the options that I used to write my script. The comments are self explanatory this is a very basic implementation. You will notice the ability to navigate to a url. My experience included adding logic for basic auth before I was able to put any input in the forms.

So what I wanted to throw out here in this blog post was the simple fact that I hunted around the web for  about 40 min trying to find how to check that lame radio button on the import form. I could get the focus on the radio button but I was unaware that there was any keyboard stroke that could fill that puppy in. Where the limitations are that I could not use the mouse buttons I had to find and alternate way of doing this. I finally ran across this page from Mozilla which is awesome because I'm writing this script in Firefox there are ways of using other browsers as well. 

Mozilla Forum


So there I learned that you could turn a radio button on or off by selected the spacebar. So as you can see in my code the last simulation is the space which selects the radio button, the rest of my data fills and the submit button selected and all is right in the world. I just thought I could maybe save someone else the same 40 minutes our time is precious. Also maybe this is just common knowledge let me know if I'm super lame and I was living in ignorance. Thanks. Remember to code like Vikings.

Report Viewer Control IE11

With the latest release of IE11 there have been some cool upgrades I would say in style of the dev tools (it would be cool if they did not time out on me) but there are some compatibility issues that I have ran into with a ReportViewer control on my web application. Each time I would try to render a .rdl file document via the controller the loading .gif would kick on and the report would time out on me. It appears I was not the only one.

Web Forms project

Server: IIS7 

Framework: 3.5

Microsoft Report Viewer 10.0.0.0

Visual Studio 2012

So searching around the web I found the usual suspects the first thing everyone was shouting on stack overflow was changing the rendering of IE to IE10 mode via meta tags in the head of the document. I'm not really a fan of this approach it's more of a band-aid solution then a fix. 

Then I tried using the dev tools on IE11 to see if I could narrow down the network traffic and see which requests were timing out and received no joy there. 

Finally I found the clue I was looking for to break this issue. I ran the request again while logged into the web server and checking the Event Viewer log. There I saw my failed attempt to pull the document. The event viewer logs read "HttpHandlerInputException, Missing URL parameter: IterationId."

After some searching I found that you could fix this missing parameter by adding some logic to your gobal.aspx file on your project as follows: 

It basically checks your request and if it is coming from your report viewer url performs another check to make sure that the parameter has a value and if not places the default zero value which will suffice the request and you will get your document. Experimenting with this issue I only found it in IE11 with the rest of the browser the rendering without this parameter was not an issue. It seems that IE is a little more picky on what it will allow to come through the system. I've found this with the rendering of CSS and html as well. I hope this post helps someone out there save some time. This was a 2 day easter egg hunt for myself. Always looking to pass this information along to my fellow coders. Also I've using this blog to document my fixes so later on when I run into this again I'll know where to start.