What you should already known
- ASP.NET 1.1 (C#) – esp: Page Template and DataGrid
Understanding of Current Sytem
- Handling the sequence of the events :Since we are already written the code for Deleting the records in Server-side, this code (C#) should be executed after executing the client-script.
- Accessing the client-side variable from Service-side, The comment text has to be accessible from Server-side code.
var str = prompt('Please Enter the comments!');
AskForComment as below.
Note that we have to check whether the user cancel the operation or not.
(Refer to Blue line. we are checking three condition in this line.
(str == ")is checking whether the user fills anything or not. Actually, we should trim this variable.
( str == 'undefined')is also checking the same thing. only different is that ‘undefined’ is the default value of prompt in IE.
( str == null)is checking whether the user click “Cancel” button or not.) If the user doesn’t fill anything or click “Cancel” then our function is gonna return “false”, which means there wont be any further execution.
Accessing the Client-side variable (variable named “str” in this sample ) from Server-side Code
\_ctl5\_hiddenComment is the ClientID of Server-side Hidden Field.)
Page_PreRender Event, please take a look at
SampleControl1.ascx in Sample Project. You will see the completed code in
btnDelete.Attributes.Add("onclick", "return AskForComment();");
return is very important here. Because we don’t want any further execution in case the user click “Cancel”.
Then, the last thing is that we have to check whether we are able to get the value of Hidden Field in the Click Event of “Delete” Button.
Please open the page called
Sample1.aspx from my sample. Set the breakpoint at the Click event of “Delete” button. Then, run the web project.
*** Note: I didn’t use any database for the data that suppose to be in DataGrid. I have created two classes called “Person” and “Persons” in this sample. and All data from Persons class will be binded to DataGrid.
In the Click Event of “Delete” button, I didn’t put anything related to Database. But you will find the code for getting the value of hidden field and getting the selected item of DataGrid.
Okay. We have just done. But the main disadvantage that I really don’t like is that it doesn’t look good. It looks very different from the existing UI of our current system. So, We will think about other way.
but one thing I don’t like is that this toolkit is using IFrame. As IFrame is using in it, we might properly need to have one extra page to show in IFrame. However, we don’t like to have one extra page in our System. So, I decide to use HTML Table instead of IFrame since I don’t need to show anything dynamic on this dialog.
Okay. Let’s start!
Creating HTML Window
Before we start creating a custom dialog dynamically, we should start creating a static dialog in HTML.
In Head Tag ~
In Body Tag ~
Output will be as following image.
- DIV “
GB_Window” and CSS “
#GB_window” is for base dialog.
- DIV “GB_caption” and CSS “#GB_caption” is for the Caption of Dialog. For example: if you wanna have “blue color” (instead of “grey color”) for the background of capture, you can simply change the color value in CSS of #GB_caption.
- CSS #GB_window img is for “Close” image that you can replace with any picture. The current image is not the original image of Grey Redux. I made it a lit bit smaller.
- All tags within the div “definition” are the content of dialog. For example, if you dont want one text, one textbox and button to show in dialog, you can replace with anything you want.
Please open the HTML View of TestContentPageControl.ascx from the sample project that you downloaded. (As there are a lot of code in this page, I won’t paste all coding here.)
- DISPLAY: none; This DIV should not show until the user click the “Delete” button.
- Z-INDEX: 111; If there are other controls placed on your page, you should set the highest value of this style. otherwise, the custom dialog will be shown behind the other controls.
- POSITION: absolute; this is a must since we wanna show the dialog at the center of page
You may also find the hidden input called “hiddenComment” in TestContentPageControl.ascx. The main thing is that this control has to be a Server-side control. So, both client-side script (js) and server-side script (C#) are able to access this control. (I already explain about the use of Server-side Hidden Field earlier.)
After viewing the HTML view of ascx file, we should go and check the PreRender event of page “TestContentPageControl_PreRender”.
This function is very simple. When the user click “close” image or “cancel” button then we set the “Display” style of div1 to “none”.
The following lines is used for getting the clientWidth and setting the dialog at the center of the page.
Then, we declare the variable called str in this function and we will append the HTML code ( that I show in “Creating HTML Window” ) to this variable.
After that, we set this variable to the inner text of div1. (oDiv.innerHTML = strWin;) then, we show this DIV in browser.
As the JS Dialog doesn’t show by default, the default value of this variable become “false”. When the user click “Delete” button, we show the JS Dialog and set this variable to true. **But we return “false” in ShowWindow() function. (so that the execute wont' go to Server-side.)
If the user click “cancel” or “close” image, we call “hideWindow()” function. In this function, we hide the JS dialog and set the variable “g_IsWindowShown” to true. (We also return “false” in this function since we dont want the Server-side code to execute.)
If the user click “Delete It” button then we call “deleteit()” function. In this function, we set the text of textbox to hidden field so that this value can be read from Server-side script. then, we fire the button client event of “Delete” button (not “Delete It” button.) then, showWindow() function will be invoked again. At that time, the variable “g_IsWindowShown” will be true. After that, we just return “true” from this function. So, the Server-side code will be executed. Here is the end of our trick. :)
– Please open the Demo Project.
– Set the breakpost at btnDelete_Click.
– Please run “TestContentPage.aspx” in Demo Project.
– Select some checkedboxes in the Grid.
– Click “Delete” button
– Type the comment
Ob: The Click event of btnDelete will be invoked and you can check the value of hidden field to see what comment you hav filled. and also, you can see which checkedboxes you have selected.
Sorry if you think that my article is too long.. (plus my writing is also not very interest. :) ) Anyway, I try to explain as much clear as I can and hopefully, you will find it useful.. Please let me know if you have suggestions or comments..