Showing posts with label jQuery Ajax. Show all posts
Showing posts with label jQuery Ajax. Show all posts

jQuery templates

jQuery templates is a useful plugin developed by Microsofts's ASP.NET team in collaboration with jquery open source team. Templates helps you to manipulate the data at client side and display in browser. It is more useful to display the dataset that is fetched from database using client side Asynch Ajax call.

jQuery Template example

In order to use jQuery templates we either need to download "jquery.tmpl.js" plugin and add reference or we can also refer it from cdn.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
     <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
  <script type="text/javascript">

      $(document).ready(function () {
          debugger;
          var loc = window.location.href;
          $.ajax({
              type: 'POST',
              url: loc + "/GetBookList",
              data: "{}",
              contentType: "application/json; charset=utf-8"

          })
        .success(function (response) {
            debugger;
            $("#bookCollection").tmpl(response.d).appendTo(".book-container");
        })
        .error(function (response) {
            alert(response.d);
        });

      });
  </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="book-container">
    
    </div>
     <script id="bookCollection" type="text/x-jQuery-tmpl">
        <div>
           <h2>${Title}</h2>
            Author: ${Author}
            price: ${Price}
        </div>
    </script>
    </form>
</body>
</html>
Here in above code below script is template to which we are going to bind the data. <script id="bookCollection" type="text/x-jQuery-tmpl"> <div> <h2>${Title}</h2> Author: ${Author} price: ${Price} </div> </script> And by using $("#bookCollection").tmpl(response.d).appendTo(".book-container"); we actually bind the data to the template and append that template to some fixed html like div.


Below code is for reference to get data from code behind method:


 [WebMethod]
        public static List GetBookList()
        {

            return new List()
                       {
                           new Book {Title = "ASP.NET", Author = "Stephen", Price = 350.9},
                           new Book {Title = "WPF", Author = "Murli", Price = 400},
                           new Book {Title = "WCF", Author = "Avinash", Price = 350}
                       };
        }
Refer link to know how to make a ajax call to code behind.


jQuery call page codebehind method

In asp.net application sometimes we need to call codebehind method from client script. In this post we will see how to call codebehind page method using jquery ajax.

To call codebehind page method from jquery we need to make method static. Also we need to add [WebMethod] attribute for method. So the code behind method will look like:

 [WebMethod]
  public static string GetMessage()
  {
   return "Codebehind method call...";
  }

We also need to add namespace using System.Web.Services; to add [WebMethod] attribute to code behind method.
Now we can call this codebehind method using jquery ajax like

var loc = window.location.href;
$.ajax({
         type: 'POST',
          url: loc + "/GetMessage",
          data: "{}",
          contentType: "application/json; charset=utf-8"
        
        })
        .success(function (response) {
          alert(response.d);

        })
        .error(function (response) {
          alert(response.d);
        });

Here using window.location.href we are getting url of aspx page and by appending method name to it we can call code behind method.

Below code demonstrats how to call codebehind method using jquery ajax and json

jQuery ajax call codebehind page method

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {
var loc = window.location.href;
$("#btnClick").click(function (event) {
$.ajax({
type: 'POST',
url: loc + "/GetMessage",
data: "{}",
contentType: "application/json; charset=utf-8"
})
.success(function (response) {
alert(response.d);
})
.error(function (response) {
alert(response.d);
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnClick" runat="server" Text="Button" />
</div>
</form>
</body>
</html>

Below is the code behind method that will get called by jquery ajax call:

using System;
using System.Web.Services;

namespace aspnetcontrol
{
  public partial class jquerycallpagemethod : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [WebMethod]
    public static string GetMessage()
    {
      return "Codebehind method call...";
    }
  }
}

jQuery ajax handle exception thrown by wcf

When we work with jQuery Ajax call to WCF, it may possible that WCF service will thow an exception. And we need to catch that exception in jquery ajax error routine. In order to show or get exception thrown by service we need to configure includeExceptionDetailInFaults="True" for in behavior like:

<serviceBehaviors>
  <behavior name="">
    <serviceMetadata httpGetEnabled="true" />
    <serviceDebug includeExceptionDetailInFaults="true" />
  </behavior>
</serviceBehaviors>

Now when jquery ajax call revices error then exception comes in resposeText as Message.But we need extract Message from responseText as responseText comes as cominations of error details. This can be done using jQuery.parseJSON like:



 .error(function (response, q, t) {
          var r = jQuery.parseJSON(response.responseText);
        });

Now to get Message part we can use r.Message. This will give you the message that is sent by exception in wcf service.


 .error(function (response, q, t) {
          var r = jQuery.parseJSON(response.responseText);
          alert("Message: " + r.Message);
        });

Code for jQuery ajax handle exception thrown by wcf

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <title>Jquery ajax json call to wcf service</title>
  <script type="text/javascript">
    $(document).ready(function () {
      $("#btnClick").click(function () {
        var dto = { message: $("#messageinput").val() };
        $.ajax({
          type: 'GET',
          url: '<%= ResolveUrl("~/Service1.svc/get-json/GetMessage") %>',
          data: dto,
          contentType: "application/json; charset=utf-8"
        })
        .success(function (response) {
          alert(response.d);
        })
        .error(function (response, q, t) {
          var r = jQuery.parseJSON(response.responseText);
          alert("Message: " + r.Message);
          alert("StackTrace: " + r.StackTrace);
          alert("ExceptionType: " + r.ExceptionType);
          alert("ERROR" + response.d);
        });
      });
    });
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <input type="text" id="messageinput" />
    <asp:Button ID="btnClick" runat="server" Text="Button" />
  </div>
  </form>
</body>
</html>

Note: To test example of catch exception in jquery ajax thrown by wcf service, just throw an application exception or Exception with some message like:

    [WebGet()]
    [OperationContract]
    public string GetMessage(string message)
    {
      //return "WCF" + message;
      throw  new  ApplicationException("This is exception");
    }

Configure wcf service to call in jquery ajax json

In previous post we saw how to create wcf service to be get called by jquery ajax and json. After creating wcf service we need to configure wcf service in web.config in order to make it accessible.

wcf service configuration for jquery ajax call

Configure wcf service

  <system.serviceModel>
    <behaviors>
      <endpointBehaviors>
        <behavior name="GetJson">
          <enableWebScript />
        </behavior>
        <behavior name="PostJson">
          <webHttp />
        </behavior>
      </endpointBehaviors>
      <serviceBehaviors>
        <behavior name="">
          <serviceMetadata httpGetEnabled="true" />
          <serviceDebug includeExceptionDetailInFaults="false" />
        </behavior>
      </serviceBehaviors>
    </behaviors>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" />
    <services>
      <service name="aspnetcontrol.Service1">
        <endpoint address="get-json"
                  binding="webHttpBinding"
                  behaviorConfiguration="GetJson"
                  contract="aspnetcontrol.Service1" />
    
        <endpoint address="post-json"
                  binding="webHttpBinding"
                  behaviorConfiguration="PostJson"
                  contract="aspnetcontrol.Service1" />
      </service>
    </services>
  </system.serviceModel>

Create wcf service to call by jquery ajax json

In this post we will see how to create wcf service in C# that we can call through jquery ajax and json. The namespaces we need in wcf service are System.ServiceModel, System.ServiceModel.Web and System.ServiceModel.Activation.

create wcf service to be called by jquery ajax json

Example- WCF service to call by jquery ajax json

using System.ServiceModel;
using System.ServiceModel.Web;
using System.ServiceModel.Activation;
using System.Web;

namespace aspnetcontrol
{
  [ServiceContract(Namespace = "")]
  [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
  public class Service1 
  {
    [WebGet()]
    [OperationContract]
    public string GetMessage(string message)
    {
      return "WCF" + message;
    }
  }
}

Note: In above code important attributes are [ServiceContract(Namespace = "")], [OperationContract] and [WebGet()]. ServiceContract specifies that class defines service contract in application.
OperationContract specifies that a method defines and operation that is part of web service contract.
WebGet indicates service operation is logically a retrieval operation. In this way we can create wcf service to be called using jquery ajax json. In order to make service accessible we need to configure wcf service in web.config.

jQuery Ajax call to WCF service

In jQuery we can perform an asynchronous HTTP (Ajax) request. In this post we will see simple example of how jquery Ajax call to WCF service works. We can call wcf service using jquery ajax and json.

use jquery ajax to call wcf service
We can use $.ajax to call the wcf service like:
 var dto = { message: $("#messageinput").val() };
        $.ajax({
          type: 'GET',
          url: '',
          data: dto,
          contentType: "application/json; charset=utf-8"
        })
        .success(function (response) {
          alert(response.d);
        })
        .error(function (response) {
          alert("ERROR"+response.d);
        });


Here in above code snippet we have set various parameters for jquery ajax call like: type: 'GET' - means request is of type GET and not POST
url: '', here we have mentioned the url of wcf service, where Service1.svc is wcf service name, get-json is address set in the web.config wcf service and GetMessage is actual method in wcf service.
data: dto is the parameter data that we need to pass to wcf service method.

Example jquery ajax call to wcf service

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <title>Jquery ajax json call to wcf service</title>
  <script type="text/javascript">
   $(document).ready(function () {
      $("#btnClick").click(function () {
        var dto = { message: $("#messageinput").val() };
        $.ajax({
          type: 'GET',
          url: '<%= ResolveUrl("~/Service1.svc/get-json/GetMessage") %>',
          data: dto,
          contentType: "application/json; charset=utf-8"
        })
        .success(function (response) {
          alert(response.d);
        })
        .error(function (response) {
          alert("ERROR"+response.d);
        });
      });
    });
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <input type="text" id="messageinput" />
    <asp:Button ID="btnClick" runat="server" Text="Button" />
  </div>
  </form>
</body>
</html>

In above example we can type some message in textbox and pass message to wcf service using jquery ajax call and get it in respose back.

Note: To run above example we need to create wcf service and configure wcf service endpoint in web.config file properly

jquery attribute selectors

How to Use jQuery Selectors?


jQuery has power of  minimizing lines of code. jQuery would be the powerful tool for the DOM. jQuery is easy to select elements using selector engine, it’s easy syntax, which is based on the same syntax you would use to select elements in CSS by borrowing from CSS 1-3. jQuery  selects or finds element on page by Element Id, it is jQuery option to getElementById. By using get element by id selector jQuery uses elements Id. Other selector jQuery uses is Get element by class. In this jQuery selector class name of the  element is used to access the elements on page. jQuery also get element by attribute. Also by using hierarchy jQurey selects element on page. jQuery has filters that are also useful to get elements.We will see some samples of different types of selectors.

Element by ID         jQuery getElementByID     


In the example below we will see a selection of an element by id.It is same as java scripts getElementById(). Using the id of element jQuery gets element on the page.It has every easy syntax.

<html>
<head>   
<title>Get Element by ID</title>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script> 
<script type="text/javascript">     
//get element by it's ID   
alert($("#message").text()); // Hello jQuery  
</script>
</head> 
<body>    
<div id="message">Hello jQuery</div>  
</body>  
</html>




 



jQuery uses the native JavaScript function getElementById(), for id selectors. The fastest way to select an element is to reference it by its id selector.
It’s also important that your id should not contain the special characters like:
#;&,.+*~':"!^$[]()=>|/
The characters above if not properly escaped ay confuse the jQuery selector engine as it is a different type of selector. You can use escape character way like below to handle special characters.

$(“#some:id”) -> $(“#some\\:id”)

 

Get Elements by its class


In below example we will select all elements on the page that have the specified class name. jQuery uses the class of element and get the element from the page.
jQuery GetElement By Class

<html>  
<head>  
<title>Get Element by class selector</title>  
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>  
<script type="text/javascript">  
//Get  the element by it's classname   
alert($(".message ").text()); // HellojQuery  
</script>  
</head>  
<body>  
<p id="hello">  
<span class="message">Hello</span> <span class="message">jQuery</span>  
</p>  
</body>  
</html>  



In above example, selector matched both the span elements that have class= “message” and combined contents into one result ‘HellojQuery’.

jQuery will use the native JavaScript function GetElementsByClassName().

 

Get Elements by Attribute


Below example shows how to select elements that have an attribute with some specific value.

<html>  
<head>  
<title>Get Element by its attribute</title>  
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>  
<script type="text/javascript">  
//get  elements by its attribute   
alert($("input[name= name]").val()); // johan   
</script>  
</head>  
<body>  
<form>  
<p> Name: <input type="text" name="name"  value="Johan" />  </p>
<p> Phone: <input type="text" name="phone" value="0000000" /> </p>
</form>  
</body>  
</html>  



Here selector finds all matching ‘input’ elements then the element that have an attribute of ‘name’ and that also have the value ‘name’.

 

Get Elements by Hierarchy


Descendent Selector (“parent child”) – This will selects all descendent child elements of the parent including element which may a child, grandchild, great-grandchild, and so on, of that element.

Example:

<p><a href="http://google.com">Google</a></p>  
<div>  
<p> <a href="http://Yahoo.com">Yahoo!</a></p>  
<p><a href="http://gmail.com">Gmail</a></p>  
</div>  
<ul>
<li><a href="http://jquerymobile.com">jQuery Mobile</a></li>
</ul>
<div>
<ul>
<li><a href="http://jquery.com">jQuery</a></li>
<li><a href="http://jqueryui.com">jQuery UI</a></li>
</ul>
</div> 



When we write jQuery like:

$("div p");   



It will give us below result:

<p> <a href="http://Yahoo.com">Yahoo!</a></p>  
<p><a href="http://gmail.com">Gmail</a></p>  



And if we write like below code

$("div ul"); 



then it’s result will be like:

<ul>
<li><a href="http://jquery.com">jQuery</a></li>
<li><a href="http://jqueryui.com">jQuery UI</a></li>
</ul>



Child Selector (“parent > child”) – This may be used when you need to selects all direct child elements of the parent.
Example:

<p><a href="http://google.com">Google</a></p>  
<div>  
<p> <a href="http://Yahoo.com">Yahoo!</a></p>  
<p><a href="http://gmail.com">Gmail</a></p>  
</div>  
<ul>
<li><a href="http://jquerymobile.com">jQuery Mobile</a></li>
</ul>
<div>
<ul>
<li><a href="http://jquery.com">jQuery</a></li>
<li><a href="http://jqueryui.com">jQuery UI</a></li>
</ul>
</div> 



When we write jQuery like:

$("p > a");   



This will give us all the <a> tags:

<a href="http://google.com">Google</a>
<a href="http://Yahoo.com">Yahoo!</a></
<a href="http://gmail.com">Gmail</a> 



And below code will be resulted as:

$("li > a"); 



Result of above code will be

<a href="http://jquerymobile.com">jQuery Mobile</a>
<a href="http://jquery.com">jQuery</a>
<a href="http://jqueryui.com">jQuery UI</a> 



Get Elements by Filters

<!DOCTYPE html>
<html>
<head>
<title>Select Element by Selector Filter</title>
</head>
<body>
jQuery project sites:
<ul>
<li><a href="http://jquery.com">jQuery</a></li>
<li><a href="http://jqueryui.com">jQuery UI</a></li>
<li><a href="http://sizzlejs.com">Sizzle</a></li>
<li><a href="http://jquery.org">jQuery Project</a></li>
</ul>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript">
//Select the element by attribute
alert($("a:first").attr("href")); // http://jquery.com
</script>
</body>
</html> 



There are three types of filter selectors that you can used to get elements: numerical or positioned filters, CSS filters and Pseudo filters

 


Numerical or positioned filters:


:first< matched first Gives –>

:last - Gives last matched element

:first-child – Gives the first child element

:last-child - Gives the last child element

:only-child - Gives all element that have no siblings

:nth-child(n) - Gives the nth child element

:nth-child(even|odd) – Gives the matched  even or odd children elements

:nth-child(xn+y) - Gives the nth matched children elements based on some formula.

:even - Gives even children elements

:odd - Gives odd children elements

:eq(n) - Gives nth position child element

:gt(n) - gives the children element those are greater than the nth position

:lt(n) - gives the children element those are less than the nth position

Traditional CSS filters:

:checked – It is basically used with checkboxes or radio buttons. It will return all checked elements.

:disabled – This will return all disabled elements

:enabled – This will give us all enabled elements

 

jQuery Pseudo filters:


:animated – Gives all elements with animations.

:button – Returns all button elements

:checkbox - Returns all checkbox elements

:contains(string) - Returns the elements those contain given string

Example:  $(“div:contains(Google)”)

:file – Return all file input elements

:has(selector) –Returns elements that have at least one of the specified matched selector.

:header - Returns header elements.

:hidden – Returns all hidden elements

:image - Returns image input elements

:input - Returns form elements

:parent - Returns elements that have children, including text, which are not empty

:password - Returns elements of type password

:radio - Returns radio elements

:reset - Returns reset buttons

:selected - Returns option elements in selected state

:submit - Returns elements of type submit

:text - Returns elements of type text

:visible - Returns elements that are visible