Oct 06

Call a WebService with ASP.Net Ajax

asp.net No Comments »
 In this post I’m going to show you a very simple example where I will from a Web Form call
a Web Service without reloading the page.

When we will use ASP.Net Ajax on our pages we need to add the <asp:ScriptManager> element. The ScriptManager will automatically add the references to the required JavaScript files that provide Atlas functionality. So it’s required on every page where we will use the ASP.Net Ajax features.

When we want to add a reference to our WebService we use the Service child element of the ScriptManager:

<asp:ScriptManager runat="server" ID="scriptManager">

    <services>

      <atlas:servicereference path="~/MyWebService.asmx" />

    </services>

</atlas:ScriptManager>

The code above will add a reference to “MyWebService.asmx”.

Let’s take a look at the MyWebService:
using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;

///
/// Summary description for WebService
///
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{

   public WebService()
   {

       //Uncomment the following line if using designed components
       //InitializeComponent();
   }

   [System.Web.Services.WebMethod]
   [System.Web.Script.Services.ScriptMethod]
   public  string MyMethod(string value)
   {
       return value;
   }

}

The addition of the [ScriptService] Attribute opens up this web service for use with AJAX.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ClientWebService.aspx.cs"
   Inherits="ClientWebService" %>

<!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>
</head>
<body>
   <form id="form1" runat="server">
       <asp:ScriptManager ID="ScriptManager1" runat="server">
           <Services>
               <asp:ServiceReference Path="~/WebService.asmx" />
           </Services>
       </asp:ScriptManager>
       <div>
           <input type="button" onclick="CallMyWebService();" id="myButton" value="Call MyWebService" />
       </div>
   </form>

   <script type="text/javascript">
function CallMyWebService()

{

      WebService.MyMethod("My Value", OnRequestComplete);

}

function OnRequestComplete(result)

{

    alert(result);

}

   </script>

</body>
</html>
Aug 22

Building AJAX Enabled File Uploading System with Progress Bar Using ASP.NET 2.0

Uncategorized No Comments »

In order to use AJAX in ASP.NET we need to have a minimum of ASP.NET 2.0 Framework and AJAX Extensions 1.0 for ASP.NET.

In order to upload a file using AJAX, we are in need of the following main Web Server controls:

1. FileUpload Server Control

2. Button Server Control

Apart from the above, we need to specify the usual AJAX tags ScriptManager, UpdatePanel and ContentTemplate so that during run time the ASP.NET AJAX will know which section of the web page needs to be updated. Let us take a look at the code which uses the above:

<%@ Page Language="C#" AutoEventWireup="true"%>
<html>
<head>
<script runat="server">
protected void UploadFile(object src, EventArgs e)
{
if (myFile.HasFile)
{
   string strFileName;
   strFileName = myFile.FileName;
   myFile.PostedFile.SaveAs(Server.MapPath(".") + "//" + strFileName);
}
}
script>

<script language="javascript" type="text/javascript">
function showWait()
{
if ($get('myFile').value.length > 0)
{
   $get('UpdateProgress1').style.display = 'block';
}
}
script>
<title>File Uploadtitle>
head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
   <Triggers>
       <asp:PostBackTrigger ControlID="btnUpload" />
   Triggers>
   <ContentTemplate>
       <asp:FileUpload ID="myFile" runat="server" />
       <asp:Label ID="lblMsg" runat="server">asp:Label>
       <br />
       <asp:Button ID="btnUpload" runat="server" Text="Upload"
           OnClick="UploadFile" OnClientClick="javascript:showWait();"/>
       <asp:UpdateProgress ID="UpdateProgress1" runat="server"
           AssociatedUpdatePanelID="UpdatePanel1">
           <ProgressTemplate>
               <asp:Label ID="lblWait" runat="server" BackColor="#507CD1"
                   Font-Bold="True" ForeColor="White"
                   Text="Please wait ... Uploading file">asp:Label>
           ProgressTemplate>
        </asp:UpdateProgress>
    </ContentTemplate>
 </asp:UpdatePanel>
 </form>
 </body>
 </html>