ASP.NET На стороне клиента

[Heidel]

ASP.NET На стороне клиента
Привязка скрипта к ЭУ
Для привязки скриптов javasсript есть объект client sсript
У кнопки есть свойство OnClientClick

На странице создаем кнопку

<asp:Button ID="Button1" runat="server" Text="Button" />

В файле кода логики создаем код скрипта и добавляем его к элементу на событие OnClientClick

protected void Page_Load(object sender, EventArgs e)
		{
			string sсript = "return confirm('Вы уверены?');";
			Button1.OnClientClick = sсript;
		}

Либо добавить атрибут в коллекцию атрибутов элемента Attributes

protected void Page_Load(object sender, EventArgs e)
		{
			string sсript = "return confirm('Вы уверены?');";
			Button1.Attributes.Add("onclick", sсript);
		}

Также client sсript manager предназначен для того, чтобы регистрировать скрипты, и контролировать, какие скрипты мы уже зарегистрировали.

Зарегистрируем скрипт на submit

protected void Page_Load(object sender, EventArgs e)
		{
			string sсript = "return confirm('Вы уверены?');";
			ClientScript.RegisterOnSubmitStatement(this.GetType(), "submit", sсript);
		}

При каждой попытке отправить форму на сервер (событие submit), какая бы кнопка или какое бы событие это не сгенерировало, должно появляться это предупреждение.

Зарегистрируем скрипт на запуск через RegisterStartupScript

protected void Page_Load(object sender, EventArgs e)
		{
			string sсript = "alert('Вы уверены?');";
			ClientScript.RegisterStartupScript(this.GetType(), "submit", sсript);
		}

Сообщение будет появляться каждый раз при загрузке страницы.

Зарегистрировать ссылку на скриптовый файл
Add -- New Item -- (вкладка Web) -- Javasсript File

Создадим скрипт

alert('Вы уверены?');

И зарегистрируем скрипт на странице

protected void Page_Load(object sender, EventArgs e)
		{
			ClientScript.RegisterClientScriptInclude("test", "JavaScript1.js");
		}

Работа с клиентскими скриптами
Ajax возможность со стороны клиента вызвать метод на сервере и получить его результат на клиенте без обновления всей страницы.

Реализация обратного вызова Client Callback

Создаем код на странице (скрипт и кнопки)

		<sсript type="text/javasсript">
			function SetTime(time) {
				document.getElementById("txt").value = time;
			}

			function OnError() {
				document.getElementById("txt").value = "error";
				}
		</sсriрt>

		<input id="btn" type="button" value="button" runat="server" />
		<input id="txt" type="text" />

В файле кода логики нужно реализовать интерфейс ICallbackEventHandler
2 метода
GetCallbackResult - возвращает результат callback функции
RaiseCallbackEvent - вызывает callback функцию

namespace WebApplication9
{
	public partial class Default : System.Web.UI.Page, ICallbackEventHandler
	{
		protected void Page_Load(object sender, EventArgs e)
		{
			//Регистрируем скрипт
			btn.Attributes.Add("onclick", ClientScript.GetCallbackEventReference(this, "", "SetTime", "", "OnError", true));
		}

		private string _str;

		public string GetCallbackResult()
		{
			return _str;
		}

		public void RaiseCallbackEvent(string eventArgument)
		{
			_str = DateTime.Now.ToLongTimeString();
		}
	}
}

ASP.NET Ajax
Элемент UpdatePanel - заключенная в него часть страницы будет обновлять отдельно от всей страницы

Toolbox -- AJAX Extension -- ScriptManager - элемент, который управляет регистрацией необходимых скриптов на странице

Чтобы обернуть элементы страницы в UpdatePanel, создаем
Toolbox -- AJAX Extension -- UpdatePanel
внутри создаем элемент ContentTemplate

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
			<ContentTemplate>
				
			</ContentTemplate>
		</asp:UpdatePanel>

Код на странице

	

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

		<asp:UpdatePanel ID="UpdatePanel1" runat="server">
			<ContentTemplate>
				<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
				<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
			</ContentTemplate>
		</asp:UpdatePanel>


		<br />
		<br />
		<br />

		<asp:UpdatePanel ID="UpdatePanel2" runat="server">
			<ContentTemplate>
				<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Button" />
				<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
			</ContentTemplate>
		</asp:UpdatePanel>

		<br />
		<br />
		<br />
		<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>

	

Внутри UpdatePanel также можно создать Triggers

<Triggers>
				<asp:PostBackTrigger ControlID="Button2"/>
			</Triggers>

Т.о. элемент с заданным ID может обновлять всю страницу.

Также можно сделать AsyncPostBackTrigger
Также нужно добавить к UpdatePanel свойство ChildrenAsTriggers и UpdateMode
ChildrenAsTriggers="false" говорит о том, что элементы, находящиеся в UpdatePanel не являются триггерами её обновления
UpdateMode="Conditional" указывает, что мы хотим использовать триггеры

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

		<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
			<ContentTemplate>
				<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
				<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
			</ContentTemplate>
			<Triggers>
				<asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click"/>
			</Triggers>
		</asp:UpdatePanel>

		<br />
		<br />
		<br />

		<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
			<ContentTemplate>
				<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Button" />
				<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
			</ContentTemplate>
			<Triggers>
				<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click"/>
			</Triggers>
		</asp:UpdatePanel>

		<br />
		<br />
		<br />
		<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>

Также нужно переписать обработчики

protected void Button1_Click(object sender, EventArgs e)
		{
			TextBox2.Text = DateTime.Now.ToLongTimeString();
		}

		protected void Button2_Click(object sender, EventArgs e)
		{
			TextBox1.Text = DateTime.Now.ToLongTimeString();
		}

ЭУ UpdateProgress отображается, когда происходят изменения на странице через UpdatePanel

		<asp:UpdateProgress ID="UpdateProgress1" runat="server">
			<ProgressTemplate>
				Loading...
			</ProgressTemplate>
		</asp:UpdateProgress>

ЭУ Timer вызывает PostBack с регулярным интервалом

<asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick"></asp:Timer>

И зададим обработчик события

protected void Timer1_Tick(object sender, EventArgs e)
		{
			TextBox1.Text = DateTime.Now.ToLongTimeString();
			TextBox2.Text = DateTime.Now.ToLongTimeString();
		}

Курсы по asp.net от intuit.ru часть №6

@темы: С#, Курсы по asp.net от intuit.ru часть, ASP.NET, Ссылки