Пример простого калькулятора на основе web-сервиса (asmx)

Данный пример просто до безобразия. Два поля для ввода чисел, кнопка сложения и контрол для вывода результата. Это всего лишь пример использования Web-сервиса (asmx). Вот так выглядят контролы на aspx-странице:

Чтобы создать просто калькулятор на основе Web-сервиса, по типу того, что видно на картинки (рис.1) нужно сделать следующее:

Страница Default.aspx
1. Вставить на страницу следующий код:

< div >
 < input id="Text1" type="text" / >< br / >
 < input id="Text2" type="text" / >< br / >
 < input id="Button1" type="button" value="Count" onclick="return Button1_onclick()" / >
 < asp:Label ID="Label1" runat="server" Text="Label" >< /asp:Label >
< /div >

Поля Text1 и Text2 служат для ввода чисел для их последующего сложения. Кнопка Count как раз и будет отправлять данные в метод Add() web-сервиса Calc.asmx постредсвам кода javascript.

2. Убедиться, что на странице присутствует ScriptManager:

< asp:ScriptManager ID="ScriptManager1" runat="server" >
 < Services >
  < asp:ServiceReference Path="Calc.asmx" / >
 < /Services >
< /asp:ScriptManager >

где, < asp:ServiceReference Path="Calc.asmx" / > — ссылка на web-сервис (будет описан позже, п.4).

3. Добавить javascript на страницу:

< script language="javascript" type="text/javascript">

        function Button1_onclick() {
            var d1 = 0, d2 = 0;
            d1 = document.getElementById("Text1").value;
            d2 = document.getElementById("Text2").value;
            ret = Calc.Add(d1, d2, OnComplete, OnTimeOut, OnError);
        }

        function OnComplete(result) {
            document.getElementById("Label1").innerText = result;
        }

        function OnTimeOut(result) {
            alert("Time Out!");
        }

        function OnError(result) {
            alert("Error!");
        }

< /script >

Кратко опишу:

Button1_onclick() — функция сбора данных из полей ввода и отправки их в вэб-метод.
OnComplete(result) — эта функция выводит результат в Label.
OnTimeOut(result) — это просто сообщение об ощибке при истечении срока ожидания отклика от сервера.
OnError(result) — другие ошибки в работе сервиса будут показаны при помощи этой функции.

Web-сервис Calc.asmx

4. Код web-сервиса должен выглядеть примерно так:

[WebService(Namespace = "http://tempuri.org/&quot;)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService()]
public class Calc : System.Web.Services.WebService {
    private double doubleVal;
    public Calc ()
    {
        //Uncomment the following line if using designed components
        //InitializeComponent();
    }
    [WebMethod]
    public string Add(string dd1, string dd2)
    {
        double d1 = double.Parse(dd1);
        double d2 = double.Parse(dd2);
        double res = d1 + d2;
        return res.ToString();
    }
}

5. Вот наверное и всё, что нужно для простого калькулятора. Вернее это пример работы с web-сервисом (asmx) при помощи JavaScript.

Описание работы: Два поля для ввода чисел (проверка на правильность ввода данные не делалась в этом примере) служат для принятия от пользователя данных для их последующего сложения. При нажатии на кнопку [Count] числа перемножаются и данные выводятся в [Label]. Перезагрузки страницы при этом не происходит ибо всё выполняет JavaScript.

Реклама
Пример простого калькулятора на основе web-сервиса (asmx)