Link to home
Start Free TrialLog in
Avatar of rkulp
rkulpFlag for United States of America

asked on

Need Help With a Modal Popup Dialog

I am trying to use an AJAX:ModalPopupExtender to display detail information about a database record when the user selects a date in a calendar. The panel contains a SQLDataSource and a DetailsView control. The popup window opens but it is empty save for the OK button. The SQLDataSource SelectParameter is set to use the calendar selected date. This clearly is not working. What is the best way to present a record in a modal popup window, allow edits and then save it to the database? As I am (obviously) a novice at web development, some example code would be more than welcome.
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConflictDetection="CompareAllValues" 
            ConnectionString="<%$ ConnectionStrings:TLCCMembersOnlyConnectionString %>" 
            DeleteCommand="DELETE FROM [BldgUser] WHERE [ReservationID] = @original_ReservationID AND [LastName] = @original_LastName AND (([FirstName] = @original_FirstName) OR ([FirstName] IS NULL AND @original_FirstName IS NULL)) AND (([Address1] = @original_Address1) OR ([Address1] IS NULL AND @original_Address1 IS NULL)) AND (([Address2] = @original_Address2) OR ([Address2] IS NULL AND @original_Address2 IS NULL)) AND (([City] = @original_City) OR ([City] IS NULL AND @original_City IS NULL)) AND (([State] = @original_State) OR ([State] IS NULL AND @original_State IS NULL)) AND (([Zip] = @original_Zip) OR ([Zip] IS NULL AND @original_Zip IS NULL)) AND (([Phone] = @original_Phone) OR ([Phone] IS NULL AND @original_Phone IS NULL)) AND (([Organization] = @original_Organization) OR ([Organization] IS NULL AND @original_Organization IS NULL))" 
            InsertCommand="INSERT INTO [BldgUser] ([LastName], [FirstName], [Address1], [Address2], [City], [State], [Zip], [Phone], [Organization]) VALUES (@LastName, @FirstName, @Address1, @Address2, @City, @State, @Zip, @Phone, @Organization)" 
            OldValuesParameterFormatString="original_{0}" 
            SelectCommand="SELECT [LastName], [FirstName], [Address1], [Address2], [City], [State], [Zip], [Phone], [Organization], [ReservationID] FROM [BldgUser] ORDER BY [LastName], [FirstName], [Organization]" 
            UpdateCommand="UPDATE [BldgUser] SET [LastName] = @LastName, [FirstName] = @FirstName, [Address1] = @Address1, [Address2] = @Address2, [City] = @City, [State] = @State, [Zip] = @Zip, [Phone] = @Phone, [Organization] = @Organization WHERE [ReservationID] = @original_ReservationID AND [LastName] = @original_LastName AND (([FirstName] = @original_FirstName) OR ([FirstName] IS NULL AND @original_FirstName IS NULL)) AND (([Address1] = @original_Address1) OR ([Address1] IS NULL AND @original_Address1 IS NULL)) AND (([Address2] = @original_Address2) OR ([Address2] IS NULL AND @original_Address2 IS NULL)) AND (([City] = @original_City) OR ([City] IS NULL AND @original_City IS NULL)) AND (([State] = @original_State) OR ([State] IS NULL AND @original_State IS NULL)) AND (([Zip] = @original_Zip) OR ([Zip] IS NULL AND @original_Zip IS NULL)) AND (([Phone] = @original_Phone) OR ([Phone] IS NULL AND @original_Phone IS NULL)) AND (([Organization] = @original_Organization) OR ([Organization] IS NULL AND @original_Organization IS NULL))">
            <DeleteParameters>
                <asp:Parameter Name="original_ReservationID" Type="Int32" />
                <asp:Parameter Name="original_LastName" Type="String" />
                <asp:Parameter Name="original_FirstName" Type="String" />
                <asp:Parameter Name="original_Address1" Type="String" />
                <asp:Parameter Name="original_Address2" Type="String" />
                <asp:Parameter Name="original_City" Type="String" />
                <asp:Parameter Name="original_State" Type="String" />
                <asp:Parameter Name="original_Zip" Type="String" />
                <asp:Parameter Name="original_Phone" Type="String" />
                <asp:Parameter Name="original_Organization" Type="String" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="LastName" Type="String" />
                <asp:Parameter Name="FirstName" Type="String" />
                <asp:Parameter Name="Address1" Type="String" />
                <asp:Parameter Name="Address2" Type="String" />
                <asp:Parameter Name="City" Type="String" />
                <asp:Parameter Name="State" Type="String" />
                <asp:Parameter Name="Zip" Type="String" />
                <asp:Parameter Name="Phone" Type="String" />
                <asp:Parameter Name="Organization" Type="String" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="LastName" Type="String" />
                <asp:Parameter Name="FirstName" Type="String" />
                <asp:Parameter Name="Address1" Type="String" />
                <asp:Parameter Name="Address2" Type="String" />
                <asp:Parameter Name="City" Type="String" />
                <asp:Parameter Name="State" Type="String" />
                <asp:Parameter Name="Zip" Type="String" />
                <asp:Parameter Name="Phone" Type="String" />
                <asp:Parameter Name="Organization" Type="String" />
                <asp:Parameter Name="original_ReservationID" Type="Int32" />
                <asp:Parameter Name="original_LastName" Type="String" />
                <asp:Parameter Name="original_FirstName" Type="String" />
                <asp:Parameter Name="original_Address1" Type="String" />
                <asp:Parameter Name="original_Address2" Type="String" />
                <asp:Parameter Name="original_City" Type="String" />
                <asp:Parameter Name="original_State" Type="String" />
                <asp:Parameter Name="original_Zip" Type="String" />
                <asp:Parameter Name="original_Phone" Type="String" />
                <asp:Parameter Name="original_Organization" Type="String" />
            </UpdateParameters>
        </asp:SqlDataSource>
        <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
            DeleteMethod="Delete" InsertMethod="Insert" 
            OldValuesParameterFormatString="original_{0}" SelectMethod="GetData" 
            TypeName="TLC.dsBuildingUseTableAdapters.BuildingUseTableAdapter" 
            UpdateMethod="Update">
            <DeleteParameters>
                <asp:Parameter Name="Original_ID" Type="Int32" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="ReservationDate" Type="DateTime" />
                <asp:Parameter Name="ReservationType" Type="String" />
                <asp:Parameter Name="Contact" Type="String" />
                <asp:Parameter Name="ContactPhone" Type="String" />
                <asp:Parameter Name="ReservationID" Type="Int32" />
                <asp:Parameter Name="SerialID" Type="Int32" />
                <asp:Parameter Name="ReservationTitle" Type="String" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="ReservationDate" Type="DateTime" />
                <asp:Parameter Name="ReservationType" Type="String" />
                <asp:Parameter Name="Contact" Type="String" />
                <asp:Parameter Name="ContactPhone" Type="String" />
                <asp:Parameter Name="ReservationID" Type="Int32" />
                <asp:Parameter Name="SerialID" Type="Int32" />
                <asp:Parameter Name="ReservationTitle" Type="String" />
                <asp:Parameter Name="Original_ID" Type="Int32" />
            </UpdateParameters>
        </asp:ObjectDataSource>
    </ContentTemplate>

</asp:UpdatePanel>


<table>
<tr>
    <td>
        &nbsp;</td>
    <td>
        &nbsp;</td>
</tr>
    <tr>
        <td align="center" >
            <br />
            <asp:DropDownList ID="drpCalMonth" runat="server" AutoPostBack="True"></asp:DropDownList>
            <asp:DropDownList ID="drpCalYear" runat="server" AutoPostBack="True"></asp:DropDownList>
        </td>
        <td>
            
        </td>
    </tr>
    <tr>
        <td>
          <dc:DataCalendar ID="DataCalendar1" runat="server" ShowTitle="False" 
              Width="400px" Height="184px">
              <DayStyle HorizontalAlign="Center" VerticalAlign="Top" />
              <SelectedDayStyle BackColor="#00CCFF" Font-Bold="True" Font-Underline="True" 
                  HorizontalAlign="Center" VerticalAlign="Top" />
              <SelectorStyle Font-Bold="True" Font-Underline="True" ForeColor="Black" 
                  HorizontalAlign="Center" VerticalAlign="Top" />
          </dc:DataCalendar>
        </td>
        <td>
        </td>
    </tr>
</table>
<asp:Panel ID="ModalPanel" runat="server" Width="500px" BackColor="White" ForeColor="Black" BorderColor="Black" BorderStyle="Solid" BorderWidth="2px">

    <asp:DetailsView ID="RentalDetail" runat="server" AutoGenerateRows="False" 
        DataKeyNames="ID" DataSourceID="SqlDataSource2" Height="50px" Width="125px">
        <Fields>
            <asp:BoundField DataField="ReservationDate" HeaderText="ReservationDate" 
                SortExpression="ReservationDate" />
            <asp:BoundField DataField="ReservationType" HeaderText="ReservationType" 
                SortExpression="ReservationType" />
            <asp:BoundField DataField="Contact" HeaderText="Contact" 
                SortExpression="Contact" />
            <asp:BoundField DataField="ContactPhone" HeaderText="ContactPhone" 
                SortExpression="ContactPhone" />
            <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" 
                ReadOnly="True" SortExpression="ID" />
            <asp:BoundField DataField="ReservationID" HeaderText="ReservationID" 
                SortExpression="ReservationID" />
            <asp:BoundField DataField="SerialID" HeaderText="SerialID" 
                SortExpression="SerialID" />
            <asp:BoundField DataField="ReservationTitle" HeaderText="ReservationTitle" 
                SortExpression="ReservationTitle" />
        </Fields>
    </asp:DetailsView>
    <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
        ConnectionString="<%$ ConnectionStrings:TLCCMembersOnlyConnectionString %>" 
        SelectCommand="SELECT * FROM [BuildingUse] WHERE ([ReservationDate] = @ReservationDate)">
        <SelectParameters>
            <asp:ControlParameter ControlID="DataCalendar1" DbType="Date" 
                Name="ReservationDate" PropertyName="SelectedDate" />
        </SelectParameters>
    </asp:SqlDataSource>
    <br />
 <asp:Button ID="OKButton" runat="server" Text="Close" />
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server"
 TargetControlId="DataCalendar1" PopupControlID="ModalPanel" 
 OkControlID="OKButton" />

<script type="text/javascript">
 var launch = false;
 function launchModal() 
 {
 launch = true;
 }
 function pageLoad() {
     if (launch) {
         $find("mpe").show();
     }
 }
</script>
</asp:Content>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of disrupt
disrupt
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of rkulp

ASKER

Thanks for your help. The second article is more like my problem. It is still not working as I wish but I am closer.