jQuery Tooltip Validation Using Twitter Bootstrap

jQuery Tooltip Validation Using Twitter Bootstrap

CheapASPNETHostingReview.com | Generally, we use a jQuery unobtrusive validation plugin in ASP.NET MVC Applications.We are going to discuss the following topics in this article:

  1. Disadvantages of jQuery unobtrusive validation in MVC.
  2. jQuery tooltip validation

There are some disadvantages of using this plugin. When using the jQuery unobtrusive validation plugin, it creates a span tag to display error messages. If you have, for example, a horizontal form on top of the other controls, then this behavior might not be working for you, since they will break the page layout. It was the case for me and as such, I decided to change the default behavior of the jQuery unobtrusive validation library and instead of using a span to show the error message, I decided to use a tooltip. I am going to show you how I achieved this, using a tooltip with the help of a bootstrap.

Before going to the tooltip validation, first look at the traditional jQuery unobtrusive example.

The following is an example of an application of unobtrusive validation.

validation

When I click the Register button, the error message comes, as shown below:

click on Register button

If I increase the length of the error message, the layout will be broken like this. In the same way, when I place the same length error message below, the Textbox controls come as shown in the screenshot. The same layout-change problem occurs. Hence, this is a bad idea of using a default behavior of the  jQuery Unobtrusive validation plugin. I replaced the error type with a tooltip. It won’t change the layout structure.

Now the jQuery tooltip validation article begins from here,

jQuery tooltip validation using Twitter Bootstrap

Step 1

Create ASP.NET MVC Application.

  1. Create Application with MVC template.

Create a application

2. Add the following files.

add files

3. Create HomeController.cs.

Right click->Controllers folder->Add->Controller->name it as HomeController.cs.

add controller

4. Add Index Method to the Controller.

5. Add View to Index Action method.

Right click->Index Method->Add View->click OK.

Add view

Index view is created.

6. Now, replace the Index.cshtml code with the code given below:

Step 2

Add the script for the validation,

  1. Add myscript.js to the script folder.

    myscript.js

Step 3

Add styles for the error display.

Now run the Application and you will get the Window as shown below:

Enter details

Without entering anything into the fields, just click on the Register button and see what happens.

Register

How To Creating a Web App Using ASP.NET MVC 4 and AngularJS

How To Creating a Web App Using ASP.NET MVC 4 and AngularJS

CheapASPNETHostingReview.com | Best and cheap ASP.NET MVC hosting. AngularJS and ASP.NET C# MVC are both MVC frameworks for creating web applications. AngularJS is a JavaScript framework for creating web applications while ASP.NET MVC is a framework for creating web applications using HTML, JavaScript and server side programming language like C# etc. In this tutorial series, we’ll see how to create a web application using both ASP.NET MVC 4 and AngularJS. This tutorial would focus on how to use AngularJS for .net developers.

How To Creating a Web App Using ASP.NET MVC 4 and AngularJS ?

Let’s get started from scratch by creating a ASP.NET MVC 4 empty template project. Once the project has been created it shoud empty without any default code. I did this so that you can get a feel of how to get started from the very scratch and understand how thing really work. So, moving on, first we’ll add a layout to our web application. A layout is like a master page that we have in asp.net web form’s project. In our project’s view directory create a folder called Shared and inside that directory create a file called _Layout.cshtml. Here is how it looks like:

Now there are a couple of things in the above HTML code that would be confusing to a beginner. Let’s take them one by one.

The above code renders the bootstrap related CSS files that we would define in the BundleConfig.cs file in the App_Start folder. Let’s create the BundleConfig.cs class in the App_Start folder. Inside BundleConfig.cs we need to register the routes. Here is how it would look like:

Why do we need to use bundle ? Why not include the files directly like we do in web forms ?

Well, bundling helps to compress the JavaScript file and style sheets into a single file to save bandwidth and that’s why we use it.

Add the following line of code in the Global.asax file in the Application_Start :

Next thing that may look odd in the above code is the @RenderBody(). This is the section of the layout page where the content is rendered each time a new request is received.

For the _Layout.cshtml to be accepted as the layout page for our application we need to define it in another file called _ViewStart.cshtml. Inside Views create a file called _ViewStart.cshtml and add the following code :

Ok now we are all set with the layout code for our web application. Now let’s add a controller inside the Controllers folder called LoginController. Inside the LoginController define a method called ShowDefault which would render a default view.
Here is the ShowDefault method :

Right click on the ShowDefault method and add a view with the same name, ShowDefault. Now a file should get created in the Views/Login/. Add the following code to the ShowDefault.cshtml :

Set the default controller and action method to be called when the app start in the RouteConfig.cs file.

Save the changes and try running the application and you should be able to see the asp.net MVC 4 app in action.

CodeHandbook

Integrating AngularJS and ASP.NET MVC 4

To include AngularJS in your ASP.NET MVC web app, download the AngularJS file and place it in the Scripts folder in your web app. Inside the BundleConfig.cs file include the angular js file too.

Inside the _Layout.cshtml file include the AngularJS script as shown :

Add one more file called app.js in the Scripts folder which would be the root file of our AngularJS application.
Here is how app.js would look like:

Include the app.js file as reference in the _Layout.cshtml page.

Inside the _Layout.cshtml file add the ngApp directive to the HTML tag.

And that’s it, AngularJS has been successfully added to the MVC web app and ready to use.

How To Validation Bootstrap in ASP.NET MVC

How To Validation Bootstrap in ASP.NET MVC

CheapASPNETHostingReview.com | Best and cheap ASP.NET MVC hosting. In this tutorial I will show you about bootstrap in ASP.NET MVC. I use Bootstrap in almost every project I build these days. I build up a custom Bootstrap configuration to reduce bloat, and have my workflow down-pat for updating those configurations (which I’ll write about in the near future). I have familiarised myself with it’s ins-and-outs to help ensure I use it to it’s full potential without being overkill, and it has sped up my HTML build time immensely.

Bootstrap Validation in ASP.NET MVC

One issue I’ve come across before is finding harmony between ASP.Net MVC’s validation and Bootstrap’s validation classes.

Out of the box when you use Html.ValidationMessageFor() to output a validation (with none of Microsoft’s validation classes set up), this is what I end up with:

form-vanilla-validation

Behind the scenes, the Microsoft validation has put an input-validation-error class on the text boxes that failed validation, and the validation message has some classes that can be styled:

Bootstrap’s method of validation styling is based on the parent’s class (the “form group”), instead of the element itself, thus allowing all children (e.g. labels and text boxes) to have a specific style:

 It’s not difficult to apply the Bootstrap validation classes when model errors exist using a little JavaScript, but I decided to look for a nice NuGet package to do this for me, and I found one – jquery.validate.unobtrusive.bootstrap by Sandro Caseiro.  Simply install it via the NuGet Package Manager Console:

 I use the bundling in the Microsoft.AspNet.Web.Optimization package, so rather than including the JavaScript library file raw in my view, I already have a validate bundle that will include it since this library has followed the naming convention, being jquery.validate.unobtrusive.bootstrap.js, so I don’t even need to update the BundleConfig.cs file:

 This bundle was already being included in my page using the following:

 Unfortunately this didn’t work! The jquery.validate.unobtrusive.bootstrap.js was being included, but when I look at the source, it’s being included BEFORE the jquery.validate.unobtrusive.js file:

The problem is that out of the box, the bundling library orders the packages included in the bundle alphabetically when using a wildcard *.

I saw a nice solution to this on someone’s the jquery.validate.unobtrusive.bootstrap GitHub issues page, it involves creating a custom orderer for the bundle:

Step 1: Create a new orderer class (I placed it within the BundleConfig class to keep it local):

 Step 2: Update the bundle creation code to use this orderer:

 The result is that your scripts will be output in order of the “dots” – a kind of heirarchy assumed based on the file naming convention, which works in this particular situation, at least (and it would be great if it worked in general, signifying a naming convention for JavaScript files):

 And the result is a lovely looking form, utilising Bootstrap validation styling:

form-bootstrap-validation