Build Asp .Net MVC Application From Scratch


In this blog post we will see how to create a basic Asp .Net MVC application. The purpose of this post is to server as a base for many other blog posts I have written or going to write in future.

Let's open Visual Studio and Navigate to the new Project Dialog. Select the options as highlighted in below screen shot.


Selecting All CheckBoxes With jQuery


In this post we will see how to perform some basic to intermediate level actions on the elements that are selected by your jQuery selectors. If you are new to jQuery, please referent to my previous post on Understanding jQuery. Also to get started look at this post explaining three basic jQuery selectors [ID,Class,Element].

In this blog post we will perform following actions on selected DOM elements.

  • Check/Uncheck All CheckBoxes
  • Show/Hide All Paragraphs
  • Toggle and slideToggle Actions

For our examples we will be working with the sample created at the jsFiddle web site. Following is the link to the public fiddle implementing all the samples we are discussing as part of this blog.


Check/UnCheck All CheckBoxes using jQuery

Let's say we have a form where with multiple check boxes and, instead of user selecting all options one by one we want to give an option to select all the options with a single click. following is how we can do this.


Understanding Basic jQuery Selectors


In this post we will start looking at the basic jQuery selectors. If you are new to jQuery, please referent to my previous post on Understanding jQuery.

In this blog post we will explore following main jQuery selectors.

  • Element Selector
  • ID Selector
  • Class Selector

For our examples we will be working with the sample created at the jsFiddle web site. Following is the link to the public fiddle implementing all the samples we are discussing as part of this blog.

jQuery Element Selector

As the name suggests, when you want to select a particular HTML element/ or set of elements by it's type your choice of jQuery selector should be Element selector. For example, selecting all the Div on the page(And hiding them and possibly show them back!!).


Solution Explorer Not Showing Solution


Sometimes when you are working with the VisualStudio solution which only has one project, it creates the issue of the actual solution node not showing up in the Solution Explorer.

This is because of the following setting. If the highlighted Checkbox is not checked then it will not show the solution if it has only one project under it.


Understanding jQuery


In this first post of the series of blog posts, we will start looking at jQuery and how it is making Web a much more interactive place. This series assumes that you have a basic understanding of JavaScript and how it runs inside your browser along with CSS and HTML. With that assumption, let's dive into understanding what jQuery is and some basics of jQuery framework.

What is jQuery

So, what exactly is jQuery ?

jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 31% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.

-From WikiPedia

As the definition says, it is a framework written on top of existing JavaScript to simplify client-side scripting during web development process. It is a pure JavaScript technology and can be used in conjunction with any other server side technology. Let's quickly go through some common usages of jQuery.

Usages of jQuery

Selecting

  • Selecting an Element on your page by it's ID
  • Selecting an Element on your page by a Class
  • Selecting an Element on your page by it's Type [Button,RadioButton,Checkbox,Label]

Actions on the Elements

  • Attaching Events To Selected Element(s) [Click,MouseIn,MouseOut]
  • Changing CSS classes, attribute values for Selected Element(s)
  • Adding/Removing HTML elements from the Selected Element(s)

These are some of the most common use cases you will find while working with jQuery. However you can do many other advanced stuff like Validation,Ajax operations etc. using jQuery.

Basic jQuery Concepts

$(document).ready()

From the usages it seems, almost anything you do with jQuery is tightly attached to your DOM. So before the DOM is loaded you can not really do anything. And that is where you will find the first jQuery function $(document).ready().

What this function essentially doing is, selecting the document and when it is ready, executing rest of your JavaScript. So the code included inside this function will only be executed when the page is downloaded and ready to be acted upon. This guarantees that whatever HTML elements your JavaScript manipulates, are available.

Creating A Simple Application

There is no server side code involved in the sample we are creating here, so you do not have to have a VisualStudio. Any HTML editor will be just fine. I am more comfortable using VisualStudio as the editor for my HTML pages. So Let's go ahead and create an Empty Asp .Net Web application.

Create Asp .Net Empty Web Application

Now, let's go ahead and add a jQuery file into our application. For the purpose of this tutorial we will be using jQuery 1.9.1.

  • Download the file from this URL
  • Create Script folder in your project
  • And add the downloaded jQuery file to that folder