AJAX Toolkit revealed!

With this Cost Recovery project in full swing, I am at the phase of retooling the application. The D&I group is on its way to completing the CSP application which facilitates the tracking of contaminated sites. Focus is shifting over to this Cost Recovery and as a result, meetings have be conducted to look at a new approach to this project; the idea is to optimally develop an intuitive interface and process to the application.

I started a new VS 2008 project, but the others have VS 2005. They can not open my project. We use SourceSafe to check in and out pages of the projects on which we work. This keeps us from overwriting each other's work.

In the effort to make my project compatible with VS 2005, I started the project using .NET 2.0 rather than 3.5. Little did I know that this kept the AJAX Extensions and Toolkit unavailable in my project. I had previously installed the kit compatible with 3.5.

So at this point, I created another project using the 3.5 Framework and am transferring all my work over to it. It was rather frustrating trying to figure out why I did not have the toolkit. I tried re-installing it.

All along it was the fact the project was using .Net Framework 2.0. No doughnut for me.

Modals in Gridviews

Setting up a pop-up modal is not as hard as I had thought. I am using the Selector tool as before, it is a GridView with the Autoselect enabled. I add the ModalPopupExtender from the toolkit. I add an <asp:Button ID="dummybutton" runat="server" style="dislay: none" /> and set TargetID="dummybutton". The button is hidden and will not be used. In the code behind the page, use the ID for the ModalPopupExtender to show the modal. Here is an example:

    protected void ux_ResultList_SelectedIndexChanged(object sender, EventArgs e)
    {
        //a row has been selected,  save the hazard id as a session varaible        HttpContext.Current.Session[DataKey] = ux_ResultList.SelectedDataKey.Value;
        // show the modal using the extender
        ux_ResultList_ModalPopupExtender.Show();
    }

ux_ResultList is the GridView, ux_ResultList_SelectedIndexChanged() is the procedure called when the GridView is selected, and ux_ResultList_ModalPopupExtender is the ModalPopupExtender. Don't confuse the Panel with the ModalPopupExtender. The extender shows the Panel, you tell the extender to show.
Next, I will show you how to populate the modal with the selected site information.

Using Modals to Edit

I am getting to the point where I am ready to show my web application to the Cost Recovery section. I have a section where the billing is handled and then a section for reports. In each, I have editing capabilities for each entry or site. This is fine and practical once all the Cost Recovery data is imported and polished from the Excel workbooks used to track these sites. However, I added an "Edit" section which still allows editing of these sites. Why the redunancy? I don't intend to duplicate what is all ready handled in the other sections.
My intention is to handle the editing differently. In the first two, editing is done on a selected site or entry by bringing up a page with that information. The user will have to go back to the list and select another using the menus. Fine for few edits.
Once this web application is in production, at least initially, there will be a lot of editing to fit the data into the application and match it with the other databases.
My Edit section will allow the user to select each site and pop up the modal with its information to be edited. It is saved and the modal closed leaving the site selector intact and unchanged. The user selects the next site and repeats the process.
Using a Ajax modal is pretty straight forward. Using the Ajax Toolkit, set the TargetID as the control to activate the modal and PopUpID as a Panel to display and atleast a CancelControlID for the control to close the modal.
The issue at hand is the TargetID is actually not a control such as a Button or LinkButton, but the Select in a GridView. You add the PopUpModal to the GridView, but just clicking on the GridView pops up the modal. This prevents the user from selecting an entry in the GridView and as a result no specific site information can be passed on to the edit modal. I will demostrate how to solve this in the next post.