Tuesday, October 16, 2012

PagingBulletedListExtender Example

 

Sample Example using PagingBulletedListExtender

<form id="form1" runat="server">
    <div>
        <ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
        </ajaxToolkit:ToolkitScriptManager>
        <asp:BulletedList ID="BulletedList1" runat="server">
        <asp:ListItem Text="Assam" Value="1"></asp:ListItem>
        <asp:ListItem Text="Bihar" Value="2"></asp:ListItem>
        <asp:ListItem Text="Chennai" Value="3"></asp:ListItem>
        <asp:ListItem Text="Delhi" Value="4"></asp:ListItem>
        <asp:ListItem Text="Japan" Value="5"></asp:ListItem>
        <asp:ListItem Text="Rajasthan" Value="6"></asp:ListItem>       
        </asp:BulletedList>
        <ajaxToolkit:PagingBulletedListExtender ID="PagingBulletedListExtender1"
             runat="server" TargetControlID="BulletedList1">
        </ajaxToolkit:PagingBulletedListExtender>
    </div>
    </form>

Output

paging BulletExtender1          Paging bulleted 2

“PagingBulletedListExtender” Example which fetches list of state names from the database and displays it in alphabetical order with paging .

Aspx Code:

<form id="form1" runat="server">
   <div>
       <ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
       </ajaxToolkit:ToolkitScriptManager>
       <asp:BulletedList ID="BulletedList1" runat="server"
           DataTextField="state_descp" DataValueField="state_cd">
       </asp:BulletedList>
       <ajaxToolkit:PagingBulletedListExtender ID="PagingBulletedListExtender1"
            runat="server" TargetControlID="BulletedList1">
       </ajaxToolkit:PagingBulletedListExtender>
   </div>
   </form>

Code Behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.Sql;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;

public partial class Ajax_Controls_Examples_PagingBulletedListExtender : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        GetData();
    }
    protected void GetData()
    {
        DataTable DtStates = new DataTable();
        SqlConnection Con = new SqlConnection(ConfigurationManager.ConnectionStrings["MyConString"].ToString());
        Con.Open();

        SqlCommand Cmd = new SqlCommand("Get_StateCodes" , Con);
        Cmd.CommandType = CommandType.StoredProcedure;

        SqlDataAdapter Adp = new SqlDataAdapter(Cmd);
        Adp.Fill(DtStates);

        BulletedList1.DataSource = DtStates;
        BulletedList1.DataBind();

    }
}

Output :

Paging Bulleted 3              PagingBulleted 4

NumericUpDownExtender Example

 

Sample Example using NumericUpDownExtender – AJAX ToolKit Control

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

<!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>Numeric up Down Extender</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
        </ajaxToolkit:ToolkitScriptManager>

        <asp:TextBox id="txtCounter" runat="server"></asp:TextBox>
        <ajaxToolkit:NumericUpDownExtender ID="NumericUpDownExtender1"  runat="server"
            TargetControlID="txtCounter" Minimum="1" Maximum="10" Width="130">
        </ajaxToolkit:NumericUpDownExtender>      
    </div>
    </form>
</body>
</html>

Output

NumericupdownExtender1               NumericUpDownExtender2

We can use NumericUpDownExtender not only for incrementing numbers but also with characters using its “RefValues” attribute. We need to specify comma separated values .

NumericUpDownExtender Example using RefValues attribute:

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

<!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>Numeric up Down Extender</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
        </ajaxToolkit:ToolkitScriptManager>
        <asp:TextBox id="txtCounter" runat="server"></asp:TextBox>       
        <ajaxToolkit:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server"
            TargetControlID="txtCounter" RefValues="Red;Blue;Green;Yellow;" Width="130">
        </ajaxToolkit:NumericUpDownExtender>      
    </div>
    </form>
</body>
</html>

Ouput :

NumericUpDownIndicator3         NumericUpDownIndicator4

MutuallyExclusiveCheckBoxExtender Example

 

Sample Example using MutuallyExclusiveCheckBoxExtender – AJAX ToolKit Control

Aspx Code:

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

<!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>Mutually Exclusive CheckBox Extender Control Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
        </ajaxToolkit:ToolkitScriptManager>
        <asp:Label ID="lblText" runat="server" Text="Select an Option" ForeColor="Red" >
        </asp:Label>
        <br /><br />
        <asp:CheckBox ID="CheckBox1" runat="server" Text="Hyderabad" />
        <ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="M1" runat="server"
             TargetControlID="CheckBox1" Key="Cities">
        </ajaxToolkit:MutuallyExclusiveCheckBoxExtender>
        <br />
        <asp:CheckBox ID="CheckBox2" runat="server" Text="Chennai" />
        <ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="M2" runat="server"
             TargetControlID="CheckBox2" Key="Cities">
        </ajaxToolkit:MutuallyExclusiveCheckBoxExtender>
        <br />
        <asp:CheckBox ID="CheckBox3" runat="server" Text="Bangalore" />
        <ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="M3" runat="server"
             TargetControlID="CheckBox3" Key="Cities">
        </ajaxToolkit:MutuallyExclusiveCheckBoxExtender>
        <br />
        <asp:CheckBox ID="CheckBox4" runat="server" Text="Delhi" />
        <ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="M4" runat="server"
             TargetControlID="CheckBox4" Key="Cities">
        </ajaxToolkit:MutuallyExclusiveCheckBoxExtender>
        <br />
    </div>
    </form>
</body>
</html>

Output:

MutuallyExclusiveChkbxExtender

ListSearchExtender Example

 

ListSearchExtender Example using DropDownList

Aspx Code :

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

<!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>LIST SEARCH EXTENDER CONTROL EXAMPLE</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <ajaxToolkit:ToolkitScriptManager ID="SC1" runat="server">
    </ajaxToolkit:ToolkitScriptManager>
    <br />    <br />    <br />
    <asp:DropDownList ID="ddlCities" runat="server">
    <asp:ListItem Text="Select Your City" Value="0"></asp:ListItem>
    <asp:ListItem Text="Hyderabad" Value="1"></asp:ListItem>
    <asp:ListItem Text="Chennai" Value="2"></asp:ListItem>
    <asp:ListItem Text="Bangalore" Value="3"></asp:ListItem>
    <asp:ListItem Text="Mumbai" Value="4"></asp:ListItem>
    <asp:ListItem Text="Kerala" Value="5"></asp:ListItem>
    </asp:DropDownList>
    <ajaxToolkit:ListSearchExtender ID="Ls1" runat="server"
         TargetControlID="ddlCities">
    </ajaxToolkit:ListSearchExtender>
    </div>
    </form>
</body>
</html>

Output :

ListSearchExtender               ListSearchExtender1

As soon as end user clicks on the DropDownList the text “Type to Search” will appear. User can type text to search for an item in the list.If that item is present in the list it will be selected.

ListSearchExtender Example using ListBox

Aspx Code :

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

<!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>LIST SEARCH EXTENDER CONTROL EXAMPLE</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <ajaxToolkit:ToolkitScriptManager ID="SC1" runat="server">
    </ajaxToolkit:ToolkitScriptManager>
    <br />    <br />    <br />
   
    <asp:ListBox ID="LstCities" runat="server">
    <asp:ListItem Text="Hyderabad" Value="1"></asp:ListItem>
    <asp:ListItem Text="Chennai" Value="2"></asp:ListItem>
    <asp:ListItem Text="Bangalore" Value="3"></asp:ListItem>
    <asp:ListItem Text="Mumbai" Value="4"></asp:ListItem>
    <asp:ListItem Text="Kerala" Value="5"></asp:ListItem>
    </asp:ListBox>
     <ajaxToolkit:ListSearchExtender ID="ListSearchExtender1" runat="server"
         TargetControlID="LstCities">
    </ajaxToolkit:ListSearchExtender>
    </div>
    </form>
</body>
</html>

Output :

listSearchExtender3         ListSearchExtender5

As soon as end user clicks on the ListBox the text “Type to Search” will appear. User can type text to search for an item in the list.If that item is present in the list it will be selected.

MaskedEditExtender Example

 

Sample Example of MaskedEditExtender Control

Aspx Code :

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

<!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>MASKED EDIT EXTENDER CONTROL EXAMPLE</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
        </ajaxToolkit:ToolkitScriptManager>
        Enter Number:<asp:TextBox ID="TxtNum" runat="server"></asp:TextBox>
        <ajaxToolkit:MaskedEditExtender ID="MaskEditExtender1" runat="server"
             TargetControlID="TxtNum" MaskType="Number" Mask="999">
        </ajaxToolkit:MaskedEditExtender>
      </div>
    </form>
</body>
</html>

Output :

MaskedEditExtender1           MaskedEditExtender2

When TextBox gets focus it shows the format of the text to be entered. like in the above example Mask value is “999” , so it shows ---. if it is “99/99/9999” then it shows –/—/----

In the above example Mask value is “999” , which means it allows only 3 digits to be entered in the textbox. If user enters only less than 3 digits then it takes 0 ‘s by default. if user leaves the textbox empty , it will not return any error as there is no validation for empty input.

To put validation for empty input , we can use “MaskedEditValidator” Control.

Here there is another example of “MaskedEditExtender” to take date input in the textbox.For this we specify the date format in the Mask attribute as “99/99/9999” .  We can use ‘-‘ delimiter also to specify date format. (99-99-9999)

Aspx Code :

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

<!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>MASKED EDIT EXTENDER CONTROL EXAMPLE</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
        </ajaxToolkit:ToolkitScriptManager>
        Enter Date:<asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
        <ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender1" runat="server"
             TargetControlID="txtDate" MaskType="Date" Mask="99/99/9999">
        </ajaxToolkit:MaskedEditExtender>
    </div>
    </form>
</body>
</html>

Output :

MaskedEditExtender3                 MaskedEditExtender4

Friday, October 12, 2012

WebParts in ASP.Net

 

Introduction

It gives an option to the end user to choose which items he wants to appear on the page or hi sportal and which items to hide.Its a way for dynamic web designing.

WebParts allows end users either to add , remove or move items on his portal and also change the appearance of the items. Enduser can personalize his page according to his wish.

Once users has personalised the page , we need to store his option , so that on his next login he would not again repeat this. To store this information earlier developers used concept of personalization which is difficult to maintain. Now it became easy with the help of WebParts.

WebPartManager

It’s a non visual control .It is used to control and manage the WebParts in the page. It controls the communications that happen between elements in a zone and between elements in a zone to elements in another zone. All the pages using web parts must have this WebPartManager. It can be placed in the master page, so that there wont be any need to use it in all the content pages.

WebPartZone

WebParts are defined in zones. We can any web parts to the page.

All the controls which we want to have in a zone should be placed inside ZoneTemplate tag.

Modes of WebParts

WebPartManager supports different modes. They are

Browse : in this mode we can minimise or close the web parts but we can not move them. It we minimize the WebParts , we can again restore them. If we close WebParts it will be removed from the page. We can re-open the closed WebParts in catalog mode.

Display / Design : Enduser can drag and drop WebParts in this mode but can not edit them to change the appearance or its behaviour. Enduser can drag a WebParts only into another WebParts zone and not on to any location on the page.

Edit : In this mode enduser can edit the WebParts like changing the appearance , behaviour , properties and layout of WebParts.

Catalog : It allows the enduser to add or remove WebParts from the page.

Connect : it facilitates for the communication among the elements of different WebParts. For example to send text input given in one WebParts to another WebParts , we can use connect mode.

WebParts Example

ASPX Code

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

       <asp:ScriptManager ID="ScriptManager1" runat="server" />

       <asp:WebPartManager ID="WebPart1" runat="server">
       </asp:WebPartManager>
        <asp:CatalogZone ID="CatalogZone1" runat="server">  
       <ZoneTemplate>
       <asp:PageCatalogPart ID="p1" runat="server"  />    
       </ZoneTemplate>
       </asp:CatalogZone>
       <asp:EditorZone ID="EditorZone1" runat="server">
       <ZoneTemplate>
           <asp:AppearanceEditorPart ID="AppearanceEditorPart1" runat="server" />
            <asp:LayoutEditorPart ID="LayoutEditorPart1" runat="server" />
           <asp:BehaviorEditorPart ID="BehaviorEditorPart1" runat="server" />
            <asp:PropertyGridEditorPart ID="PropertyGridEditorPart1" runat="server">
           </asp:PropertyGridEditorPart>
       </ZoneTemplate>
       </asp:EditorZone>
       Select a mode :<asp:DropDownList ID="ddlWepPartsMode" runat="server" OnSelectedIndexChanged="ddlWepPartsMode_OnSelectedIndexChanged"
            AutoPostBack="true">
            <asp:ListItem Text="Browse" Value="Browse"></asp:ListItem>
            <asp:ListItem Text="Design" Value="Design"></asp:ListItem>
            <asp:ListItem Text="Edit" Value="Edit"></asp:ListItem>
            <asp:ListItem Text="Catalog" Value="Catalog"></asp:ListItem>
       </asp:DropDownList>
       <br />
       <br />
       <asp:WebPartZone ID="Zone1" runat="server" BorderColor="#CC33FF"
           Font-Names="Verdana" Padding="6" >
           <ZoneTemplate>
               <asp:TextBox ID="txtZone1" runat="server" Text="IN ZONE1"></asp:TextBox>
           </ZoneTemplate>
       </asp:WebPartZone>
           <br />
           <br /> 
           <asp:WebPartZone ID="Zone2" runat="server" BorderColor="#993300"
               Font-Names="Verdana" Padding="6" >
               <ZoneTemplate>
                   <asp:TextBox ID="TextBox1" runat="server" Text="IN ZONE2"></asp:TextBox>
               </ZoneTemplate>
           </asp:WebPartZone>

   </form>

Code Behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;

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

    }

    protected void ddlWepPartsMode_OnSelectedIndexChanged(object sender, EventArgs e)
    {
        if (ddlWepPartsMode.SelectedValue == "Browse")
        {
            WebPart1.DisplayMode = WebPartManager.BrowseDisplayMode;
        }
        else if (ddlWepPartsMode.SelectedValue == "Design")
        {
            WebPart1.DisplayMode = WebPartManager.DesignDisplayMode;
        }
        else if (ddlWepPartsMode.SelectedValue == "Edit")
        {
            WebPart1.DisplayMode = WebPartManager.EditDisplayMode;
        }
        else if (ddlWepPartsMode.SelectedValue == "Catalog")
        {
            WebPart1.DisplayMode = WebPartManager.CatalogDisplayMode;
        }     
    }

}

Output

WebParts1

Monday, October 8, 2012

TreeView Control Example

 

In this article i will illustrate how to use treeview control.

TreeView Control allows to create a multi level navigation menu.

Create the menu items that treeview has to display in an XML file. Then bind this XML file to treeview control.

1)Create XML file with the menu items.

<?xml version="1.0" encoding="utf-8" ?>
<MyHomepage>
    <Menu Name="About Us">
        <SubMenu Title="History"></SubMenu>
        <SubMenu Title="Our Services"></SubMenu>
        <SubMenu Title="Our Products"></SubMenu>       
    </Menu>
    <Menu Name="Gallery">
        <SubMenu Title="Photos"></SubMenu>
        <SubMenu Title="Videos"></SubMenu>       
    </Menu>
    <Menu Name="Contact Us">
        <SubMenu Title="Phone"></SubMenu>
        <SubMenu Title="Email"></SubMenu>
    </Menu>
</MyHomepage>

Create an aspx page named “TreeView.aspx” and then Now drag and drop TreeView Control and XmlDataSource Controls. Assign Xml file path to “DataFile” attribute of “XmlDataSource” . Then Assign “XmlDataSource” ID to “DataSourceID” attribute of “TreeView” Control.

Specify the databindings as follows and execute it.

<form id="form1" runat="server">
   <div>
       <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="XMLFile.xml">
       </asp:XmlDataSource>
       <asp:TreeView ID="TreeView1" runat="server" DataSourceID="XmlDataSource1">
       <DataBindings>
           <asp:TreeNodeBinding DataMember="MyHomepage" Text="My WebSite" />
           <asp:TreeNodeBinding DataMember="Menu" TextField="Name" />
           <asp:TreeNodeBinding DataMember="SubMenu" TextField="Title" />
       </DataBindings>
       </asp:TreeView>
   </div>
   </form>

Output:

Treeview1

Thursday, October 4, 2012

Creating and Consuming a Web Service

In this article i will illustrate how to create a Sample web service and consume it.

Creating Simple Calculator Web Service

Create a new website and create a folder named “Web Service”.

Now select Add Item and  Select “Web Service” from the templates and name it as “CreateSimpleCalculatorWebService”.

Ws1

It Creates “CreateSimpleCalculatorWebService.asmx” in your folder and “CreateSimpleCalculatorWebService.cs” will be placed in “App_Code” folder.

Now if you see , by default “HelloWorld” web method definition will be there in the cs file.

 

[WebMethod]
public string HelloWorld() {
return "Hello World";
}

[webMethod] , its represents attribute.

To make a function accessible or invoked remotely we need to place this [webMethod] with the function definition. And the function should take “public” access specifier only. if “Private” or “protected” is used it could not be accessed out side the class.

so we will write a function (WebMethod) which adds two numbers and returns the result as follows.

[WebMethod]
    public int addNums(int a, int b)
    {
        return a + b;
    }

now execute this and you can see the following output.

ws2

To test the methods in your web service click on the hyperlink with that function name. Suppose when you click on the addnums hyperlink , it prompts for the user input and invokes the method on click of Invoke button.

ws3

Output window after entering the required input and clicking on invoke button.

ws4

Consume  Web Service:

We have learnt to create a web service . Now we will see how to consume this in our project or website.

Right click the same folder “WebService” and Select “Add Item”. Select “WebForm” and name it “ConsumeWebService.aspx”.

Right click the solution and select “Add Web Reference” . 

Ws5Next

ws6

Now Click on the link  “Web Services in this solution” . It shows all the web services in your solution. As we have created “ CreateSimpleCalculatorWebService” web service , it will be shown in the list.

or

Copy paste the link of the web service that we have created and click “Go” . ( execute “CreateSimpleCalculatorWebService.asmx” and copy that link from the browser)

ws7

Now select the web service .It displays all the methods in the web service that are exposed. Give a any reference name to web service and click ok.and give a any reference name (say here I gave “SimpleCalculator”) and click on “Add Reference”

ws8

Now in “ConsumeWebService.aspx” add two text boxes to input two numbers and a “Add” button on click of which “addnum” web method is invoked and the result is displayed in result textbox.

To work with web services import this namespace “System.Web.Services;”

Aspx Code:

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

<!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></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
            <td>   
                Enter a:<asp:TextBox ID="txta" runat="server"></asp:TextBox><br />
            </td>
            </tr>
            <tr>
            <td>
                Enter b:<asp:TextBox ID="txtb" runat="server"></asp:TextBox><br />
            </td>
            </tr>
            <tr>
            <td>
                <asp:Button ID="btnAdd" runat="server" Text="Add" OnClick="btnAdd_Click" />
            </td>
            </tr>
            <tr>
            <td>
                Result:<asp:TextBox ID="txtResult" runat="server" Enabled="false"></asp:TextBox>
            </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

create an object for the web service class using reference name and invoke the required web method.

SimpleCalculator.CreateSimpleCalculatorWebService obj = new SimpleCalculator.CreateSimpleCalculatorWebService();

Code Behind :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;

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

    }
    protected void btnAdd_Click(object sender, EventArgs e)
    {
        SimpleCalculator.CreateSimpleCalculatorWebService obj = new SimpleCalculator.CreateSimpleCalculatorWebService();
        txtResult.Text =  Convert.ToString(obj.addNums(Int32.Parse(txta.Text) , Int32.Parse(txtb.Text)));
    }
}

Output:

ws9

ws10