All posts by Thiyagu

Jquery

Features of JQuery

Leave a comment

Main Focus of jQuery?

A jQuery is a fast and concise JavaScript Library. jQuery simplifies HTML document traversing and other operations like Ajax interaction, event handling, and animation. It is designed to write less code by using the chaining method. It has been created by John Resig in 2006 with a nice motto.

Features of JQuery:

DOM manipulation:

The jQuery made it easy to select DOM elements in our web pages.
They can traverse and able to modify the content by using the selectors(Selecting DOM Objects)

Event handling:

In simple, the event handler handles the event raised by the operation performed by the mouse, keyboard, touch, etc.,

In jQuery, it provides an elegant way to perform a wide variety of events using the DOM object like a user clicking on a button, mouse over on the div, etc.,

Lightweight :

JQuery is a very lightweight library. It will size about 19KB in size.

AJAX Support:

It supports/helps to develop a responsive and feature-rich site using AJAX technology. We can implement Ajax calls using jquery in an easier way

Cross Browser: Jquery has support cross-browser support. It will not depend on any particular browsers.

How to Use Jquery in our Project:

We can Implement jQuery in two ways.

Local Installation: we can download the jQuery library and we can include it in our project.
EG: /jquery/jquery-x.x.x.min.js

CDN: Another way we can include the jQuery library into our project is directly from Content Delivery Network (CDN).
EG : <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js”>

Jquery

What is $ in Jquery?

Leave a comment

What is $ ?

  • In jQuery, $ is an alias for jQuery. From the above statement we can able to understand, function are available without using $.
  • If you need to use another JavaScript library along side with jQuery,  then it will return control of $ back to the other library with a call to $.noConflict().
  • if noConflict() is used than the references will be restored.

Is possible to change $ symbol?

Yes, we can use any alias name instead of $, by changing the below line

// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

where jQuery on the right side is the function-scoped reference.

This will be available in jquery plugin. if u want to change it to JQ then we want to change like below

// Expose jQuery to the global object
window.jQuery = window.JQ = jQuery;

after library loaded in your application you can use JQ instead of $.

 

Keep Cool Coding…

 

Jquery

Jquery Selectors

Leave a comment

What is Selector??

As a name implies, selectors allow us to select the elements/properties like div, span., to performing actions on it.

What is use of it ??

A Selector identifies an HTML tag/element by using selector to manipulate(like apply css, delete the div…) with jQuery code.

Types of Selector :

  • ID/Tag ID Selector:

Represents a tag available with the given ID in the DOM. In simple, select the matched elements which has the same id.

Example : $(“#userid”)

<div id=”userid”></div>

  • Class/Tag Class Selector:

It represents a tag available with the given class in the DOM. In simple, select the matched elements which has the same class.

Example : $(“.userid”)

<div class=”userid”></div>

  • Tag Name/Element Selector :

It represents a tag name available in the DOM, In simple, select eh matched DOM/element
which has the same type

Example : $(“p”)

<p id=”userid”></p>

 

MVC

New Feature in MVC 5 – Bootstrap

Leave a comment

From VS2013, Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created and maintained by Mark Otto and Jacob Thornton.

  • In MVC5 project, Bootstrap is available by default in new MVC5 projects. we can also include in MVC4 by using Nuget.
  • Is it support for all ie Browser’s: It is not recommended for IE7 and below

Why we are using? What is the advantage ?

Now-a-Days, Bootstrap has become an increasingly popular front-end development framework for designing
rich and responsive web pages.The Bootstrap framework provides several benefits for developing rich pages.

Speed of Development

The main/biggest advantages of using Bootstrap it will reduce the developing time of UI.
For example, if you going to start new application with less time, we can use varity of boostrap is available in
the market. It will give more responsive and rich developed code.So making small changes we can achive our goal

Responsiveness

The responsiveness, as a name implies it will have more flexible in all devices like desktop,mobile,tablets…
Boostrap is mainly desined based on the responsive classes.

BootStrap in ASP.NET MVC 5

ASP.NET MVC 5 uses Bootstrap 3 as the CSS Framework in its default ASP.NET Web Application Tempate.
This very nice feature in ASP.NET MVC for developers to make their site more responsive.we can utlize the pleasure of the responsive navigation and website along with all the typography from Bootstrap 3.

Here start with an simple example

STEP 1 :

Create new project using mvc5, bootstrap will also included as default as shown in below (don’t forgot to choose creating mvc application using default template for viewing output)

dotnet-helpers-Bootstrap

STEP 2:

After creating application, run the application to view in the 100% mode as shown below. From the below image, we can see all the menu’s are lined at the top and content also  placed in row manner.

STEP 3:

The main purpose of using bootstrap is to make our website responsive and to make our work much easier.So above pages can adapted to view in any device like mobile,tablet… as shown in below image

In above image, the content are aligned onc by one to adapt the device. And the menu’s are aligned in top most right icon as show in below

MVC

New Feature in MVC 5 – ASP.NET Identity

2 Comments

 

In previous article we discussed little bit about Identity. Here we will discuss more information on ASP.NET Identity.

What is ASP.NET Identity?

In Application user can able to login using a user-name and password which are stored in the database/application.Now-a-days,users are closely coupled with social sites like Facebook, Twitter etc.So considering these social integrations, our web based applications need to allow users to
 Continue reading New Feature in MVC 5 – ASP.NET Identity →

MVC

What’s New Feature in MVC 5?

Leave a comment

Let’s we have a look into some of the new features which have been introduced in ASP.NET MVC 5. Some of the functionality provides the new features in previous version of MVC, but now some of the features have been improved and released in MVC 5.

Some of the new features are

  • Scaffolding
  • ASP.NET Identity
  • One ASP.NET
  • Bootstrap
  • Attribute Routing
  • Filter Overrides

ASP.NET Identity :

It can be used by any ASP.NET framework such as ASP.NET MVC and Web Forms. Using the Identity functionality, we can easily include the third party authentication in to our application/website like Facebook,google,linked in…

In Application user can able to login using a user-name and password which are stored in the database/application.
Now-a-days,users are closely coupled with social sites like Facebook, Twitter etc. So considering these social integration, our web based applications need to allow users to login into website using third party login credentials. There are numerous sites that support open-ID protocol such as google.

Filter overrides

Using filter overrides, we can apply filters to the action method or controller which particularly excludes the global filter or the controller filter for the particular action method or controller.

If we want to override any of the global action filter in our action , then we just need to apply
the OverrideActionFilters attribute like below.

[Authorize(Users=”Anitha”)][RoutePrefix(“Items”)]
public class ItemsController : Controller
{

[OverrideAuthorization]
public ActionResult GetItems(string itemId)
{
….
}
}

One ASP.NET

One ASP.NET is a new unified project system for .NET Web Developers. It makes developer to work with multiple frameworks like MVC, Web API, Web Forms etc., in a single Application/project.

In simple, using the feature of One ASP.NET we can use ASP.NET Web Forms and MVC together in the same Web application.

Attribute Routing

By using attribute routing we can define the route in the same place where controller/action is defined. So we can decouple controller and action names from route entirely.

[Route(“Items/plastic/{id?}”)]
public ActionResult GetElectronicItems(int? id) {
…..
}

Bootstrap

In MVC5 project, Bootstrap is available by default in new MVC5 projects. We can also include in MVC4 by using Nuget. Bootstrap is nothing but a collection of css classes with more responsive for all devices. Now-a-Days, Bootstrap has become an increasingly popular front-end development framework for designing rich and responsive web pages. The Bootstrap framework provides several benefits for developing rich pages.

Note : By up-coming posts, we will analyse more details about each  MVC 5 feature topic with sample examples. Keep on Reading

MVC

Razor View Engine vs Web Form View Engine

Leave a comment

What is View Engine in ASP.NET MVC and How It is used?

  • In Asp.net MVC, View engine holds the responsibility of rendering the view to the browser. MVC supports Razor Engine and Web Form by default
  • There are a lot of Third Party View engines available for use, We can go for them as well. Eg: Nhaml, Park, NDjango, SharpDOM etc.,

Lets see the difference between Razor and Web Form View engines.

Razor View Engine vs Web Form View Engine:

Release :

  • Razor Engine was introduced in MVC3
  • Web Form view engine is available since the MVC was introduced with its default View engine

File Extension :

  • Razor Engine has file extensions: 
    • .cshtml for C#
    • .cbhtml for VB, Partial Views, Editor Template and Layout Page.
  • Web Form Engine is set as default View engine in Visual Studio. It has file extensions:
    • .aspx for views
    • .ascx for partial view
    • .master for layouts

Base Class :

  • Namespace for Razor view engine is System.Web.Razor.
  • Namespace for Web Form view engine is System.Web.WebFormViewEngine.

Syntax :

  • In Razor View, we use the @ symbol succeeded by tag. It is not mandatory to explicitly close the code-block
    Eg : @Html.ActionLink(“Click”,”dotnet-Helpers.com”)
  • In Web Form view engine, we use <%: … %>
    Eg : <% :Html.ActionLink(“Click”,”dotnetHelpers”)%>

Comments :

  • Razor uses @* …. *@ for comments.
  • Web Form uses <!–…–> for comments.

Test Driven Development :

  • The Razor Engine supports TDD.
  • Web Form view engine does not support TDD because it depends on the System.Web.UI.Page class

Design Mode :

  • In Razor Engine, it does not support design mode in visual studio.(ie., Preview mode).
  • In Web Form Engine, it support design mode.
MVC

Creating Multiple Web.Config files

Leave a comment

Where to use?

If we deal with multiple development environments, then it became very tricky to track the environment specific settings. To achieve this VS allows us to have more than one web.Config file in single project

Creating multiple Web.Config files

Step : 1

In Visual Studio, navigate to the Solution Configuration drop down list and choose “Configuration Manager”

Step : 2

The wizard look like below

Then choose the solution configuration drop down and select “New”.

Step : 3

In the wizard enter the name and click “OK”. If your want to copy setting from any other transform then choose it(other settings like Debug,release)

Step : 4

Finally, right-click on Web.Config file and choose “Add Config Transform” to add newly created configuration file under web.config like below

Then click web.config file and see the newly added file(ie., Web.QAMode.config)

Step : 5

Select required mode and run the application.

MVC

WCF Service Application vs WCF Service library

1 Comment

 

What is WCF ?

From msdn,

Windows Communication Foundation (WCF) is a framework for building service-oriented applications. Using WCF, you can send data as asynchronous messages from one service endpoint to another. A service endpoint can be part of a continuously available service hosted by IIS, or it can be a service hosted in an application.

Most of the users confuse where to use WCF Service Application and WCF Service library, so here let we find the result for this confusion

where to use Service Application ?

  • If you want WCF services to be host in different platforms,like IIS, Windows service,console application.
    you should choose WCF Library and you can just reference your library from your new host.
  • A service application includes a website host already setup for you.

Where to use WCF Service library ?

  • If you want your Services host to be host in IIS/ASP.NET only, then  we can use WCF Application.
  • A service library is a library of services that a host can reference and startup.

Creating WCF Service Application

Let we create WCF Service Application by using New –> Project –> Choose WCF Service Application

In the Service Library we having IService1 for the service implementation and Service1 as an App.config file for the configuration (instead of web.config as in the Service Application).

In WCF Service Application, we have the following

  • service contract (IService1.cs),
  • service implementation (Service1.svc.cs), and
  • web configuration file (web.config).

then we  have a service host file (Service1.svc).  This  service host file would not be available in WCF Service Library.

 

Creating  WCF Service library

Let we create WCF Service library by using New –> Project –> Choose WCF Service Library

In WCF Service library ,we have the following

  • service contract (IService1.cs),
  • service implementation (Service1.cs), and
  • App configuration file ( instead of web.config )

From the below image we can see  the service host file is not be present in it, so if needed we want to create it manually

MVC

How to consume WCF service in MVC

2 Comments

Here we going to discuss about how to  consuming the WCF service in MVC. For creating WCF refer here

Step 1:

Create a new project and add Service References by right click the project as show below

and in Add Service Reference wizard, enter the address of the service and click ok button to check the availability of the service method. we can also change the namespace to consumed service. Finally click ok to add the service reference to our application

Step 2:

Check whether service added correctly as like below screen by double click the service name to open the object browser window (check with web config file for reference)

If service name space is not added correctly in the above screen then right click the the service and choose ‘Configure Service Reference’, in that wizard unchecked the ‘Reuse types in referenced assemblies’ options and click OK ( it will update in webconfig also )

Step 3:

Create Controller to implement the service.

public ActionResult Index()
{
ServiceReference1.Service1Client uDetail = new ServiceReference1.Service1Client();
string uName = uDetail.DisplayUserName("Aadharsh GK");
return Content(uName);
}

Here i am creating instance for the service and passing the parameter to get result string.

Step 4:

Run the application

Output