This documentation is for the old version. Go to the latest Graphics Mill docs

Enhancing Interactivity with Client-Side Scripting (Web Controls)

There are two ways to implement user interface in ASP.NET applications: use server controls and apply client-side scripting using HTML elements and JavaScript (this approach also known as AJAX). First way is wide-spread in ASP.NET, it is easy to use, but it has some disadvantages. This code example demonstrates both of these ways and describes the difference.

For example, you need to add a dropdown list which enables you to zoom the image in the control. You can put an ASP.NET dropdown list and handle SelectedIndexChange server event. In this event handler you modify the state of the control. This is demonstrated below:

ASP.NET Visual Basic

<%@ Page language="VB" AutoEventWireup="true" %>
<%@ Register TagPrefix="aur" Namespace="Aurigma.GraphicsMill.WebControls" 
	Assembly="Aurigma.GraphicsMill.WebControls" %>
<script runat="server" language="VB">
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
	If Not Page.IsPostBack Then
		BitmapViewer1.Bitmap.Load(Server.MapPath("SourceImages/Mountain.jpg"))		
	End If
End Sub

Private Sub DropDownListZoom_SelectedIndexChanged(ByVal sender As System.Object, _
	ByVal e As System.EventArgs)
	
	Dim cultureInfo As New System.Globalization.CultureInfo("en-us", True)
	BitmapViewer1.Zoom = Single.Parse(DropDownListZoom.SelectedItem.Value, cultureInfo)

End Sub
</script>
<html>
	<head>
		<title>Client Scripting</title>
	</head>
	<body>
		<form runat="server" ID="Form1">
			Zoom:
			<asp:DropDownList id="DropDownListZoom" Runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownListZoom_SelectedIndexChanged">
				<asp:ListItem Value="0.25">25%</asp:ListItem>
				<asp:ListItem Value="0.5">50%</asp:ListItem>
				<asp:ListItem Value="1" Selected="True">100%</asp:ListItem>
				<asp:ListItem Value="1.5">150%</asp:ListItem>
				<asp:ListItem Value="2">200%</asp:ListItem>
			</asp:DropDownList>
			<br>
			<br>
			<aur:BitmapViewer id="BitmapViewer1" runat="server" Width="325" height="245" BorderWidth="0" BorderStyle="None"></aur:BitmapViewer>
		</form>
	</body>
</html>

ASP.NET C#

<%@ Page language="C#" AutoEventWireup="true" %>
<%@ Register TagPrefix="aur" Namespace="Aurigma.GraphicsMill.WebControls" 
	Assembly="Aurigma.GraphicsMill.WebControls" %>
<script runat="server" language="C#">
private void Page_Load(object sender, System.EventArgs e)
{
	if (!Page.IsPostBack)
	{
		BitmapViewer1.Bitmap.Load(Server.MapPath("SourceImages/Mountain.jpg"));
	}
}

private void DropDownListZoom_SelectedIndexChanged(object sender, System.EventArgs e)
{	
	System.Globalization.CultureInfo cultureInfo = 
		new System.Globalization.CultureInfo("en-us", true);
	BitmapViewer1.Zoom = Single.Parse(DropDownListZoom.SelectedItem.Value, cultureInfo);
}
</script>
<html>
	<head>
		<title>Client Scripting</title>
	</head>
	<body>
		<form runat="server" ID="Form1">
			Zoom:
			<asp:DropDownList id="DropDownListZoom" Runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownListZoom_SelectedIndexChanged">
				<asp:ListItem Value="0.25">25%</asp:ListItem>
				<asp:ListItem Value="0.5">50%</asp:ListItem>
				<asp:ListItem Value="1" Selected="True">100%</asp:ListItem>
				<asp:ListItem Value="1.5">150%</asp:ListItem>
				<asp:ListItem Value="2">200%</asp:ListItem>
			</asp:DropDownList>
			<br>
			<br>
			<aur:BitmapViewer id="BitmapViewer1" runat="server" Width="325" height="245" BorderWidth="0" BorderStyle="None"></aur:BitmapViewer>
		</form>
	</body>
</html>

As soon as user changes the zoom value in the dropdown list, the page is submitted to server and the SelectedIndexChange event is raised at server. However since it requires a roundtrip, it reduces the interactivity - entire page needs to be refreshed.

That's why there is an alternative method: client-side scripting. Instead of a handling dropdown list server event, you should handle onchange JavaScript event (on the client side). In this event handler you should use the client-side object model of the Graphics Mill for .NET web controls, in particular setZoom method. When you use JavaScript methods of these controls, the page is not refreshed, and only the image inside the control is updated.

This code is demonstrated below:

ASP.NET Visual Basic

<%@ Page language="VB" AutoEventWireup="true" %>
<%@ Register TagPrefix="aur" Namespace="Aurigma.GraphicsMill.WebControls" 
	Assembly="Aurigma.GraphicsMill.WebControls" %>
<script runat="server" language="VB">
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
	If Not Page.IsPostBack Then
		BitmapViewer1.Bitmap.Load(Server.MapPath("SourceImages/Mountain.jpg"))		
	End If
End Sub
</script>
<html>
	<head>
		<title>Client Scripting</title>
		<script language="javascript">
function DropDownListZoom_Change(){
	var dropDownListZoom=document.getElementById("<%=DropDownListZoom.ClientID%>");	
	
	var bitmapViewer1=document.getElementById("<%=BitmapViewer1.ClientID%>"); 
	
	bitmapViewer1.setZoom(dropDownListZoom.options[dropDownListZoom.selectedIndex].value * 1);
}		
		</script>
	</head>
	<body>
		<form runat="server" ID="Form1">
			Zoom:
			<asp:DropDownList id="DropDownListZoom" Runat="server" onchange="DropDownListZoom_Change();">
				<asp:ListItem Value="0.25">25%</asp:ListItem>
				<asp:ListItem Value="0.5">50%</asp:ListItem>
				<asp:ListItem Value="1" Selected="True">100%</asp:ListItem>
				<asp:ListItem Value="1.5">150%</asp:ListItem>
				<asp:ListItem Value="2">200%</asp:ListItem>
			</asp:DropDownList>
			<br>
			<br>
			<aur:BitmapViewer id="BitmapViewer1" runat="server" Width="325" height="245" BorderWidth="0" BorderStyle="None"></aur:BitmapViewer>
		</form>
	</body>
</html>

ASP.NET C#

<%@ Page language="C#" AutoEventWireup="true" %>
<%@ Register TagPrefix="aur" Namespace="Aurigma.GraphicsMill.WebControls" 
	Assembly="Aurigma.GraphicsMill.WebControls" %>
<script runat="server" language="C#">
private void Page_Load(object sender, System.EventArgs e)
{
	if (!Page.IsPostBack)
	{
		BitmapViewer1.Bitmap.Load(Server.MapPath("SourceImages/Mountain.jpg"));
	}
}
</script>
<html>
	<head>
		<title>Client Scripting</title>
		<script language="javascript">
function DropDownListZoom_Change(){
	var dropDownListZoom = document.getElementById("<%=DropDownListZoom.ClientID%>");	
	
	var bitmapViewer1 = document.getElementById("<%=BitmapViewer1.ClientID%>"); 
	
	bitmapViewer1.setZoom(dropDownListZoom.options[dropDownListZoom.selectedIndex].value * 1);
}		
		</script>
	</head>
	<body>
		<form runat="server" ID="Form1">
			Zoom:
			<asp:DropDownList id="DropDownListZoom" Runat="server" onchange="DropDownListZoom_Change();">
				<asp:ListItem Value="0.25">25%</asp:ListItem>
				<asp:ListItem Value="0.5">50%</asp:ListItem>
				<asp:ListItem Value="1" Selected="True">100%</asp:ListItem>
				<asp:ListItem Value="1.5">150%</asp:ListItem>
				<asp:ListItem Value="2">200%</asp:ListItem>
			</asp:DropDownList>
			<br>
			<br>
			<aur:BitmapViewer id="BitmapViewer1" runat="server" Width="325" height="245" BorderWidth="0" BorderStyle="None"></aur:BitmapViewer>
		</form>
	</body>
</html>