Getting Started to Build Web Applications: Introduction to MVC

MVC (Model View Controller), most usable framework for latest web programmer, enables programmer to separates their work in these three names. It is a lightweight and standard design pattern which is familiar to many web developers.

According to the name of this framework, the application divides itself in three things i.e. one contains your logic, one contains your pages (may be razor or aspx pages) and the last one will contain some classes which are used to control the pages redirecting per user clicks.

The following diagram shown about the layers of this framework which includes Business layer, display layer and input control.

Model, used to represent the core of web application. To interact with database tables there are some classes have to be written. Those classes must be placed in the model folder to follow the MVC framework. It means all the logic, works for the application, falls in this category.

View, used to decide about the display of data on the pages. Mostly views uses the model data, for the validation or may be other features. When we login in to application with invalid credentials, it requires some valid entries.

Controller, used to control the display data on the views by the model. It is the middle layer of the framework, which decides about what data are to be shown from the model and of course on which view.

Microsoft described some advantages of MVC based application:

• It makes it easier to manage complexity by dividing an application into the model, the view, and the controller.
• It does not use view state or server-based forms. This makes the MVC framework ideal for developers who want full control over the behavior of an application.
• It uses a Front Controller pattern that processes Web application requests through a single controller. This enables you to design an application that supports a rich routing infrastructure. For more information, see Front Controller.
• It provides better support for test-driven development (TDD).
• It works well for Web applications that are supported by large teams of developers and for Web designers who need a high degree of control over the application behavior.

Create First MVC Application using Visual Studio

Add New Elements or Content in jQuery

JQuery provides some standard functions through which developer can easily add element/content to an existing element. User can add an element after or before an existing element by using jQuery functions. These element can also be added using callback functions. Just check some value and according to condition, we can add element easily.

Following are jQuery methods that are used to add new content:

Append method

This function insert content or new element at the end of selected html element. For example

$("#lblComment").append("last comments");

This function will add specified text after the existing text of selected label.

prepend()

This function insert content or new element at the beginning of selected html element. For example

$("#lblComment").prepend("start comments");

This function will add specified text before the existing text of selected label. We can use both these methods to add multiple content by using multiple parameters. These functions can easily get multiple parameters as shown below:

$("#lblComment").prepend("one", "two", "three");
$("#lblComment").append("eight", "nine", "ten");

After() and before()

After method inserts content after the selected html element and before method inserts content before the selected html element. More can be explained by following jQuery code fragment:

$("#lblComment").after("after adding text");
$("#lblComment").before("before adding text");

Both these functions will add the specified text after and before the selected label element respectively. Same as append and prepend, these functions can also be used for adding multiple elements to an existing.

In above examples, we have added only texts only but we can add any other element in place of that text. Just write the element’s html code and place as parameter of these functions, that element will add easily. In further article we will remove the added element/content and how to use/append css classes through jQuery code fragment.

Implementing Callback Functions in JQuery

Callback function reference will execute after the current effect/function/event finished completely. This type of function can be used after any event completion like to set an element’s value after execution of some function finished.

In earlier article we have discussed about callback function execution after finishing effect. These functions executes after current effect have been finished. As the effect completed, the function reference specified as callback will be executed.

Following code block will change the text field of element having id "testComment" as mentioned in the code. This whole process will take place after button (btnComment) click event done.

$("#btnChange").click(function(){
  $("#testComment").text(function(i,origText){
    return "Old text: " + origText + " New text: Changed! on index: " + i;
  });
});

A callback function is one which is passed as an argument in another function and which is invoked after some kind of event. The call back nature of the argument is that, once its parent method completes, the function which this argument represents is then called; that is to say that the parent method calls back and executes the method provided as an argument.

So we can perform anything after any event or any ajax request also e.g. we want to change the html of a div element after clicking on a button, the following code fragment helps us:

$("#btnChange").click(function(){
  $("#testDiv").html(function(i,origText){
    return "Old html: " + origText + " New html: This is new HTML for this div element";
  });
});

Callbacks are so-called due to their usage with pointer languages. If you don't use one of those, just understand that it is just a name to describe a method that's supplied as an argument to other method, such that when the first method is called and its method body completes, the callback method is then invoked, or in other words "called at the back" of the other function.

Get and Set Attribute’s Value in jQuery

JQuery library functions have more functionality than we can think of. All we want through jQuery can be easily implemented like to get values of any element on the web-page. Whether the value is simple text or whole html of that element.

Earlier article was about to get content of text, html and value field assigned to an element on the web-page. Element on the web-page have many attributes like id, name, title, href etc. and its corresponding value that is specific for that attribute.

JQuery library function have some in-built function that can be used to get those attributes value and developer can set those values by using other provided functions. For example the following code fragment will get href value of an anchor tag with specified selector:

alert($("#anchor").attr("href"));

This alert message can be included wherever we want like in any button’s click event or any function called as per requirement.

Developer can also set particular value for any attribute of any element. Following example will set an anchor tag’s (above code fragment) href attribute’s value:

$("#anchor").attr("href","http://dotprogramming.blogspot.com");

Same as above function we can easily set attribute’s value either one or multiple at once. Following code will assign title and href attribute’s value for the same anchor tag only in one function:

$("#anchor").attr({
    "href" : " http://dotprogramming.blogspot.com",
    "title" : "JQuery Learning Material"
  });

These functions for set an attribute’s value can be used callback functions to be execute further operation after setting the value. In the next article we will show those callback functions with syntax and execute some more operations.

Get Content and Attributes in jQuery

Getting and assigning content of elements in jQuery is very simple because of its in-built functions. JQuery provides many in-built functions that can be used to get content of any element and can set html part for any element.

JQuery library contains many DOM related functions that make it easy to use and understand how it is working. Programmer can easily manipulate content of any element or attributes by using existing functions. In rare chances programmer have to write its own functions with collection of JQuery library functions.

To get content of any element on the web-page, programmer can use following three mostly used functions:

• val(): get or set the value of forms field.
• text(): get or set the text content of selected elements.
• html(): get of set the whole content of selected elements including html markup.

Lookout the following example through which we will use all three types of functions and show the values returns by them.

$("#btn").click(function(){
alert($("#lblText1").val());
        alert($("#lblText2").text());
        alert($("#lblText3").html());
});

All the above alert messages will return respective values for selected label. The below code fragment will assign some values to all three labels:

$("#btn").click(function(){
alert($("#lblText1").val("value"));
        alert($("#lblText2").text("text"));
        alert($("#lblText3").html("html"));
});

In the next article we will get and set attribute's value for an element on the web-page.

Callback Functions Execution in jQuery

Callback functions are function which can be invoked under certain conditions. These functions executes after current effect have been finished. As the effect completed, the function reference specified as callback will be executed.

JQuery statements are executed line after line in a sequence and perform action written. In case of effects discussed earlier, next line (whatever you write) will be execute before the effect completes its part. If the next line depends on the effect then it can create errors.

Callback function reference will execute after the current effect finished completely. These functions can easily remove those errors, here is the syntax:

$(selector).show(speed, callback);

Following example will show an alert after div is shown on the button click:

$("#btnShow").click(function(){
$("#divToShow").show("slow", function(){
        alert("Div has been shown");
        });
});

In the above code a callback function have been written that will show an alert message after div will show. If we don’t write any callback function then it will show an alert message without showing the div properly.

$("#btnShow").click(function(){
$("#divToShow").show(2000);
        alert("Div has been shown");
});

This code will not wait for div to show and show an alert message specified. So these type of situations must have callback functions.

Adding Animation to Web Page Part-2: jQuery Effects

JQuery library have all the effects for adding animation as discussed in earlier article. How to show or hide an element, sliding effects on an element or perform any custom animation on web-page have been discussed in my previous discussion.

Wherever these function didn’t work on the page then there may be some script error or you are defining the function with wrong syntax. Whatever the error be, jQuery library is there for help any type of definition, syntaxes or any example.

User can apply fading on an element, and make that element out of visibility, by using below functions specially created for this functionality. Reading an element’s description and do some practical with them are two different tasks. So just read and perform practical to clarify all these effects.

• fadeIn(): used to fade in a hidden element on the web-page.
• fadeOut(): used to fade out a hidden element on the web-page.
• fadeTo(): allows fading to a given opacity.
• fadeToggle(): used to toggle between fadeIn() and fadeOut() methods alternatively.

These methods have some parameters like speed, callback and opacity as per their requirements. Below are the examples for above methods:

$(".divEmployee").fadeIn(“slow”); or $(".divEmployee").fadeIn(4500);
$(".divEmployee").fadeOut(“slow”); or $(".divEmployee").fadeOut(4500);
$(".divEmployee"). fadeToggle (“slow”); or $(".divEmployee"). fadeToggle (4500);
$(".divEmployee"). fadeTo("slow",0.5);

Stop()

This method is used to stop all the effects before it is finished and revert back to the previous stage. It can work with all effects function e.g. hide/show, slideDown/slideUp, fadeIn/fadeOut or any custom animation.

$(".divEmployee").stop();

This function will stop the effect applied on specified element and revert back. If the element is hidden and perform a show() function then it will stop and make that hidden back.

Stop() function may take two parameters stopAll (to clear animation queue, default it will only stop the active animation) and goToEnd (to specify whether complete the current animation or not).

We will discuss about callback feature of these functions means what to do after animation has finished.

Adding Animation to Web Page: jQuery Effects

JQuery library have all the effects for adding animation user can imagine/think about like to animate, fade, toggle, show, hide and etc. All these animation have their own functions according to their job.

jQuery methods allow users to easily use these effects with minimum configuration. In other context we can show or hide any element on the page by using these effects to make better UI. These animation can be done in any event of an existing element. I have listed some of these methods including a brief description:

• hide(): will hide the related element.
• show(): will show related element.
• toggle(): show of hide related element. (If element is shown then it will hide)
• slideDown()/slideUp(): show or hide related element with sliding motion.
• slideToggle(): show of hide related element with sliding motion.
• animate(): this method is used for custom animation.

These methods have also some parameter to be used with e.g. speed (represents predefined speed among slow, normal and fast) and callback (optional - represent a function to be executed after animation completion). Whether the parameter is required or optional is function dependent, may be change in other definition.

$(“#button”).hide(1000); will hide the button as per the given speed
$(“#button”).show(1000); will show the button as per the given speed

Consider following code:

$(".divEmployee").toggle('slow', function(){
             $(".txtMessage").text(successfully done');
          });

It will show/hide the whole div tag and after completion given message will show on the element provided. Following are some examples about how to use these animation methods. Write these according to element on you page and look out the effects.

$(".divEmployee").slideDown('slow');
$(".divEmployee").slideUp('slow');
$(".divEmployee").slideToggle('slow');

The custom animation animate() method will require all the specified parameters to complete the animation. Lookout the following example of custom animation:

  $( "#divEmployee" ).animate({
    opacity: .25,
    height: "toggle"
  }, 4500, function() {
  });

Run this jQuery code and check the animation, don’t forget to confirm the element id on your page. This code will shrinks the height of div to hide it. We will learn more about these effects and how this can stop by using jQuery function.