Asp.Net MVC Use of JavaScript, jQuery, Ajax, CSS and Bootstrap

Use of JavaScript, jQuery, Ajax and Bootstrap CSS in Asp.Net MVC

Now we are in to development of MVC where we would be mostly working with Client side technology the most for make you application lightweight. We would use JavaScript, jQuery library and Bootstrap CSS to make our website interactive. We can validate our Form (.aspx, .html, .cshtml) before sending it server and making ajax calls (post or get) we can reduce response time to load website and provide better user experience for website.

What is JavaScript?

  • JavaScript is a client-sided scripting language.
  • JavaScript is relatively simple to learn and implement.
  • JavaScript provide very interactive user interfaces and dynamic websites.
  • JavaScript is supported by all browser.
  • JavaScript is open and cross-platform.

e.g. Let’s have a small example to understand need of JavaScript.

 

If we have a Registration Form developed in ASP.NET Webforms or MVC and we are validating it on server side. When user fills this Form and submit it to server the request goes to server and then method for Validating Form is called after that if we have improper value then it will return error message which will be displayed by browser. This process take too much time and creates bad user experience at your website or web application. If we validate this same Registration Form on client side with using JavaScript or JQuery we would save valuable time of user by saving round trip to sever for validating. This process will be too fast and will create good user experience at your website or web application. It’s good to do Client side validation first which will send valid data to server and User using this will also love to use it.

What is jQuery?

  • jQuery is simply a JavaScript library.
  • JavaScript is language and jQuery is Framework.
  • jQuery is designed to make many JavaScript development tasks much easier.
  • JQuery free, open source software.

For downloading jQuery files visit link given below: - http://jquery.com/ 

 

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. Most of developer get confused with JavaScript and jQuery are two different languages but not they both are same language. jQuery provide another great functionality called as Ajax.

What is Ajax? 

AJAX = Asynchronous JavaScript and XML.

Ajax is method to use for exchanging data from client to server in asynchronously way without updating whole page.

 

Ajax contains various methods those are:

 

     POST: This method is used for posting data to server side.
     GET: This method is used to get value from server to client.
     PUT: This method is used to update data value at server side.
     DELETE: This method is used to delete data value at server side.

 

For working with Ajax we just requires jQuery library.

What is Bootstrap?

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. With new technology coming in every new day we have something new called as Bootstrap which is used for making responsive UI. If  we implement applications with normal css we can access application only from Desktop PC with perfect UI design but if we try to access same application from Tabs, mobile and various deceives our site design will get change completely. In case If we develop application with bootstrap framework CSS our site design will be responsive based on the device we used.

 

Bootstrap is already available in Visual studio 2013 and in case if you want to download directly bootstrap is open source Framework from Twitter and released as an open source product in August 2011 on GitHub.

 

Download Bootstrap from following link: - http://getbootstrap.com/