Use a Counter with a Foreach Loop in Razor

Using bootstrap I wanted to create a two column grid with the data provided to the model. To accomplish this I needed to surround every two divs of class col-sm-6 with a div of class row. To do this I implemented a counter. I then used modulus to determine if I should open the tag or close it.

Another thing to note is that razor shows syntax errors if you just include an opening tag without its closing tag. If you run the code you will likely get a broken page complaining about missing curly braces. To get around this prepend each tag in their respective if-statements with @:.

Read More

Creating Animated Spinners with FontAwesome or Glyphicons

When creating JavaScript-rich applications an indicator is often used to give the user some certainty the page is working behind the scenes. If not present a user may question if the page has stalled or not. An animated GIF known as a spinner (or loader) is a common way to achieve this. An alternative to linking to a specific image is to use a popular font library that you may already be referencing by your application.

FontAwesome

The ability to create spinning icons in built into FontAwesome. Reference the library and create loaders easily:
The fa-spin class is what causes the rotation.

If you desire a different animation speed then you need a little CSS:
FYI: this CSS was constructed by studying the fa-spin class found in the FontAwesome stylesheet. Adjust the milliseconds (i.e., 1000ms) to alter the speed. Higher is slower, lower is faster. The default speed used by FontAwesome is 2000ms.

To use simply replace the fa-spin class with fa-spin-custom class that you have made:

Glyphicons

To use the font-library built into Bootstrap you will need to reference the above CSS as well:

That’s it. See a DEMO.
Enjoy.

Read More

Convert Razor Validation Summary into Bootstrap Alert

In MVC, if you use the Validation Summary method any validation errors for the model are presented back to the user in a bulleted list. If you have been using bootstrap throughout the site you may want to give this message the same look and feel to have consistent interfacing. This error summary can easily be converted into a bootstrap alert to show to the user. Simply expand upon that call with this logic:

By default, @Html.ValidationSummary() returns nothing if no errors. But since we are adding additional markup for the bootstrap alert we must check for errors ourselves. The result will be a closable, danger alert with a heading and bulleted, error list inside.

Next, you may want to clean up the classes added by the validation summary. This can ensure that you will not have any CSS rendering issues as well as expanding upon the bootstrap look. I simply added this javascript at the bottom of my view:
The first call cleans up the list itself. The second call will put a bootstrap danger highlight around your fields with the issues. If the red outline does not appear then make sure you are following bootstraps recommendation of wrapping form elements and their labels in a form-group class. For example:

Read More

Self-Closing Bootstrap Alert

Alerts are a nice feature in Bootstrap to grab a user’s attention and deliver information. The different types of alerts are success, info, warning and danger, which are color coded accordingly. Alerts can include a close button for users to remove it from view once they have read it. In my project I wanted success alerts to show to users then, after a few seconds close on their own. This can be done easily with jQuery’s fadeTo() function. You can also incorporate a slick transition effect with the slideUp() function.

Create a success alert via bootstrap
Then you just need a little script. This script targets only success alerts and will close it after 5 seconds:
See a DEMO.

Read More

Self-Closing Bootstrap Modal in MVC

I had a need recently to alert users if the amount of records being selected differed from what they expected. My notice was more of a "heads up" then anything. Still, I wanted to give users a way to abort situations where job size would pose a threat or hinder productivity. I also wanted to avoid extra interface clicks, especially in situations where they typically accept. That’s when I came up with the idea of a self-closing dialog. The user would be presented a modal message informing them of the difference. To proceed they could press the Continue Immediately button, close the dialog (via the title bar), or step away and wait for the timer to run out. The process only aborts if they they click the Cancel button in the allotted time.

This project could be done in a multitude of ways. Being an MVC fan I opted for that route. I decided to utilize partial views as well. Regardless of your approach you will likely need to contact the server to crunch your numbers and detect the differences. To do this you will probably use ajax:
On the backend we receive our data using a controller and models:
Next, comes the partial view. Notice I’m declaring a model and using it to retrieve values:
I also have some script in the partial to drive the modal:
And there you go.
  1. We click a button that fires ajax
  2. The ajax talks to the server
  3. The server detects differences
  4. The server populates a model then generates a partial view
  5. The partial view is returned to the ajax callback function
  6. The callback function adds it to the DOM and executes the script

Like I said this could be done in a dozen different ways. You could have the modal hidden on the parent, use ajax to fetch the figures themselves, then modify the modal before making it visible (see DEMO below). You could also use webforms to do this and use ASP.NET web server controllers instead of partial views.

See a DEMO.

Thanks.

Read More

Show Bootstrap Tooltip Over Truncated Text

I had a need to prevent text-wrapping in a cell. I wanted the text to appear truncated to keep the row height consistent. The following worked well to crop the text and show an indicator of hidden text:
I referenced the classes like so:
Next, I wanted the user to be presented a tooltip if the text was truncated so they could see the full value. Here is my solution:
This snippet watches for mouse placement over the DIV. It then does some width comparisons to see if there is any hidden text. If so it creates a tooltip using Twitter Bootstrap and displays it. Simple as that.

BTW, you are not limited to simple tables. This will also work with jQuery Datatables. See my post on Datatable Tweaks.

See a DEMO.

Read More

AJAX and Bootstrap Tabbing in MVC

In this tutorial you will see the Twitter Bootstrap tabstrip in action. I will be using MVC, Razor and jQuery to accomplish this. If you visit the tabstrip documentation you will see an example that uses static tab content. I have expanded upon that code snippet, converting it to dynamic content using AJAX. I’m also utilizing a fading transition effect as the content loads. The tabstrip will interact with two partial views named: _SearchTab.cshtml and _SubmissionTab.cshtml. Notice that I am naming the tab ids the same as the partial views. Doing that reduces translation in the script when relaying the AJAX calls.

Markup:

The @Html.Partial will request the page on the active tab on page load. Place this call wherever the active class is being set.

Script:

The $.ajax() request retrieves the partial view. The cache parameter is necessary to ensure a fresh rebuild on each click. As for what path is requested you will notice a @ViewContext.RouteData.Values["controller"] call. It simply retrieves the controller of the current view, assuming the partial views are located in the same folder in the tree.

Controller:

The above methods are needed to relay the $.ajax() request to the proper partial view.

Now each time you click on a tab it will load dynamic content from a partial view. Keeping content separate can keep code cleaner and more organized. Download an example implementing this technique.

Read More