Window. showModalDialog in. net

The above scene is completely fictitious, or the above text is problematic in system design. At this moment, we can ignore it. The focus of this article is no longer on the rationality of system design.

Directly above: the effect chart is roughly as follows:

The requirement is as follows: when you click "select" in the hyperlink for online editing, a modal pop-up window pops up to let the online editing select a data. (Of course, JavaScript control can be used to control the pop-up DIV, which is not discussed in this article !)

In the above case, you can enter the name until the weight is five. (if you want to be lazy, you can also click the select button. When you click any row of data in the pop-up modal form. Returns the data of this row. And assign it to the text box on the page.

This effect is easy to implement. However, due to my limited technology, only one data can be returned if similar functions are implemented previously. The implementation code is as follows:

// The hyperjoin ID is div. Click the hyperlink and call this JS function to bring up datalist. aspx // and disable datalist. the aspx mode form returns a string value to the parent page // and assigns the value to textbox1 $ ('# div '). click (function () {var result = window. showModalDialog ("datalist. aspx ", title, 'dialogheight: 300px; dialogWidth: 300px; status: no; help: no'); if (typeof (result )! = "Undefined") {$ ('# textbox1'). val (result);} else {alert ("no data selected"); return false ;}});

The code on the datalist. aspx page is as follows:

<Tr onclick = "returnCode ('Lily ') "> <td> Li Si </td> <td> male </td> <td> 14 </td> <td> 150 </td> <td> 60 </ td> </tr>

You need to click any row in the modal form to return data. Data is returned only when a "select" connection is clicked. Therefore, write the click event in tr.

The code returned by JS is as follows:

<Script language = "javascript"> function returnCode (name) {// if (confirm ("Are you sure you want to select this customer? ")! = True) {// return; //} window. returnValue = name; window. close () ;}</script>

After selecting data in the modal form, close the modal form and return the selected data ....

 

Here, an example of the data returned by a modal form is complete! But there is a problem here ..

If I want to return multiple data records. Not simply a name ..... It seems that I can only assemble multiple data into a string with special symbols such as '&' or something. Then split the file on the parent page!

NO. This is not a good solution!

 

After thinking about the system of my colleagues, I made the following changes:

 

<Script language = "javascript"> function returnCode (name, sex, age, height, weight) {// if (confirm ("Are you sure you want to select this customer? ")! = True) {// return; //} var jsonData ={}; jsonData. name = name; jsonData. sex = sex; jsonData. age = age; jsonData. height = height; jsonData. weight = weight; // alert (jsonData); window. returnValue = jsonData; window. close () ;}</script>

I declare an array similar to json before returning. Assign a value to the array and return the json data. For example, here, I return the json data consisting of five data types: name, sex, age, heght, and weight.

The html code is as follows: so easy!

<Tr onclick = "returnCode ('Wang qing', 'female ', '21', '123', 90) "> <td> Wang Yu </td> <td> Female </td> <td> 21 </td> <td> 170 </td> <td> 90 </td> </tr>

In the preceding example. My datalist. aspx page is only responsible for returning the json Array, which contains all the content that may be returned. Then you can use the data you actually need on the page!

In the JS file, I encapsulate it in height. Allow me to overencapsulate: o (& cap; _ & cap;) o

Function Choose (url, title, iWidth, iheight) {/// <summary> /// functions supported by JS modal pop-up window <// </summary> /// <param name = "url" type = "String">/ // relative address of the list page /// </param> /// <param name = "title" type = "String"> /// the title of the list page /// </param> /// <param name = "iWidth" type = "Number"> /// pop-up window width /// </param> /// <param name = "iheight "type =" Number "> // the height of the pop-up window /// </param> /// <returns type =" String "/> var height = 300; var wid Th = 500; if (iheight! = Null) height = iheight; if (iWidth! = Null) width = iWidth; var retvalue; retvalue = window. showModalDialog (url, title, 'dialogheight: '+ height + 'px; dialogWidth:' + width + 'px; status: no; help: no'); return retvalue ;}

I try to extract all the attributes of the modal form into parameters.

The Choose function is just a function. Pop-up and return data. Because js is a weak language. Var provides great convenience. I care what type of data you return. Var can all be done!

Because it needs to be encapsulated. I want to make this function nearly possible public. Reduce the amount of code on the client.

Let's first think about it. The modal window will pop up:

1. First, you must have the modal form content of the selected data. The above explains how to do it. (if you do not understand it, go back to it .)

2. You must have an object that triggers this event.

3. I want to assign a value to the control in this method.

4. A height and width are also required. Because the Choose () method provides the default height and width. However, parameters that can be modified in this way are also provided.

 

The above prerequisites are basically complete! But there is a problem. How can I assign values to the page text box in highly encapsulated JS functions, and ensure that there is no "marry Lang ". Since calling pages is an unknown world. I don't know which page to call this function. And I don't know how many widgets he will send. What should I do?

Okay! I may consider agreeing that you want to call this function to implement the function. Well, the text box that you pass to me must be of the array type. Additionally, there must be differentiated subscripts ".

Then I can encapsulate it! Encapsulate, encapsulate, and seal ...... Installation!

Function ChooseDataFromUrl (EventControl, ValueControls, Url, Title, iWidth, iheight) {// <summary> /// js modal window /// </summary> /// <returns type = "Json"/> /// <param name =" eventControl "type =" String "> // Click the object that triggers the pop-up window. // </param> // <param name =" ValueControl "type =" Elements ">/ // control array to be assigned a value /// </param> /// <param name = "Url" type = "String"> relative address of the list page </param> // /<param name = "Title" type = "String"> ti Tle title (seems useless) </param> /// <param name = "iWidth" type = "Number"> pop-up window width </param> /// <param name = "iheight" type = "Number "> pop-up window height </param >$ ('#' + EventControl ). click (function () {var result = Choose (Url, Title, iWidth, iheight); if (typeof (result )! = "Undefined") {for (control in ValueControls) {$ ('#' + ValueControls [control]). val (result [control]) ;}} else {alert ("no data selected"); return false ;}});}

The preceding functions have six parameters.

1. Objects that trigger function events

2. Control s to be assigned a value

3. A string url parameter. Here is the relative path address of the modal form.

4. Page title (this seems useless)

5. Height

6. Width

First, after this function is called, the above six parameters are passed in. First, the trigger condition is bound to the object that triggers the function event.

The code is as follows:	Copy code
$ ('#' + EventControl). click (function (){}

Second, call the Choose function to return var data. As you know, the Choolse returns a json Array.

Next, I want to traverse the control set! I take the subscripts of the control set to take values from the modal form and assign values to the control.

The code is as follows:	Copy code
For (control in ValueControls) {$ ('#' + ValueControls [control]). val (result [control]);}

This part is a bit hard to understand. After reading the page, the call will suddenly become open!

 

The page HTML code is actually very simple:

 
  
  

   

    
The code is as follows:
    
Copy code
 
   
 
   

    
<Body> <form id = "form1" runat = "server"> <div> Name: <asp: TextBox ID = "txtName" runat = "server"> </asp: textBox> <br/> Gender: <asp: TextBox ID = "txtSex" runat = "server"> </asp: TextBox> <br/> Age: <asp: textBox ID = "txtAge" runat = "server"> </asp: TextBox> <br/> Height: <asp: textBox ID = "txtHeight" runat = "server"> </asp: TextBox> <br/> weight: <asp: textBox ID = "txtweight" runat = "server"> </asp: TextBox> <br/> <a href = "javascript :; "id =" selectEmployee "> select </a> </div> </form> </body>
 
   
  
 
When using the jquery library, I use 1.6.2.

 
  
  

   

    
The code is as follows:
    
Copy code
 
   
 
   

    
<Script src = "../Script/jquery-1.6.2.min.js" type = "text/javascript"> </script>
 
   
  
 
The js call code is also simple:

 
  
  

   

    
The code is as follows:
    
Copy code
 
   
 
   

    
<Script language = "javascript" type = "text/javascript"> // declare a set. The keyword name behind the set must be consistent with the json name returned on the pop-up page. // declare a set of text boxes. Var controls ={}; controls. name = "<% = txtName. clientID %> "; controls. sex = "<% = txtSex. clientID %> "controls. age = "<% = txtAge. clientID %> "new ChooseDataFromUrl (" selectEmployee ", controls," showlist. aspx "," select employee ", 500,800); new ChooseDataFromUrl (" <% = txtName. clientID %> ", controls," showlist. aspx "," select employee ", 800,500); </script>
 
   
  
 
The preceding code triggers the ChooseDataFromUrl event in step 2. The first is to click the "select" hyperlink to trigger, and the other is to click the first one, that is, to trigger the "name" text box. Of course, you can also put a small icon next to the text box to trigger it.