All posts by Thiyagu

What is Attribute? How to get Attribute from HTML Element?

What is Attribute in JQuery?

All HTML elements have attributes. It provides additional information about an element. Let us see some example of attributes below.

  • class Name
  • id
  • title
  • name
  • src
  • style

Consider the HTML markup for an div element.

<div id='divUserEmailId' class=''txtclass'> 
</div>

In the above HTML markup id, class are represents the element’s attributes, which consists of a name and a value. Jquery provide an easy way to manipulate the element attributes by using selectively.

How to get Attribute Value?

The attr() method can be used to either fetch the value of an attribute or perform the assigned operation on the onto all matched elements.

Example :

<h2>Jquery Attribute Example</h2>
<html>
<head>
<title>JQuery-Helpers</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$(".jQClass").attr("title", "JQuery-Helpers");
});
</script>
</head>
<body>
<div class="jQClass"></div>
<div class="jQClass"></div>
<div class="jQClass"></div>
</body>
</html>

Explanation:

From the above code , title =”JQuery-Helpers” attribute has added with the value for all the div elements which has the class name “jQClass”.

 

How to use Selectors in JQuery

What is Selectors?

A jQuery Selector is a jquery function which uses expressions to find the given/matching elements inside the DOM object. We have already had details about selectors here. So i am going to starting how to use selectors.

Here we are going to explain much more detail with examples.

How to use Selectors?

The selectors, its the heat of jquery function to perform operation on the DOM object like event handling, Applying animation , etc.,. They fetch exact element that we mention from the HTML document. Here, let we discuss the types of selectors with examples

[su_table]
Type of selector Example
ID Selector
Selects  HTML (DOM object )elements which are match with the given selector $(‘#divCol’)
Name Selector
It select all the element which has the name of divCol inside the div. $(‘div[name=divCol]’)
Class Selector (.Class)
Selects all elements which match with the given Class. $(‘.divCol’)
Multiple Elements 
Selects the all  given type of element in the HTML document. $( “div,span,p.myClass”)
Universal (*)
 Selects all elements available in a DOM. $(‘*’)

[/su_table]

ID Selector :

It selects the element based on the given ID. The ID selector started with “#” symbol. From above example, it selects the element which has the ID attribute “divCol”.

Note : ID can’t be duplicated in a HTML document,so it will select the single Element inside the HTML Element.

Name Selector

It select all the element which matches with the given selector. From above example, $(‘div

[name=divCol]’) it will select the div element which has the name ‘divCol’

Class Selector (.Class)

As a name implies, it will select the element based on the css class name.The class selector started with ‘.’ symbol.
From above example,$(‘.divCol’) it will select all the elements which matche the class in the HTML document.

Multiple Elements

It used to select more that one element. From above example,$( “div,span,p.myClass”) it will select the all the div,span and .myclass attribute in the P tag.

Universal (*)

As name implies, it will select whole element in the document.

Features of JQuery

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”>

What is $ in Jquery?

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 Selectors

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>

 

New Feature in MVC 5 – Bootstrap

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

New Feature in MVC 5 – ASP.NET Identity

 

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

What’s New Feature in MVC 5?

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

Razor View Engine vs Web Form View Engine

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.

Creating Multiple Web.Config files

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.