Разработка страницы UserDetails.aspx.
1. Создайте страницу UserDetails.aspx. Разместите на странице компоненты: DetailsView (ID=dvUser), SqlDataSource (ID=dsUser), FileUpload (ID=fuPhoto), Button (ID=btnPhoto), Image из раздела компонентов HTML (ID=imgUserPhoto, RunAt=server, Height=200, Width=200).
2. Настройте dsUser на выбор данных fio, dob, nick из таблицы users с условием отбора id = Session[“UserId”] для отображения данных текущего пользователя. Выберите свойство UpdateQuery и в поле UpdateCommand укажите:
UPDATE Users SET fio = @fio, dob = @dob, nick = @nick where id = @id
Для параметра @id укажите источник данных Session[“UserId”], для параметра @dob укажите свойство Type=DateTime.
Теперь компонент dsUser может загружать и сохранять данные.
3. Компоненту dvUser укажите свойство DataSourceID=dsUser и выберите свойство Fields. Очистите список SelectedFields и поместите в него следующие поля: TemplateField (HeaderText=ФИО), TemplateField (HeaderText=Дата рождения), TemplateField (HeaderText=Ник), CommandField:Edit,Update,Cancel (EditText=Редактировать, UpdateText=Сохранить, CancelText=Отмена).
4. Выберите у компонента dvUser команду Edit Templates, параметр Display=Field-ФИО. Содержимое поля ItemTemplate отображается, когда dvUser находится в режиме просмотра данных, содержимое поля EditItemTemplate – в режиме редактирования данных. В поле ItemTemplate поместите Label и выполните у него команду Edit DataBindings, свяжите свойство Text с полем данных fio. В поле EditItemTemplate поместите Textbox и RequiredFieldValidator: настройте textbox’у привязку данных к полю fio и ограничение на пустое значение.
5. Установите Display=Field-Дата рождения. Также разместите компоненты Label, TextBox и RequiredFieldValidator. Сделайте привязку компонентов к полю dob, а также укажите формат отображения Short Date. В EditItemTemplate добавьте компонент RegularExpressionValidator для проверки формата даты.
6. По аналогии с Field-ФИО настройте Field-Ник.
7. Выполните команду End Template Editing, dvUser должен выглядеть как на первом рисунке.
8. Запустите приложение. Проверьте работу страницы.
9. Для загрузки изображений в таблицу users создайте обработчик нажатия кнопки btnPhoto:
// проверка, что указан файл и его размер больше 0
if (fuPhoto.PostedFile != null && fuPhoto.PostedFile.ContentLength > 0)
{
// загрузка содержимого файла в переменную img
byte[] img = new byte[fuPhoto.PostedFile.InputStream.Length];
fuPhoto.PostedFile.InputStream.Read(img, 0, img.Length);
// запись данных в таблицу users
SqlConnection conn = new SqlConnection (ConfigurationManager.ConnectionStrings["MyConnectionString"].ToString());
SqlCommand comm = new SqlCommand();
comm.Connection = conn;
comm.CommandText = "update users set photo=@photo where id=@id";
comm.Parameters.AddWithValue("@id", Session["UserID"]);
comm.Parameters.AddWithValue("@photo", img);
conn.Open();
comm.ExecuteNonQuery();
conn.Close();
}
10. Прежде, чем отобразить загруженное изображение на странице, добавьте в проект новый элемент Generic Handler с именем ImageHandler.ashx. Содержимое файла ImageHandler.ashx:
<%@ WebHandler Language="C#" Class="ImageHandler" %>
using System;
using System.Web;
using System.Data.SqlClient;
using System.IO;
using System.Configuration;
public class ImageHandler : IHttpHandler {
// данный метод генерируется автоматически
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "image/jpeg";
context.Response.Cache.SetCacheability(HttpCacheability.Public);
context.Response.BufferOutput = false;
writeSingleImage(context.Request.QueryString["id"], context.Response.OutputStream);
}
// данный метод по значению id выбирает изображение из таблицы users и записывает его в html поток, возвращаемый клиенту
public void writeSingleImage(string id, Stream output)
{
byte[] img = null;
SqlCommand comm = new SqlCommand();
comm.Connection = new SqlConnection(ConfigurationManager.ConnectionStrings["MySiteDBConnectionString"].ConnectionString);
comm.CommandText = "SELECT photo FROM users WHERE id=@id";
comm.Parameters.AddWithValue("@id", id);
comm.Connection.Open();
object res = comm.ExecuteScalar();
if (res != DBNull.Value)
{
img = (byte[])res;
output.Write(img, 0, img.Length);
}
}
// данное свойство генерируется автоматически
public bool IsReusable
{
get {
return false;
}
}
}
11. Для отображения изображения в обработчик Page_Load страницы UserDetails поместите код:
// в качестве источника изображения использовать ImageHandler.ashx
// с параметром id=Session[“UserId”]
imgUserPhoto.Src = "ImageHandler.ashx?id=" + Session["UserId"].ToString();
12. Запустите приложение, проверьте работу страницы.
Отображение изображений внутри компонента GridView.
1. Откройте файл Messages.aspx.
2. В компонент gvMessages добавьте столбец TemplateField.
3. В созданный столбец поместите компонент Image из раздела HTML.
4. Задайте желаемые размеры изображения и укажите значение свойства Src=ImageHandler.ashx?id=<%# Eval("FromUserID") %> - функция Eval подставит значение поля FromUserID, связанное с каждой строкой таблицы.
5. Запустите приложение, проверьте работу страницы.
Настоящий рок - нестандартный стиль, качественная музыка, тексты со смыслом. Только для настоящих ценителей рока!
Для всех онлайн игр: карты оплаты помогут вам продолжить виртуальные путешествия незамедлительно.
Хотите узнать что такое настоящий туризм - хватайте друзей и отправляйтесь в путешествие!
