IZWebFileManager is featured File Manager control for ASP.NET 2. It is compatible with most-used browsers like MS Internet Explorer and Firefox.
WebSite: http://www.izwebfilemanager.com
Demo: http://www.izwebfilemanager.com/Demo
In my previous post we have seen basic steps to create AJAX-Enabled WCF Service in web application.
Now in this post, We will see how to implement AJAX web methods.
Why Web Method?? Some times, we need functionality that are logically dedicated to specific ASPX page, in such situation we can use web methods.
Write WebMethod as below into your code file (.aspx.cs)
[System.Web.Services.WebMethod]
public static List GetStudents(int schoolID)
{
//TODO: Write your logic to get student list
}
Set EnablePageMethods property of ScriptManager to true as,
Call the web method through the PageMethods as below,
function GetStudents(schoolID) {
PageMethods.GetStudents(schoolID, OnSucceeded, OnFailed);
}
function OnSucceeded(result) {
//TODO: Write logic to display the result from JSON results to HTML
}
function OnFailed(error) {
// Alert user to the error.
alert(error.get_message());
}
In this post we will see how to create an AJAX-enabled Windows Communication Foundation (WCF) service and an ASP.NET client that accesses the service.
Step 1: Right-click the WebSite in the Solution Explorer window and select Add, then New Item, and then AJAX-enabled WCF Service.
Step 2: Give the Namespace for ServiceContractAttribute as,
Here I have given Namespace as DemoServices ,
[ServiceContract(Namespace = "DemoServices")]
Step 3: Implementing methods
Add [OperationContract] attribute to each of the service methods/operations.
As,
[OperationContract]
public string GetName(int studentID)
{
//TODO: Implement method which return name of student
return "Amol";
}
Step 4: Configure ScriptManager to access the service
Now to access service we need to add service reference in the aspx page where we want to access service,
Step 5: Calling service methods from java script To call service we need to create an object of Service class and then call service methods as,
function GetStudent(id) {
var service = new DemoServices.MyService();
service.GetName(id, onSuccess, OnFailed);
return false;
}
While calling service, we have passed two parameters (onSuccess and OnFailed) which is nothing but java scripts functions.
onSuccess function is called when service execute successfully, OnFailed function is called when exception occurred in service method.
Step 6: Results and Error handling
function onSuccess(result) {
//TODO: Write logic to display the result
alert(result);
}
function OnFailed(error) {
// Alert user to the error.
alert(error.get_message());
}
NGChart is .NET class library to work with Google Chart API. Which provides simple classes and methods to generate google charts.
BarChart chart = new BarChart(BarsType.Grouped, BarsDirection.Vertical,
new ChartSize(420, 125),
new ChartData(new int[][]
{
new int[] { 20, 1, 25, 26, 51 },
new int[] { 7, 12, 60, 57, 4 }
}) );
chart.Colors = new ChartColors(new Color[] { Color.DodgerBlue, Color.YellowGreen });
chart.Legend = new ChartLegend(new string[] {"Winter", "Summer"});
//chart.ToString() is return google chart image URL
imgChart.ImageUrl = chart.ToString();
NGChart will generate an URL (Google API) for above code like this:
And above API i.e. URL will display following chart,
WebSite: http://code.google.com/p/NGChart
Samples : http://code.google.com/p/NGChart/wiki/NGChartSamples
Download: zip
Google has provided API to create charts. Google Chart API lets you to generator dynamically chart.
Following pie chart is generated using API,
http://chart.apis.google.com/chart?cht=p3&chd=s:Uf9a&chs=250×100&chl=January|February|March|April
WebSites:
Demo:
While playing with jQuery plugins, I observed that some jQuery plugins are not working in asp.net ajax update panel after Asynchronous request.
As most of the jQuery plugins calls there functions on page onload method, So we need to recall plugin functions after an asynchronous postback is finished.
In my previous post Ajax Events I have given basic idea of handling various asp.net Ajax events including endRequest event which raised after an asynchronous postback is finished and control has been returned to the browser.
We can use endRequest event to recall jQuery plugin’s function.
Here I have used vtip tooltip plugin.
Add following script into your page,
<script language="javascript" type="text/javascript">
function pageLoad() {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(EndRequest);
}
function EndRequest(sender, args) {
// call JTool Tip function..
jQuery(document).ready(function($) { vtip(); })
}
</script>
WebSite:http://amolwable.com/index.php/2009/asp-net-ajax-events
ASP.NET AJAX framework provides various page events that are raised during processing ajax requests.
Following table shows details of Events,
| Event Name | Description |
|---|---|
| beginRequest Event | Raised before processing of an asynchronous postback starts and the postback request is sent to the server. |
| endRequest Event | Raised after an asynchronous postback is finished and control has been returned to the browser. |
| initializeRequest Event | Raised during the initialization of the asynchronous postback. |
| pageLoaded Event | Raised after all content on the page is refreshed as the result of either a synchronous or an asynchronous postback. |
| pageLoading Event | Raised after the response from the server to an asynchronous postback is received but before any content on the page is updated. |
Sys.WebForms.PageRequestManager.instance.add_beginRequest (beginRequestHandler)
Sys.WebForms.PageRequestManager.instance.remove_beginRequest (beginRequestHandler)
Add following script into your page,
function pageLoad() {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
prm.add_beginRequest(beginRequestHandler);
prm.add_pageLoaded(pageLoaded);
}
function InitializeRequest(sender, args) {
//TODO: write InitializeRequest code here
}
function BeginRequestHandler(sender, args) {
//TODO: write BeginRequestHandler code here
}
function EndRequest(sender, args) {
//TODO: write EndRequest code here
}
function pageLoaded(sender, args) {
//TODO: write pageLoaded code here
}
WebSite: http://www.asp.net/AJAX/Documentation
Demo: http://amolwable.com/demo/ajaxevents/AjaxEventsDemo.aspx
Download: http://amolwable.com/demo/ajaxevents/AjaxEventsDemo.zip
In my previous post PayPal Integration with IPN I have wrote about basic PayPal integration using websites payment method by passing the Aggregate Cart Amount to PayPal.
PayPal has also provides facility to pass multiple items to PayPal with individual item details like name, amount, quantity, shipping cost etc. PayPal will then show all item details on payment details page as shown as follows,
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="upload" value="1">
<!-- item 1 --> <input type="hidden" name="item_name_1" value="T-shirt" /> <input type="hidden" name="amount_1" value="25" /> <input type="hidden" name="shipping_1" value="5" /> <input type="hidden" name="quantity_1" value="5" /> <!-- item 2 --> <input type="hidden" name="item_name_2" value="Shirt" /> <input type="hidden" name="amount_2" value="120" /> <input type="hidden" name="shipping_2" value="30" /> <input type="hidden" name="quantity_2" value="50" />
Table shows details of variables used above,
| Name | Value |
| item_name_x | (Required for item #x) Name of item #x in the cart. Must be alpha-numeric, with a 127 character limit |
| item_number_x | Optional pass-through variable associated with item #x in the cart. Must be alpha-numeric, with a 127 character limit |
| amount_x | (Required for item #x) Price of the item #x |
| quantity_x | Quantity of item #x |
| shipping_x | The cost of shipping the first piece (quantity of 1) of item #x |
| shipping2_x | The cost of shipping each additional piece (quantity of 2 or above) of item #x |
Below is final source page,
<form id="PayPal" name="PayPal" method="post" target="_top" action="https://www.PayPal.com/cgi-bin/webscr"> <input type="hidden" name="cmd" value="_cart" /> <input type="hidden" name="upload" value="1" /> <!-- item 1 --> <input type="hidden" name="item_name_1" value="T-shirt" /> <input type="hidden" name="amount_1" value="25" /> <input type="hidden" name="shipping_1" value="5" /> <input type="hidden" name="quantity_1" value="5" /> <!-- item 2 --> <input type="hidden" name="item_name_2" value="Shirt" /> <input type="hidden" name="amount_2" value="120" /> <input type="hidden" name="shipping_2" value="30" /> <input type="hidden" name="quantity_2" value="50" /> <input type="hidden" name="business" value="email@companyname.com" /> <input type="hidden" name="currency_code" value="USD" /> </form>
Most of the e-Commerce and commercial sites are using PayPal for payments. PayPal
provides various payments methods for e-commerce and commercial
websites like Express checkout, Website Payments , email payments,
Virtual Terminals etc .
Here, I have focused on only website payments (Demo),
Here is simple request page, which sends values to PayPal like business email , item details, amount
<form action="https://www.PayPal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_xclick"> <input type="hidden" name="business" value="you@youremail.com"> <input type="hidden" name="item_name" value="Item Name"> <input type="hidden" name="currency_code" value="USD"> <input type="hidden" name="amount" value="10.00"> <input type="hidden" name="notify_url" value="http://yourwebsite/IPNProcess.aspx" /> <input type="hidden" name="return" value="http://yourwebsite/ThankYou.aspx" /> <input type="hidden" name="cancel_return" value="http://yourwebsite/Cancel.aspx" /> <input type="submit" value="submit" > </form>
Information of all hidden fields and its details are available here and here
When buyer clicks on Pay Now button from PayPal order detail form, a encrypted notification is sent to Merchant’s Website for confirmation.
Instant Payment Notification (IPN) is PayPal’s interface for
handling real-time purchase confirmation and server-to-server
communications. IPN delivers immediate notification and confirmation of
PayPal payments you receive and provides status and additional data on pending, cancelled, or failed transactions.
PayPal sends various information with notification (see Table 1), we can use
Request.Form[“”] to receive values of parameters as follows,
string PaymentStatus = HttpContext.Current.Request.Form["payment_status"]; string PaymentType = HttpContext.Current.Request.Form["payment_type"]; string PendingReason = HttpContext.Current.Request.Form["pending_reason"]; string TXN_ID = HttpContext.Current.Request.Form["txn_id"]; string TXN_Type = HttpContext.Current.Request.Form["txn_type"]; //...
Following function will create web request and send to PayPal to receive status of payment (VERIFIED/ INVALID).
public void MakeHttpPost()
{
HttpWebRequest req = (HttpWebRequest)WebRequest.Create("https://www.paypal.com/cgi-bin/webscr");
req.Method = "POST";
req.ContentLength = this.RequestLength.Length + 21;
req.ContentType = "application/x-www-form-urlencoded";
byte[] param = HttpContext.Current.Request.BinaryRead (HttpContext.Current.Request.ContentLength);
string RequestLength = Encoding.ASCII.GetString(param);
RequestLength += "&cmd=_notify-validate";
req.ContentLength = this.RequestLength.Length;
StreamWriter streamOut = new StreamWriter(req.GetRequestStream(), System.Text.Encoding.ASCII);
streamOut.Write(this.RequestLength);
streamOut.Close();
StreamReader streamIn = new StreamReader(req.GetResponse().GetResponseStream());
string Response = streamIn.ReadToEnd();
streamIn.Close();
}
Following table shows list of parameters with notification,
| Parameter | Description |
|---|---|
| txn_id | Unique transaction number |
| payment_date | Payment date in the “18:30:30 Jan 1, 2000 PST” format |
| payer_email | buyer’s e-mail |
| business | seller’s e-mail |
| payer_id | Unique identifier of the buyer. Those who take part in payments performed with the help of PayPal are identified by an e-mail address, but taking into consideration the possibility to change the e-mail, payer_id should be used for the buyer’s identification. |
| item_number | Item identifier |
| item_name | Item name |
| txn_type | Transaction type. Possible values are:
“web_accept“: The payment was performed by clicking the “Buy Now” button. “cart“: The payment was performed by using the built-in PayPal cart. “send_money“: The payment was performed by using the “Send money” function. “reversal“: Money was returned to the buyer on his initiative. |
| payment_status | Payment state. Possible values are:
“Completed“: Transaction was successfully performed, and money is transferred to the seller’s account. If txn_type=”reversal”, the money is returned to the buyer’s account. “Pending“: Payment was delayed. The delay reason is determined in the pending_reason variable. After the payment is complete, PayPal will send another one notification. “Failed“: Payment failed. This state is possible only when the payment was performed from a bank account. “Denied“: Seller cancelled the payment. The payment is in “Refunded“: Money is returned to buyer. The payment is in this state when seller cancels the payment having the Completed state. |
| pending_reason | Reason of payment delay. Possible values are:
“echeck“: Payment was performed with an e-check “multi_currency“: Payment was performed in the currency “intl“: Seller is not a USA dweller. The payment will be completed when the seller confirms the transaction. “verify“: Seller’s account is in the “unverified” state. The payment will be completed when the seller is identified. “address“: “upgrade“: Payment was performed using a credit card and “unilateral“: Seller’s e-mail is not registered in the system. “other“: Another reason. The seller needs to contact Support to know more about the reason. |
| payment_type | Payment type. Possible values are:
“echeck“: Payment was performed with an e-check. “instant“: Payment was performed with a credit card or using a bank account or money from buyer’s PayPal account. |
| mc_gross | Payment amount. |
| mc_fee | Commissions charges. The amount that is put on seller’s account is determined as mc_gross - mc_fee |
| mc_currency | Payment currency. |
| first_name | Buyer’s first name. |
| last_name | Buyer’s last name. |
| address_street | Street. |
| address_city | City |
| address_state | State/Region. |
| address_zip | Zip Code. |
| address_country | Country. |
| verify_sign | Digital signature. It is used in PayPal for transaction verification. |
Table 1
It is important to test IPN integration before “going live”. The
PayPal Sandbox provides an environment for testing without performing
real payment transactions (see Getting Started with PayPal Sandbox). It is also a good idea to test on the live PayPal system before putting a system into production.
Follow the following steps to test integration,
Use Instant Payment Notification (IPN) Simulator tool to test IPN.
I have found awesome collections of cheat sheets on internet which gives quick reference guide of various functionality.
Here are some good cheats links,
Ultimate Web Resources 