|
|
|
|
|
|
This document is a part of a series, where we used an external JavaScript with a web -page many different ways. The key feature of this document of using "<asp:ScriptReference Path="~/external.js" ScriptMode="Release" />. At this point, I am not sure of pros and cones about "ScriptReference Path="~/external.js" ScriptMode="Release"" over this document doc_mm.AjaxExtension4.htm.Hope will be able to answer later as we explore Java Ajax.
Step 1:
Add a Script reference as shown below, use script Mode
Script Mode :
- auto : Default of Path property.
- Inherit: You may inherit a Script via web.config.
- Release : The script manager loads the release version of script.
Step : 2 Codes
external.js
function dosomething() {
{
var target = document.getElementById("div1");
target.innerHTML += "</br> Thanks again from clicking me";
}
}
function start() {
var target = document.getElementById("div1");
target.innerHTML += " <br/>Added to the main container page ";
}
function clean() {
var target = document.getElementById("div1");
target.innerHTML = "";
}
Style-Sheet main.css
body
{
background-color:Gray;
}
/*-- This is main div */
#div1
{
position: absolute; width: 400px; height: 200px; background-color:#FEFDDE; overflow:auto;
z-index: 1; left: 190px; top:50px; border: 2px solid #000080;
padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px;
}
/* this is left bar with */
#menu
{
padding: 1px 10px;
position: absolute; width: 150px; height: 200px; z-index: 2;
left: 10px; top:50px; border: 2px solid #000080;
background-color: #DDFDFF;
}
a
{
color:Navy; font-weight: bold; text-decoration: underline;
}
Default.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>mm.AjaxExtension6: ScriptReferenc</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body onload="start()">
<form id="form1" runat="server">Belows is the content loaded with JavaScript
<div id="div1">
<asp:Label ID="L1" runat="server" Text=""></asp:Label>
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/external.js" ScriptMode="Release" />
</Scripts>
</asp:ScriptManager>
</div>
<div id="menu">Client side Events<br /><a onclick="javascript:dosomething()"> Click Me</a><br />
<a onclick="javascript:clean()"> Clear Up </a><br /><hr />
<asp:Button ID="Button1" runat="server" Text="Fire Page-load()" />
</div>
</form>
</body>
</html>
Default.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager SM = ScriptManager.GetCurrent(Page);
if (SM != null) { L1.Text += "ScriptManager Found the Current Page </br/>"; }
ScriptReference SRef = new ScriptReference();
SRef.Path="external.js";
if (SRef.Path != null) { L1.Text += SRef.Name.ToString() + SRef.Path.ToString(); }
}
}
Runtime Views:
Click me function
Clear Function
