Ajax ASP.NET początki

Mając już utworzony plik defaoult.apsx należy wywalić to czego nie potrzebujemy, czyli oprawy graficznej dostarczonej przez ASP.NET i dorzucić dwa pola input. Jedno do wyświetlania tekstu, a drugie jako przycisk, do wywołania technologi AJAX. Można wywalić całość i skopiować poniższy kod:

<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true"
 CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
 <title></title>
</head>
<body>
 <form id="form1" runat="server">
 <div>
<input type="text" id="name" name="name" />
 <input type="button" value="wywołaj usługę" onclick="callService(this.form);" />

 </div>
 </form>
</body>
</html>

Teraz trzeba stworzyć plik z którego będziemy pobierać dane. Kliknijmy na "add new items" i wybierzmy Web Service tak jak poniżej:

Powstały plik trzeba zmodyfikować do takiej formy:

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

/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {

 public WebService () {

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

 [WebMethod]
 public string sayHello(string name) {
 return "witaj"+name+", mówi serwer";
 }
 
}

Czyli usuwamy komentarze z [System.Web.Script.Services.ScriptService] classa odpowiedzialna za obsługę skryptów i zmieniamy nazwę metody z HelloWorld() na sayHello() z parametrem "name".

Mając już plik z którego będziemy pobierać dane należy umieścić go w naszym kodzie. Wystarczy w kontenerze div wstawić komponent ScriptManager za pomocą view->other window->toolbox i z tej zakładki wybieramy ScriptManager i przeciągamy je w pole kontenera div.

W pole ScriptManager wpisujemy nastepujacy kod:

<asp:scriptmanager runat="server">
<Services>
 <asp:ServiceReference Path="~/WebService.asmx" />
</Services>
</asp:scriptmanager>

Jeśli dodaliśmy prawidłowo Web Service, to w podpowiedziach powinien być widoczny link do tego pliku.

Następnie w sekcji head wypisujemy skrypt, który ma się wykonać (tak jak robiliśmy to w JavaScript).

<script language="javascript" type="text/javascript">
 function callService(f) {
 WebService.sayHello(f.elements["name"].value, callComplet, callError);
 }
 function callComplet(result) {
 window.alert(result);
 }
 function callError(result) {
 window.alert("Błąd" + result);
 }
 </script>

Cały plik Defoul.aspx powinien wyglądać tak:

<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true"
 CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
 <title></title>
 <script language="javascript" type="text/javascript">
 function callService(f) {
 WebService.sayHello(f.elements["name"].value, callComplet, callError);
 }
 function callComplet(result) {
 window.alert(result);
 }
 function callError(result) {
 window.alert("Błąd" + result);
 }
 </script>

</head>
<body>
 <form id="form1" runat="server">
 <div>
 <input type="text" id="name" name="name" />
 <input type="button" value="wywołaj usługę" onclick="callService(this.form);" />
 

 <asp:ScriptManager ID="ScriptManager1" runat="server">
 <Services> <asp:ServiceReference Path="~/WebService.asmx" /></Services>
 </asp:ScriptManager>
 </div>
 </form>
</body>
</html>

Widzimy, że są to trzy funkcje, nas najbardziej interesuje callService(), która to wywołana jest, gdy naciśniemy przycisk botton. Ta funkcja wywołuje plik WebService jako obiekt z metodą sayHello(), którą to wcześnie zmodyfikowaliśmy. Jako parametry tej funkcji przekazujemy wartość elementu "name" z formy. Tak to właśnie wszystko działa. Jeśli cały program był dobrze napisany to po odpaleniu powinniśmy otrzymać taki efekt:

Jak ktoś się pogubił, to załączam kod do tego programu:

Kliknij tu, aby pobrać

Oczywiście w Web Deweloperze nie trzeba za dużo pisać dodawanie atrybutów odbywa się automatycznie poprzez uzupełnianie właściwości w oknie Properties. Jeśli chcemy zobaczyć wszystkie pliki tworzące nasz projekt wystarczy kliknąć view->other window->Solution Explorer, a ukaże nam się ścieżka wszystkich plików. Tak jak to zaprezentowano na poniższym obrazku:

Po lewe stronie widzimy Solution Explorer, a po prawej stronie właściwości danego pliku. Modyfikując właściwości możemy zmieniać ścieżki do plików źródłowych. Jeśli wszystko będziemy tworzyć używając dostępnych narzędzi, to nie będziemy musieli samodzielnie dodawać żadnego modułu (chyba, że własne biblioteki dla JS). Widzimy, że nasz program automatycznie zawsze dodaje biblioteki JQuery dla JavaScript i style CSS dla wyglądu strony. Klikając na odpowiednie pliki możemy modyfikować wygląd strony poprzez zmianę elementów CSS oraz dopisywać różne metody dla poszczególnych podstron naszego projektu.

Pliki kończące się na "cs" są plikami źródłowymi, to w nich znajdują się class'y używane przez nasze skrypty na stronie. Aby przetestować używanie metod i dodawanie elementów aktywnych na naszej stronie dodajmy Przycisk "button" klikając na toolbox i przeciągając go na Naszą formatkę powinnismy otrzymać coś takiego:

Widzimy, że nasz przycisk ma id="Button1" wszystkie właściwości możemy zmieniać w oknie właściwości nie musimy nic pamiętać. Aby utworzyć metodę która wywoła coś po kliknięciu wystarczy kliknąć dwa razy na przycisk. Automatycznie doda się metoda identycznie jak to było w Delphi.

Widzimy, że każda metoda w pliku cs jest od razu wypisana i opisana, co czyni  pisane projekty w ASP.NET łatwiejsze do "ogarnięcia". Dodajmy sobie jeszcze pole tekstowe Label i w funkcji odpowiedzialnej za klikniecie Button1 wpiszcie coś takiego:

protected void Button1_Click1(object sender, EventArgs e)
{
Label1.Text = "jakis tam napis";
}

Oraz dodajmy sobie do funkcji calComplet:

function callComplet(result) {
document.forms['form1'].name.value = result;
window.alert(result);
}

Odpalcie teraz program i zobaczcie jak to działa. Klikając na przycisk "wywołaj usługę" widzimy wyskakujące okienko oraz pole tekstowe uzupełniło się automatycznie tym samym tekstem, który był wyświetlony w okienku. Najważniejsze jest to, że przeglądarka nie odświeżyła strony!! Pobrała tylko napisy z serwera i uzupełniała tylko i wyłącznie pole tekstowe, resztę zostawiła bez zmian. W drugim przypadku klikając na przycisk Button i zauważcie, że pole Label zostało uzupełnione, ale nastąpiło przeładowanie całej strony.

To właśnie jest nasz pierwszy program przy użyciu technologi AJAX.