An asp.net with ajax tutorial

The following is a step by step asp.net with ajax tutorial that will outline some of the most basic functionalities of these web extensions. In essence, asp.net ajax extensions happen to be a critical component of the asp.net programming language. And they are mandated with the task of making most ajax web application functions in this platform more possible as well as effectual. Below is a detailed account to this effect.

Some of the most commonly used asp.net ajax server controls include the Script Manager, Update Panel, Update Progress and the Timer. The first two controls are utilized in asp.net ajax to refresh selected content on a web page with a post back. While the Update Progress control is used to offer status updates on the downloading process that may be taking place in the Update Panel control. Finally the Timer control permits developers to execute post backs at specific intervals on a web page.

The simple application we will make in this asp.net with ajax tutorial will have three custom color controls (red, green and blue), a Script Manager, an Update Panel, a Drop Down List and a placeholder. This application is designed to dynamically create and change the colors of the custom controls whenever the user wishes to do so.

notepad html editor
Well, without wasting further time, let us get into the swing of coding end of things of this asp.net with ajax tutorial.

First we will need to code the control language for each of the custom controls using the following block of code that you can input in an HTML editor such as notepad.

<% Control Language “C#” AutoEventWireup = “true” CodeFile = “RedControl.ascx.cs” inherits = “BlueControl” %>

<div style = “background – color : Blue : Width :100px : height : 100px”> </div>

<%Control Language “C#” AutoEventWireup = “true” CodeFile = “GreenControl.ascx.cs” inherits = “GreenControl” %>

<div style = “background – color : Green : width : 100px : height : 100px”> </div

<% Control Language =”C#” AutoEventWireup = “true” CodeFile = “RedControl.ascx.cs” inherits = “RedControl” %>

<div style = “background – color : Red : width : 100px : height : 100px”>

drop downUsing the default aspx application , key in the following code to create the Script Manager, Update Panel, Drop Down List and of course the placeholder.

<form id = formColorChanger” runat = “server”>

<asp : ScriptManager ID = “ScriptManagerColorChanger” runat = “server”/>

<h2> Using asp Ajax to dynamically create color controls</h2>

<div><table width = “300”><tr valign = “top”>

<td style = “width : ”150px”>

<span style = “font-size : 10pt”> Choose the Color you want <br/> </span>

<asp : DropDownList ID = “ddColor” runat = “server”

AutoPostBack = “true”

OnSelectedIndexChanged = “ddColor_SelectedIndexChanged” width = “100px”>

<asp : ListItemSelected = “true > Green</asp : ListItem>

<asp : ListItem>Blue</asp : ListItem>

<asp : ListItem> Red</asp : ListItem>

</asp : DropDownList>

</td>

<td> <asp : UpdatePanel ID = “UpdatePanel” runat = “server”

<Content Template>

<asp : PlaceHolder ID = “PlaceHolder” runat = “server”

</asp : placeholder>

</ContentTemplate>

<Triggers> <asp : AsyncPostBBackTrigger Contro ID = “ddColor/>

< /Triggers>

</asp :UpdatePanel>

</td>

</tr>

</table>

</div>

</form>

Well that is about all the coding you will definitely need to create these simple yet dynamic color controls as well as the Script Manager, Update Panel, Drop Down list and the Place Holder. With these same principles you can be able to create powerful web extensions that can perform more advanced tasks on web pages and any other web based applications you wish to use. Hope this brief asp.net with ajax tutorial has been able to elaborate on how to use these web extensions and their controls in an appropriate manner. This is an insight on how to go about coding with this respect. With the above, you should be in a position to enjoy as you code accurately.

 
AJAX Tutorial – Getting Started AJAX Tutorial
A Tutorial On Using AJAX In WordPress

Read More

Creating An Ajax Powered Shopping Cart

In this tutorial we will cover how to build your own Ajax shopping. You will need a firm grasp of HTML, CSS and PHP. For an introduction to AJAX, see this jquery ajax tutorial. Our cart will be fetching product names, prices, and more data from the database. You need to have an apache server running you can download either Wamp, Xampp or Mamp. Create a folder in the ‘www’ section of your server and name it Ajax_Cart. Then we proceed to download Thickbox, Jquery and JQuery color animation from Jquery’s website. Create a subfolder and name it cart. Now copy the content you have into the following directories respectively.

cart/js/jquery-1.2.6.pack.js
cart/js/jquery.color.js
cart/js/thickbox.js
cart/css/thickbox.css
cart/images/loadingAnimation.gif
cart/images/macFFBgHack.png

We then setup our thickbox.js by editing the following lines.
var tb_pathToImage = "cart/images/loadingAnimation.gif";

Also the thickbox.css
.TB_overlayMacFFBGHack {background: url(cart/images/macFFBgHack.png) repeat;}

We can now start creating the PHP files we need for the shopping cart. Create shopping_cart.class.php and use the following loading script.

cart

<?php

class Shopping_Cart {
var $cart_name;
var $items = array();

function __construct($name) {
$this->cart_name = $name;
$this->items = $_SESSION[$this->cart_name];
}

function setItemQuantity($order_code, $quantity) {
$this->items[$order_code] = $quantity;
}

function getItemPrice($order_code) {

return 9.99;
}

function getItemName($order_code) {

return 'My Product (' . $order_code . ')';
}

function getItems() {
return $this->items;
}

function hasItems() {
return (bool) $this->items;
}

function getItemQuantity($order_code) {
return (int) $this->items[$order_code];
}

function clean() {
foreach ( $this->items as $order_code=>$quantity ) {
if ( $quantity < 1 )
unset($this->items[$order_code]);
}
}

function save() {
$this->clean();
$_SESSION[$this->cart_name] = $this->items;
}
}

?>

Then we create a PHP script that will load our shopping_cart.class.php and call it load.php

<?php
include('shopping_cart.class.php');
session_start();
$Cart = new Shopping_Cart('shopping_cart');

$Cart->setItemQuantity('HSD-KSE', 2);
$Cart->setItemQuantity('KLS-IEN', 1);
$Cart->setItemQuantity('ELS-OWK', 4);

$Cart->save();

header('Location: cart.php');
?>

We now proceed to create our shopping cart. This is our home page so we will call it cart.php

<?php
include('shopping_cart.class.php');
session_start();
$Cart = new Shopping_Cart('shopping_cart');
?>
<!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>
<title>Shopping Cart</title>

<script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="js/jquery.color.js" type="text/javascript"></script>
<script src="js/cart.js" type="text/javascript"></script>
<link href="css/cart.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<div id="container">
<h1>Shopping Cart</h1>
<?php if ( $Cart->hasItems() ) : ?>
<form action="cart_action.php" method="get">

<table id="cart">
<tr>
<th>Quantity</th>
<th>Item</th>
<th>Order Code</th>

<th>Unit Price</th>
<th>Total</th>
<th>Remove</th>
</tr>

<?php
$total_price = $i = 0;
foreach ( $Cart->getItems() as $order_code=>$quantity ) :
$total_price += $quantity*$Cart->getItemPrice($order_code);
?>
<?php echo $i++%2==0 ? "<tr>" : "<tr class='odd'>"; ?>
<td class="quantity center"><input type="text" name="quantity[<?php echo $order_code; ?>]" size="3" value="<?php echo $quantity; ?>" tabindex="<?php echo $i; ?>" /></td>

<td class="item_name"><?php echo $Cart->getItemName($order_code); ?></td>
<td class="order_code"><?php echo $order_code; ?></td>
<td class="unit_price">$<?php echo $Cart->getItemPrice($order_code); ?></td>

<td class="extended_price">$<?php echo ($Cart->getItemPrice($order_code)*$quantity); ?></td>
<td class="remove center"><input type="checkbox" name="remove[]" value="<?php echo $order_code; ?>" /></td>
</tr>

<?php endforeach; ?>
<tr><td colspan="4"></td><td id="total_price">$<?php echo $total_price; ?></td></tr>
</table>
<input type="submit" name="update" value="Update cart" />

</form>

<?php else: ?>
<p class="center">You have no items in your cart.</p>
<?php endif; ?>
<p><a href="load.php">Load Sample Cart</a></p>

</div>
</body>
</html>
We need a script that will process the cart entries. Name it cart_action.php
<?php

include('shopping_cart.class.php');
session_start();
$Cart = new Shopping_Cart('shopping_cart');

if ( !empty($_GET['order_code']) && !empty($_GET['quantity']) ) {
$quantity = $Cart->getItemQuantity($_GET['order_code'])+$_GET['quantity'];
$Cart->setItemQuantity($_GET['order_code'], $quantity);
}

if ( !empty($_GET['quantity']) ) {
foreach ( $_GET['quantity'] as $order_code=>$quantity ) {
$Cart->setItemQuantity($order_code, $quantity);
}
}

if ( !empty($_GET['remove']) ) {
foreach ( $_GET['remove'] as $order_code ) {
$Cart->setItemQuantity($order_code, 0);
}
}

$Cart->save();

header('Location: cart.php');

?>
We need to import the Jquery scripts for our Ajax cart script to work

<script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="js/jquery.color.js" type="text/javascript"></script>
<script src="js/cart.js" type="text/javascript"></script>

Create a cart.js in the js folder which hold show our cart with the selected items. Inside it add the following code.
selecting

$(function() {
$("#cart tr .remove input").click(function() {
var orderCode = $(this).val();
$.ajax({
type: "GET",
url: "cart_action.php",
data: "remove[]=" + orderCode,
success: function() {
$("#cart tr .remove input[value=" + orderCode + "]").parent().parent().fadeOut(500, function() {
$(this).remove();
calcPrice();
});
},
error: function() {
window.location("cart_action.php?remove[]="+orderCode);
}
});
});

$("#cart tr .quantity input").change(function() {
var orderCode = $(this).attr("name").slice(9, -1);
var quantity = $(this).val();
$.ajax({
type: "GET",
url: "cart_action.php",
data: "quantity[" + orderCode + "]=" + quantity,
success: function() {
var startColor = $("#cart tr .quantity input[name*=" + orderCode + "]").parent().parent().hasClass("odd") ? "#eee" : "#fff";
$("#cart tr .quantity input[name*=" + orderCode + "]").parent().parent().find("td").animate({ backgroundColor: "#ff8" }, 100).animate({ backgroundColor: startColor }, 800);
calcPrice();
},
error: function() {
window.location("cart_action.php?quantity[" + orderCode + "]=" + quantity);
}
});
});
});

function calcPrice() {
var totalPrice = 0;
$("#cart tr .quantity").parent().each(function() {
var quantity = $(".quantity input", this).val();
var unitPrice = $(".unit_price", this).text().slice(1);
var extendedPrice = quantity*unitPrice;
totalPrice += extendedPrice;

$(".extended_price", this).html("$" + extendedPrice);
$("#total_price").html("$"+totalPrice);
});
if ( totalPrice == 0 ) {
$("#cart").parent().replaceWith("<p class='center'>You have no items in your cart.</p>");
}
}

The final step involves creating our index.php where our user can select items. Add the following code to our homepage.
<!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>
<title>Shopping Cart</title>

<script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="js/jquery.color.js" type="text/javascript"></script>
<script src="js/thickbox.js" type="text/javascript"></script>
<script src="js/cart.js" type="text/javascript"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />

<link href="css/thickbox.css" rel="stylesheet" type="text/css" media="screen" />

<script type="text/javascript">
$(function() {
$("form.cart_form").submit(function() {
var title = "Your Shopping Cart";
var orderCode = $("input[name=order_code]", this).val();
var quantity = $("input[name=quantity]", this).val();
var url = "cart_action.php?order_code=" + orderCode + "&quantity=" + quantity + "&TB_iframe=true&height=400&width=780";
tb_show(title, url, false);

return false;
});
});
</script>
</head>

<body>
<div id="container">
<h1>Shopping Cart Demo</h1>
<a href="cart.php?KeepThis=true&TB_iframe=true&height=400&width=780" title="Your Shopping Cart" class="thickbox">Open Cart</a>

<hr />
<a href="cart_action.php?order_code=KWL-JFE&quantity=3&TB_iframe=true&height=400&width=780" title="Your Shopping Cart" class="thickbox">Add three KWL-JFE to cart</a>
<hr />
<form class="cart_form" action="cart_action.php" method="get">

<input type="hidden" name="order_code" value="KWL-JFE" />
<label>KWL-JFE: <input class="center" type="text" name="quantity" value="1" size="3" ?></label>
<input type="submit" name="submit" value="Add to cart" />
</form>
</div>

</body>
</html>

And with that we have successfully learnt Ajax shopping cart example and tutorials.

Read More

Creating A Slick Ajaxed Add-To-Basket With jQuery And PHP
10 Amazing Collections of Ajax Shopping Cart

Read More