Add to Technorati Favorites

Пример использования Web Service и Data Binding в Silver Light

Опубликовано 10 Июль | Автор LOB
Ключевые слова:, ,

Как я и обещал, сегодня продолжаем знакомство Web Service и все это я буду показывать на примере, каталога клиентов, например какой-то фирмы «ХХХ». Фирма находится в одной точке страны, а ее филиал находится в совершенной другой. Но иногда, в филиале есть необходимость запросить, какую либо информацию о клиентах. Для этого наверно можно сделать Windows приложение, которое запрашивала информацию с удаленной машины, находящейся в офисе компании. Но это связано со многими проблемами: 1) Безопасность информации 2) Обновление программы 3) Развертывание приложения и другие. Конечно же в мире современных Интернет технологий, это был бы не самый лучший вариант. Конечно же веб приложение будет намного удобней и сосредоточит все в одном месте, что значительно снизит затраты на поддержку. И с использованием различных, новых технологий позволит нам создать удобный пользовательский интерфейс. Конечно же и здесь будут недостатки и конечно же будут подняты вопросы безопасности и т.п., но это мы оставим уже на совести разработчика ;)

А, так как у нас есть SilverLight, то мы будем писать наше приложение, использую всю мощь SilverLight приложений и возможности Web Service.

Сразу поясню, что мы будем делать.
Создадим Web Service, который будет содержать класс клиентов. И метод, который будет возвращать нам список клиентов, доставаемых из базы.
В нашем SilverLight приложении мы будем дергать этот метод и биндить его на список.
Также создадим поле поиска, которое будет искать по полям: имя, фамилия, адрес клиента.

И так для начала вам понадобиться создать тестовую Базу данных, или использовать уже существующую. Если у вас стоит Visual Studio, то у вас скорей всего установлен SqlExpress. Если нет, установите его, либо установите SQL Server.

Эта часть на самом деле не обязательна, но я сделал это специально, чтобы приблизить наш пример к реальности. В принципе вы можете использовать только класс клиентов, и забивать его вручную, удобными для вас данными без использования базы данных.

Приведу код создания таблицы.

Код SQL :

USE [TEST]

CREATE TABLE [dbo].[Users](
[Name] [varchar](50) COLLATE Cyrillic_General_CI_AS NOT NULL,
[LastName] [varchar](50) COLLATE Cyrillic_General_CI_AS NOT NULL,
[Login] [varchar](50) COLLATE Cyrillic_General_CI_AS NULL,
[Password] [varchar](50) COLLATE Cyrillic_General_CI_AS NULL,
[Address] [varchar](50) COLLATE Cyrillic_General_CI_AS NULL,
[Image] [varchar](50) COLLATE Cyrillic_General_CI_AS NULL
) ON [PRIMARY]

Забьем несколько клиентов.

http://silverlightru.net/

Теперь приступим к нашему Web Service, если кто не знает, что это такое и как их создавать прочтите мою статью.
Назовем его «UsersCatalog». Внутри создадим класс «User»

Код С#:

public class User
{
	public User(){}

	public User(string name, string lastname, string address, string image)
	{
		_name = name;
		_lastname = lastname;
		_address = address;
		_image = image;
	}

	private string _name;
	public string Name
	{
		get { return _name; }
		set { _name = value; }
	}

	private string _lastname;
	public string LastName
	{
		set { _lastname = value; }
		get { return _lastname; }
	}

	private string _address;
	public string Address
	{
		set { _address = value; }
		get { return _address; }
	}

	private string _image;
	public string Image
	{
		set { _image = value; }
		get { return _image; }
	}
}

Теперь создадим метод, который будет возвращать нам список клиентов.

Код C# :

[WebMethod]
public List GetUserList(string searchText)
{
	List userList = new List();
	//Создаем соединение используя ConnectionString из Web.Conf
	using (SqlConnection connect = new SqlConnection(ConfigurationManager.ConnectionStrings["DB"].ConnectionString))
	{
		if (connect != null)
		{ 
			StringBuilder sb = new StringBuilder();
			//Выбираем пользователей у которых адрес, имя или фамилия схожи с текстом поиска
			sb.Append("select * from Users ");
			if (!String.IsNullOrEmpty(searchText))
				sb.AppendFormat( " where Name like '%{0}%' or LastName like '%{0}%' or Address like '%{0}%' ", searchText);
			SqlDataAdapter da = new SqlDataAdapter(sb.ToString(), connect);
			DataTable dt = new DataTable();
			da.Fill(dt);

			if (dt.Rows.Count > 0)
			{ 
				//Заполняем на лист пользователей
				foreach (DataRow curr in dt.Rows)
					userList.Add(new User(curr["Name"].ToString(), curr["LastName"].ToString(), curr["Address"].ToString(), curr["Image"].ToString()));
			}
		}
	}
	return userList;
}

Если вы используете Базу данных не забудьте добавить ConnectionString в Web.config файл Для вашей базы данных.

Как видите, метод забирает данные из базы и отдает нам в виде списка User.
Проверим работоспособность нашего WebService запустим его, использую контекстное меню кликаем по asmx файлу правой клавишей выбираем «View in browser»

http://silverlightru.net/

Введем значение в строку поиска. Как видим результаты нам вернулись в формате XML, и все данные верны.

http://silverlightru.net/

Теперь перейдем к нашему SilverLight приложению. Добавим ссылку на наш сервис в проект, использую «Add Service Reference». И назовем «Catalog»

Создадим простенький пользовательский интерфейс, состоящий из поля для ввода текста поиска, кнопки вызова метода Web Service. И ListBox – который будет содержать список наших клиентов.

Для начала добавим форму поиска.

Код XAML :


<UserControl x:Class="http.Page"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
	<StackPanel  x:Name="LayoutRoot" Background="BlanchedAlmond" >

	  <Grid  Background="Bisque" ShowGridLines="True" >
		  <Grid.RowDefinitions>
			  <RowDefinition Height="50" />
		  </Grid.RowDefinitions>
		  <Grid.ColumnDefinitions>
			  <ColumnDefinition Width="250" />
			  <ColumnDefinition Width="150" />
		  </Grid.ColumnDefinitions>
		  <TextBox x:Name="SearchText" Width="200"  Height="30" Text="Search..."/>
		  <Button  x:Name="SearchButton" Width="100" Height="30"  Content="Go" Grid.Column="1"  Click="SearchButton_Click" />
	  </Grid>
	</StackPanel>
</UserControl>

Под нашей формой добавим Listbox. Если мы просто попытаемся забиндить данные на наш ListBox, то Список будет состоять только из названий класса, например в нашем случае Catalog.Users.

http://silverlightru.net/

Для того, чтобы указать область куда будут выводиться данные, необходимо создать в нашем LisBox - ListBox.ItemTemplate. У ListBox.ItemTemplate – создадим DataTemplate. DataTemplate – как раз содержит повторяющийся темплейт, который будет дублироваться для всех наших клиентов, но будет содержать данные для каждого клиента в отдельности.

Код XAML :


<UserControl  x:Class="http.Page"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
  <StackPanel  x:Name="LayoutRoot" Background="BlanchedAlmond" >

	  <Grid  Background="Bisque" ShowGridLines="True" >
	  <Grid.RowDefinitions>
		  <RowDefinition Height="50" />
	  </Grid.RowDefinitions>
	  <Grid.ColumnDefinitions>
		  <ColumnDefinition Width="250" />
		  <ColumnDefinition Width="150" />
	  </Grid.ColumnDefinitions>
	  <TextBox x:Name="SearchText" Width="200"  Height="30" Text="Search..."/>
	  <Button  x:Name="SearchButton" Width="100" Height="30"  Content="Go" Grid.Column="1"  Click="SearchButton_Click" />
	  </Grid>
	  <ListBox  x:Name="Users" Background="Aqua">
		  <ListBox.ItemTemplate>
			  <DataTemplate>
				  <Grid >
				  <Grid.RowDefinitions>
					  <RowDefinition  Height="50" />
				  </Grid.RowDefinitions>
				  <Grid.ColumnDefinitions>
					  <ColumnDefinition Width="Auto" />
					  <ColumnDefinition Width="Auto" />
					  <ColumnDefinition  Width="Auto" />
					  <ColumnDefinition Width="Auto" />
				  </Grid.ColumnDefinitions>
				  <Image Height="70" Source="{Binding Image,  Mode=OneWay}" Grid.Column="0" Margin="5" />
				  <TextBlock Height="70" Text="{Binding Name,  Mode=OneWay}" Grid.Column="1" Margin="5" />
				  <TextBlock Height="70" Text="{Binding LastName,  Mode=OneWay}" Grid.Column="2" Margin="5" />
				  <TextBlock Height="70"  Text="{Binding Address, Mode=OneWay}" Grid.Column="3"  Margin="5" />
				  </Grid>
			  </DataTemplate>
		  </ListBox.ItemTemplate>
	  </ListBox>
  </StackPanel>

Теперь займемся вызовом нашего Web Service – создадим обработчик события SearchButton_Click. В нем создадим SoapClient нашего Web Service. И Создадим события вызова нашего метода «GetUserList», и его обработчик по окончанию его работы.

Код C# :

private void SearchButton_Click(object sender, RoutedEventArgs e)
{
	Catalog.UsersCatalogSoapClient catalogService = new http.Catalog.UsersCatalogSoapClient(); //создаем СОАП клиент
	catalogService.GetUserListCompleted += new EventHandler(catalogService_GetUserListCompleted); //событие по окончанию работы нашего метода GetUserList
	catalogService.GetUserListAsync(SearchText.Text); //вызов метода GetUserList и передача ему параметров
}

void catalogService_GetUserListCompleted(object sender, http.Catalog.GetUserListCompletedEventArgs e)
{
	if (e.Error == null)
		Users.ItemsSource = e.Result; // Передаем данные в ListBox
}

Теперь запустим наше приложение и проверим данные, которые он вернет при разных запросах.

http://silverlightru.net/

Запросы работаю корректно, данные возвращаются правильно.

http://silverlightru.net/

Как видите, довольно быстро и не сложно можно создать интерактивное приложение, с удобным пользовательским интерфейсом.

Примечание: в базе данных я храню ссылки на картинке, которые хранятся на локлаьной машине. В виде (http://localhost/wc/1.jpg). Для это я создал в IIS виртуальный каталог «wc», который содержит только мои картинки. Это сделано, чтобы показать, что вы можете использовать ссылку на любой сайт, или каталог на вашей локальной машине.

Popularity: 98% [?]

Add to zakladki:
3 комментария | Примеры | Вся статья

3 Комментария к статье “Пример использования Web Service и Data Binding в Silver Light”

  1. спасибо. пригодилось.

  2. Пример использования Web Service и Data Binding в Silverlight - Территория блога Says:

    [...] Оригинал: http://silverlightru.net/primer-ispolzovaniya-web-service-i-data-binding-v-silver-light [...]

  3. [...] так приступим. Кто не читал статью про DataBinding, советую для начала прочесть ее, чтобы вам было более [...]

Leave a Reply

Ваш Комментарий * [b][/b] - [i][/i] - [u][/u]- [quote][/quote]