Combining asp.net with JavaScript to develop electronic sand table

In the development of network information system based on B/s structure, combining asp.net and client's JavaScript script, we develop the electronic sand table which can interact with the database. The parameter access of the icon in the sandbox is performed by the client and the server, and the icon's movement and the information browsing of the icon depend on the client. Based on the example of system development, this paper expounds the realization process of this method in detail.

Key words asp.net JavaScript e-sandbox

Introduction

Asp. NET technology is a new framework for web development that is completely based on modules and components, provides more flexibility for web developers, and is an effective tool for creating Web applications. Asp. NET is particularly suitable for the development of dynamic Web sites, so that the Web page and users are not only the relationship between the display and browsing, but also dynamic interaction relationship. Most of the interactive tasks can be done by ASP.net server-side code. The author develops the B/s Structure Network Information system for a certain unit, besides the general function, it needs to specially design the geographical module. Because of its many subordinate units of the geographical location will be more frequent changes, and the business work and geographical location of the configuration has an important relationship, to this end, to introduce the system based on database support of the electronic sand table. Enables users at all levels to view and configure the child units to be distributed on the map.

The basic principle of the electronic sand table is to generate multiple movable icons on a map-based Web page, each representing a subunit. However, it is difficult to implement the sandbox function on the web only by ASP.net, because it has higher requirements for interactivity. This is mainly reflected in two aspects: one is the sandbox and database server interaction, which is mainly reflected in the sand table data in the database access; the second is the sandbox and user interaction, which is mainly reflected in the user in the map move icon (mouse drag action) and browse icon information (mouse click action) two aspects. In the actual operation, the sandbox and the user's interaction is more frequent, if each action requires the browser and the server to establish a round trip, will be subject to speed, server performance factors such as constraints, thus prolonging the user's operation waiting time, reduce the practicality of the sandbox.

To this end, JavaScript technology is introduced to meet the need for real-time interaction. JavaScript is a scripting language that is object-based (object) and event-driven (driven) and has a secure performance. JavaScript scripts are embedded in Web pages, and runtime JavaScript code is downloaded to the browser with the Web page. When some of the user's operations do not involve data access, such as moving icons and browsing icon information, the two main sandbox operations can be implemented by JavaScript script, so that users, browsers, servers between the three-tier interaction between users, browsers, two layers of interaction, Effectively improve the speed and flexibility of web response.

Design ideas

This article describes the information system in Windows server+iis5.0+. NET as a platform, using the Asp.net+c#.net constructor framework, SQL Server 2000 is the background database. For the unit is divided into headquarters-partition-sub-unit three-tier structure, according to the administrative level of different permissions: The headquarters level users have the right to browse all units and allocation rights, partition-level users have the right to browse the sub units of the partition and allocation rights, child units have the right to geographical allocation.

In order to minimize the interaction between client and server, the operation of the electronic sand table should be divided into three steps: The first step is to extract the icon parameters (coordinate values and basic information) from the database server when the Web server loads, and download the JavaScript code to the client with the Web page. The second step is to execute the sandbox interaction with the user (Configuration icon and browse icon information) by the JavaScript script; The third step is when the user chooses to save the settings, the Web server receives parameters such as the coordinates from the client, and assigns values to the database server's stored procedures, and the stored procedure performs the preservation of the data.

Programming

1. Web page loading

The Web server extracts the icon parameters (coordinate values and basic information) from the database based on the user ID, and then locates the icon in the map based on the coordinate value, and writes the icon basic information to the Web page code. After the Web page is loaded, the resulting icon is configured on the map at the specified location, with basic information attached. The excerpt procedure is as follows:

private void Page_Load (object sender, System.EventArgs e)//Initialize
{
if (! IsPostBack)//program is the first time the
{
string strconn=configurationsettings.appsettings[' ConnectionString ' is executed;
SqlConnection cn=new SqlConnection (strconn);
SqlCommand cm9=new SqlCommand ("Sp_sketchmap", CN);//extract subunit name and coordinate value
Cm9.commandtype=commandtype.storedprocedure;
Cm9. Parameters.Add ("@unitid", sqldbtype.varchar,50); The consumer unit code
CM9. parameters["@unitid"]. value=session["Unitid"]. ToString ();
Cm9. Parameters.Add ("@D1", sqldbtype.varchar,50); Number 1th subunit name
Cm9. parameters["@D1"]. Direction=parameterdirection.output;
Cm9. Parameters.Add ("@D1A", SqlDbType.Int); The horizontal axis of unit 1th is
Cm9. parameters["@D1A"]. Direction=parameterdirection.output;
Cm9. Parameters.Add ("@D1B", SqlDbType.Int); The 1th unit ordinate
Cm9. parameters["@D1B"]. Direction=parameterdirection.output;
Cm9. Parameters.Add ("@D1C", sqldbtype.varchar,100); 1th Sub Unit basic information
CM9. parameters["@D1C"]. Direction=parameterdirection.output;
...

2. Client operation

Asp. NET controls do not have coordinate properties, so they cannot be moved in a Web page. You can use a Label control (DIV) in an HTML control to work with it as a moving layer, embedding an image control on the layer, and merging the two together to act as an icon for the activity.

There are two main types of JavaScript scripts written: One is the drag action, that is, the icon can be dragged by the mouse to a location on the map, the other is the click Action, the icon is selected in the state, click the right mouse button can show the basic information of the icon. The excerpt procedure is as follows:

＜script language="JavaScript"＞ // JavaScript脚本
……
function dragIt(evt) // 鼠标拖动动作
{
　……
　if (selectedObj) {
shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY))
document.forms(0).TextBox1.value=window.event.clientX – offsetX
document.forms(0).TextBox2.value=window.event.clientY – offsetY
document.forms(0).TextBox3.value=window.event.srcElement.id
　}
}
……
function rightclick(){ //鼠标右键点击动作
　if (event.button==2){
linkex.innerHTML=document.forms(0).TextBoxD1C.value linkex.style.posTop=plane1.style.posTop+20
linkex.style.posLeft=plane1.style.posLeft+20
linkex.style.backgroundColor="Pink"
linkex.style.visibility="visible"
　}
}
＜/script＞