Fineui tips (5) pass a value to the subwindow and a value to the parent window (24 additional professional HD images)

Preface

The IFRAME-enabled window control is often used in fineui, which facilitates code decoupling and physically. The introduction of IFRAME involves the issue of passing values. How do I transmit values between the parent window and the Child Window?

Pass value to subwindow

To pass a value to a sub-window, you only need to put the parameter to be passed in the page url. There are two methods:

1. Page sending back, concatenate the required URL through the C # code in the background (Recommended Practice, convenient !)
2. When the page is loaded for the first time, the required URL is registered. (If the parameter is the value of an input box on the page, JavaScript code must be embedded in the URL)

Let's look at an example, which is implemented in the above two ways:

1. Initial display of the page
   
2. Click "select from List" to bring up the selection form (embedded IFRAME page). The value in the text input box of the parent page is selected by default.
   
3. In the pop-up box, click "Henan", close the pop-up box immediately, and place the selected value in the text input box on the parent page.
   

Currently, we only care about the first two steps, that is, how to pass the value of the text input box to the subwindow.

1. Page sending back, concatenate the required URL through the C # code in the background (Recommended Practice, convenient !)

   1 <F: textbox label = "your province" id = "tbxprovince" text = "Anhui" runat = "server"> 2 </F: textbox> 3 <F: button id = "button1" onclick = "button#click" runat = "server" text = "select"> 4 from the list </F: button>

   1 protected void Button1_Click(object sender, EventArgs e)2 {3     string openUrl = String.Format("./passvalue_iframe_iframe.aspx?selected={0}", HttpUtility.UrlEncode(tbxProvince.Text));4 5     PageContext.RegisterStartupScript(Window1.GetShowReference(openUrl));6 }

   In the send-back event of the button, we can easily splice the desired URL through the Server property (tbxprovince. text) of the control.

2. When the page is loaded for the first time, the required URL is registered. (If the parameter is the value of an input box on the page, JavaScript code must be embedded in the URL)

   1 <F: textbox label = "your province" id = "tbxprovince" text = "Anhui" runat = "server"> 2 </F: textbox> 3 <F: button id = "button1" enablepostback = "false" runat = "server" text = "select"> 4 from the list </F: button>

   1 protected void Page_Load(object sender, EventArgs e)2 {3     if (!IsPostBack)4     {5         string openUrl = String.Format("./passvalue_iframe_iframe.aspx?selected=<script>encodeURIComponent({0})</script>", tbxProvince.GetValueReference());6  7         Button1.OnClientClick = Window1.GetShowReference(openUrl);8     }9 }

   Note: The <SCRIPT> tag is embedded in the Openurl parameter. This is a special usage supported by fineui (this usage may not be supported in other systems )!

   You must understand one thing: when the page is loaded for the first time, we cannot directly obtain the value of the text input box to splice the URL, because the user may modify this value in the future!

   If you view the page source code, the above Openurl operation is converted to a script:

   1 F(‘Window1‘).f_show(‘/iframe/passvalue_iframe_iframe.aspx?selected=‘ + encodeURIComponent(F(‘SimpleForm1_tbxProvince‘).getValue()));

    

Pass a value to the parent window (built-in fineui method)

Passing values to the parent window is not that intuitive. Fortunately, fineui has a pair of built-in methods to simplify this operation, which should meet 80% of business needs:

1. When opening the subwindow, call getsavestatereference to inform fineui of the controls to be saved in future return values.

   1 protected void Button1_Click(object sender, EventArgs e)2 {3     string openUrl = String.Format("./passvalue_iframe_iframe.aspx?selected={0}", HttpUtility.UrlEncode(tbxProvince.Text));4 5     PageContext.RegisterStartupScript(Window1.GetSaveStateReference(tbxProvince.ClientID)6             + Window1.GetShowReference(openUrl));7 }

    

2. When closing the Child Window, call getwritebackvaluereference to save the returned values to the controls in the parent window.

   1 protected void ddlSheng_SelectedIndexChanged(object sender, EventArgs e)2         {3             if (ddlSheng.SelectedValue != "-1")4             {5                 PageContext.RegisterStartupScript(ActiveWindow.GetWriteBackValueReference(ddlSheng.SelectedValue) + ActiveWindow.GetHideReference());6             }7         }

    

If you want to pass multiple values at the same time, getsavestatereference and getwritebackvaluereference provide overload methods.

Pass a value to the parent window (closing event of the form)

In the previous section, we talked about three processing methods for fineui to close the form: Hide, hide and refresh. You can specify the parameters for hiding and refresh the form, it is used to pass parameters to the parent page.

1. Register the form close script in the subform and place the parameters to be passed in gethidepostbackreference.

   1 pagecontext. registerstartupscript (activewindow. gethidepostbackreference ("selectprovince $ parameter to be passed "));

    

2. In the window close event of the parent page

   1 protected void Window1_Close(object sender, WindowCloseEventArgs e)2 {3     if (e.CloseArgument.StartsWith("SelectProvince$"))4     {5         string provinceName = e.CloseArgument.Substring("SelectProvince$".Length);6 7         ddlSheng.SelectedValue = provinceName;8     }9 }

   "Selectprovince $" is used to identify the form close events triggered in different situations.

   In this way, parameters from the child form to the parent form can be easily transferred without writing JavaScript code.

Pass a value to the parent window (custom script)

This method requires writing JavaScript by yourself, and you need to be familiar with fineui client scripts, but it is also more flexible. The following is an example:

1. Initial display of the page
   
   Define global JavaScript Functions on the parent page:

   1 <script>2     var shengClientID = ‘<%= ddlSheng.ClientID %>‘;3 4     function selectProvince(name) {5         F(shengClientID).setValue(name);6     }7 </script>

   If the child form can find the JavaScript Object window on this page, you can conveniently call window. selectprovince to pass parameters.

2. Click "select from list", open the form on the top page, and select a province in the pop-up form.
   

   1 <map id = "chinamap" name = "chinamap"> 2 <area href = "javascript: Select ('heilongjiang ');" coords = "398, 52, 442,72 "shape =" rect "> 3 <area href =" javascript: Select ('jilin'); "coords =", 96, 433,111 "shape =" rect "> 4 </map>

   1 <SCRIPT> 2 function select (provincename) {3 // returns the current active window object (the browser window object Passes F. WND. getactivewindow (). window) 4 var activewindow = f. WND. getactivewindow (); 5 activewindow. window. selectprovince (provincename); 6 activewindow. f_hide (); 7} 8 </SCRIPT>

   The above F. WND. getactivewindow returns the current active window control instance, and F. WND. getactivewindow (). window is the JavaScript Object window of the page where the window control instance is located. Knowing this relationship makes it easy to understand this code.

    

A small problem, why not directly call parent. selectprovince?

The general JavaScript skills that can raise this question are not bad!

However, this is really not the case. If you notice the previous details "click to select from the list and open the form on the top page", the current hierarchy is as follows:

1. Window. selectprovince is defined on the form page.
2. The window control instance (edit box) is displayed on the main frame page (that is, the parent page of the form page)
3. The parent of the page where map of China is located is the main frame page, not a form page!

 

Summary of this Chapter

This article introduces how to pass a value from the parent form to the child form. You can use the URL address of the child form page, and there are two ways to splice the URL address, we recommend that you use C # In the background for simplicity and convenience! There are also multiple methods to pass values from a child form to the parent form. The one-to-one functions provided by fineui (getsavestatereference and getwritebackvaluereference) can meet most of the requirements, second, you can use the form close event and custom JavaScript scripts to complete the value transfer.

Source code and online examples

The source code of all articles in this series can be downloaded by yourself: http://fineui.codeplex.com/

Online example:

1. Http://fineui.com/demo/#/demo/iframe/passvalue_iframe.aspx
2. Http://fineui.com/demo/#/demo/iframe/triggerbox_iframe.aspx
3. Http://fineui.com/demo/#/demo/iframe/selectprovince1.aspx

 

If this article has some inspiration or help, please slam"Good text to top", Supports originality and sanshi!

 

Additional 24 Professional HD Images

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Articles in the fineui tips Series