Feeds:
Posts
Comments

Posts Tagged ‘Jquery’

Recently I come across situation where I need to provide browser based Signature Pad and It should work fine in all the devices including apple devices. So I don’t have any other option left then HTML5 Canvas.

If you want to create a browser based signature pad then visit the link below.

http://thomasjbradley.ca/lab/signature-pad/

To save signed signature visit the link below. (CODE IS IN C#)

http://www.dotnetfunda.com/articles/article1662-saving-html-5-canvas-as-image-on-the-server-using-aspnet.aspx

 

Download Source  [My new blog Address]
Let me know in case of any problem.

Advertisements

Read Full Post »

I search a lot in Google for a whole day but didn’t find any perfect example to populate data into gridview. Then I decided to do it myself and I find it easy at the end of the day.

In the example which I illustrated below follows the flow:

  1. On document ready method it initiates jQuery AJAX call.
  2. Response will be redirected to the ASPX page and in tern server will respond with JSON data.
  3. jQuery AJAX call back success method used to generates HTML Table with data.
  4. Add HTML to DIV.

Here is the code:

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Untitled Page</title>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<script src="js/commons.js" type="text/javascript"></script>

</head>

<body>

<form id="form1" runat="server">

<div id="divperson">

<strong>[Newly generated HTML will seat here]</strong>

</div>

</form>

</body>

</html>

Default.aspx.cs

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

if (Request.QueryString["id"] == "person")

GetString();

}

}

public void GetString()

{

JavaScriptSerializer _serializers = new JavaScriptSerializer();

string _personJSON = _serializers.Serialize(Person.GetPersonDetails());

Response.Clear();

Response.Write(_personJSON);

Response.End();

}

}

<strong>//Person Class and Members</strong>

public class Person

{

public string Name { get; set; }

public string State { get; set; }

public string PhoneNumber { get; set; }

public Person(string name, string state, string phone)

{

Name = name;

State = state;

PhoneNumber = phone;

}

public static List<Person> GetPersonDetails()

{

List<Person> _person = new List<Person>();

_person.Add(new Person("Hitesh", "Gujarat", "123"));

_person.Add(new Person("Urvish", "Maharastra", "345"));

_person.Add(new Person("Deepak", "Madhya Pradesh", "456"));

return _person;

}

}

I just created Person class, created some properties and a static method to generate list of Person class objects. You need to include System.Collections.Generic and System.Web.Script.Serialization name space for List Class and JavaScriptSerializer class respectively.

In Page_Load method, based on the querystring value the GetString() method will call and JSON response will be generated and submitted as response. You need to catch this response on client side to retrive values within JSON formatted data.

commons.js (a separate JS file)

$('document').ready(function(){

$.ajax({

type: "GET",

data:({id:"person"}),

url: "Default.aspx",

dataType: "json",

success:function(resultdata){

var person;

var _html='<table border="1">';

_html += '<tr>';

_html += '<th>Name</th>';

_html += '<th>State</th>';

_html += '<th>Phone</th>';

_html += '</tr>';

for(index in resultdata)

{

_html +='<tr>' ;

_html +='<td>' + resultdata[index].Name + '</td>';

_html +='<td>' + resultdata[index].State + '</td>';

_html +='<td>' + resultdata[index].PhoneNumber + '</td>';

_html +='</tr>' ;

}

_html +='</table>' ;

$('#divperson').html(_html);

}

});

});

Nothing fancy, using jquery.ajax method I made a GET request to Default.aspx page with some data. Page has return JSON data which I parsed in jquery.ajax success method.

Before you attempt to run this code in your app, make sure you have included jquery-1.4.2.min.js file.

Read Full Post »