Enhancing the Sample Application

It's now time to enhance the sample application. One thing we want to do in the sample application is display a "quick entry" form ( Figure 5.13 ). As you can see, the "quick entry" form is a page displayed in another browser window. For us to open a new browser window we need to use client-side scripting. So far our applications have been using ASP.NET controls which generate server-side code. The difference is that with server-side code the client never sees our code. The server-side code generates HTML and the client sees the end result. Some things in HTML can only be done with clientside code. Client-side code is composed of functions that are part of the HTML end result, and are visible to the end user . To display a pop-up form, we will use a DHTML function called window.showModalDialog.

Figure 5.13. The quick entry form is displayed in a separate window. It is a modal window, which means that you have to close it before you are able to interact with the main window.

But how do we generate client-side scripts using our server-side code? With ASP.NET, it's easy. You only need to call the function Page.RegisterClientScriptBlock and pass the HTML for the client-side script.

We're going to start by adding the client-side script to the Page_Load function of the WorkOrder.aspx form. Then, because we may have other entry forms that need the same functionality, we're going to create another class, move the Page_Load to there, and inherit the form class from this new class.

To add a client-side script to the WorkOrder form:

1. First add the "quick entry" form to your project. Choose Project > Add HTML Page and enter quickentry.htm for the filename ( Figure 5.14 ).

   Figure 5.14. The quick entry form doesn't need to do any server-side processing, so rather than creating an aspx page, we're just going to add a simple HTML page.

   

2. Add controls to the page to make it look like the page in Figure 5.15 .

   Figure 5.15. All we need for the quick entry form is a label, a textbox (to enter the new values), and a Save button. If the user closes the window without clicking the Save button then the new item is discarded.

   

   Alternatively you can enter the HTML in Figure 5.16 directly or download the finished product from Peachpit's Web site.

   Figure 5.16 Notice the use of client-side scripting in the quick entry form. The script sets the window's returnValue to the text the user entered in the TextBox, then closes the window. The main form will then obtain the return value and add the item to the drop-down list that corresponds to the button clicked.

    <meta name="vs_showGrid" content="True">  <SCRIPT>   function btnSave_onclick()   {   window.returnValue = txtNewItem.value;   window.close();   }  </SCRIPT> <DIV id="  lblNewItem  "      ms_positioning="FlowLayout"      style="Z-INDEX: 100; LEFT: 10px;      WIDTH: 74px; POSITION: absolute;      TOP: 15px; HEIGHT: 24px">      New Item: </DIV> <INPUT id="  btnSave  " type="button"        value="Save" name="Button1"        onclick="  return btnSave_onclick()  "        style="Z-INDEX: 101; LEFT: 324px;        POSITION: absolute; TOP: 14px"> <INPUT id="  txtNewItem  " type="text"        size="32" name="Text1" style=" Z-        INDEX: 102; LEFT: 93px; POSITION:        absolute; TOP: 16px"> 

3. Open the WorkOrder.aspx form in the editor and then double-click on the form itself. This will cause the editor to show the Page_Load function. In the Page_Load function add the code in Figure 5.17 . This code registers a client-side script that uses the window.showModalDialog function to display the quickentry.htm function in a pop-up window. (The code isn't fully functional yet.)

Figure 5.17 The code in Page_Load declares a client-side function called fnOpen. It calls window.showModalDialog to display the quick entry form; showModalDialog blocks until the user closes the quick entry form; it then returns the value the user entered in the quick entry form and adds it to the corresponding dropdown list. The name of the drop-down list is being passed in as a parameter to the function.

 private void  Page_Load  (object sender,             System.EventArgs e) {    // Put user code to initialize    // the page here    string script = @"<SCRIPT>    function fnOpen(control){    var result = window.showModalDialog(   'quickentry.htm',' ','dialogHeight=10');    if (result != null)    {    var oOption = document.createElement(                  'OPTION');    window.document.forms[0].elements[    control].options.add(oOption);    oOption.innerText = result;    oOption.Value = result;    oOption.selected = true;    }    }    </SCRIPT>";    this.Page.  RegisterClientScriptBlock  (    "quickentry",script); } 

Because this code may be repeated to multiple Page_Load's, let's create a generic class that encapsulates this code.

To create a generic class to encapsulate Page_Load:

1. Choose Project > Add Class from the toplevel menu. Enter InputForm.cs for the class name. The editor will open up a code window displaying the new class.

2. Add code to have the InputForm class derive from System.Web.UI.Page ( Figure 5.18 ). This is necessary because all Web Forms derive from System.Web.UI.Page. Since we are going to make the WorkOrder form derive from InputForm we want to make sure InputForm contains all the functionality of System.Web.UI.Page.

   Figure 5.18 Because the InputForm is going to serve as a base to all Web forms in the application we need to derive InputForm from System.Web.UI.Page which is the class that turns a regular class into a Web form.

    public class InputForm  :   System.Web.UI.Page  { 

3. In the code for WorkOrder.aspx, change the declaration of the WorkOrder class so that it inherits from InputForm instead of System.Web.UI.Page ( Figure 5.19 ).

   Figure 5.19 With InputForm deriving from System.Web .UI.Page we can change the base class of WorkOrder to be InputForm.

    public class WorkOrder  : InputForm  { 

4. Cut the entire Page_Load function from the WorkOrder class ( Figure 5.20 ) and paste it inside the InputForm class ( Figure 5.21 on next page).

   Figure 5.20. The Page_Load function will be moved to the InputForm class.

   

   Figure 5.21 At this point the Page_Load function is in the InputForm class without any code modifications. The only problem is that it is private by default, which means that derived classes don't have access to it.

    public class InputForm :        System.Web.UI.Page {  private void Page_Load(object sender,   System.EventArgs e)   {  // Put user code to initialize the      // page here      string script = @"<SCRIPT>      function fnOpen(control){         var result = window.                     showModalDialog(                     'quickentry.htm',                     '',                     'dialogHeight=10');         if (result != null)         {           var oOption = document.                        createElement(                        'OPTION');           window.document.           forms[0].elements[control].           options.add(oOption);           oOption.innerText = result;           oOption.Value = result;           oOption.selected = true;      }    }    </SCRIPT>";    if (!this.Page.         IsClientScriptBlockRegistered(         "quickentry"))       this.Page.       RegisterClientScriptBlock(       "quickentry",script);  }  } 

5. Change the access modifier for the Page_Load function to be protected instead of private ( Figure 5.22 ).

   Figure 5.22 Changing the scope modifier of the function to protected makes Page_Load visible to classes that inherit from InputForm.

     protected  void  Page_Load  (object sender,               System.EventArgs e) {    //code omitted for simplicity } 

Tip

• The code isn't fully functional at this point. We need to add code to the New buttons in order to display the "quick entry" form. However, it should compile correctly at this point with Build > Build Solution.