jQuery Dialog: Placing asp.net formview on dialog

https://stackoverflow.com/questions/21346748

02-10-2022
|

문제

I have a simple ASP.NET (VB) page set up and am trying to do something specific: place an asp.net formview on a dialog that opens whenever a specific gridview record is chosen.

Here is the symptom: when I select a record, it triggers the dialog with the formview, but the formview is empty when it's supposed to contain the record selected in the gridview.

Here is my question: Can anyone tell me what I am missing? What do I need to add or do differently so that the formview contains the selected record.

Thanks in advance for any helpful advice.

Here is the relevant jQuery code that defines the dialog:

$("[id$=div_fvEditRecord]").dialog({
autoOpen:false,
modal:true,
resizable: true                
});

Here is the code that launches the dialog:

<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Select"  onclientclick="$(&quot;[id$=div_fvEditRecord]&quot;).dialog( &quot;open&quot;); return false;" Text="Select"></asp:LinkButton>

Here is the div containing the formview that goes on the dialog:

<div id="div_fvEditRecord" style="display:none">                
    <asp:FormView ID="fvEditRecord" runat="server" Caption="Edit selected record" 
        DataKeyNames="ID" DataSourceID="sdsTable_RandomStuff" DefaultMode="Edit" 
        EmptyDataText="No records have been chosen">
        <EditItemTemplate>
            ID:
            <asp:Label ID="IDLabel1" runat="server" Text='<%# Eval("ID") %>' />
            <br />
            Name:
            <asp:TextBox ID="NameTextBox" runat="server" Text='<%# Bind("Name") %>' />
            <br />
            Date:
            <asp:TextBox ID="txtDate_add" runat="server" Text='<%# Bind("Date") %>' />
            <br />
            Time:
            <asp:TextBox ID="txtTime_add" runat="server" Text='<%# Bind("Time") %>' />
            <br />
            Count:
            <asp:TextBox ID="CountTextBox" runat="server" Text='<%# Bind("Count") %>' />
            <br />
            <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" 
                CommandName="Update" Text="Update" />
            &nbsp;<asp:LinkButton ID="UpdateCancelButton" runat="server" 
                CausesValidation="False" CommandName="Cancel" Text="Cancel" />
        </EditItemTemplate>
    </asp:FormView>
</div>

To get a better sense of context, here is the full asp.net file.

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    Private Sub UpdateViews(ByVal sender As Object, ByVal e As System.EventArgs) Handles fvEditRecord.ItemInserted
        gvViewRecords.DataBind()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Dialog Form Test</title>
    <script src="Scripts/jquery-2.1.0.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.10.4.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.timepicker.min.js" type="text/javascript"></script>

    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet" type="text/css" />
    <link href="Content/themes/base/jquery.ui.slider.css" rel="stylesheet" type="text/css" />   
    <link href="Scripts/jquery.timepicker.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        $(document).ready(function () {
            $("[id$=txtDate_add]").datepicker({
                dateFormat: "m/dd/yy",
                showAnim: "slide",
                changeMonth: true,
                changeYear: true
            });

            $("[id$=txtTime_add]").timepicker({
                scrollDefaultNow: true
            });

            $("[id$=div_fvEditRecord]").dialog({
                autoOpen:false,
                modal:true,
                resizable: true                
            });           
        });

  </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:sqldatasource ID="sdsTable_RandomStuff" runat="server" 
        ConnectionString="<%$ ConnectionStrings:Sandbox1ConnectionString %>" 
        OldValuesParameterFormatString="original_{0}" 

        SelectCommand="SELECT [ID], [Name], [Date], [Time], [Count] FROM [RandomStuff] WHERE ([ID] = @ID)">
        <SelectParameters>
            <asp:ControlParameter ControlID="gvViewRecords" Name="ID" 
                PropertyName="SelectedValue" Type="Int32" />
        </SelectParameters>
    </asp:sqldatasource>
    <asp:SqlDataSource ID="sdsView_RandomStuff" runat="server" 
        ConnectionString="<%$ ConnectionStrings:Sandbox1ConnectionString %>" 
        SelectCommand="SELECT * FROM [RandomStuff]" 
        ConflictDetection="CompareAllValues" 
        DeleteCommand="DELETE FROM [RandomStuff] WHERE [ID] = @original_ID AND (([Name] = @original_Name) OR ([Name] IS NULL AND @original_Name IS NULL)) AND (([Date] = @original_Date) OR ([Date] IS NULL AND @original_Date IS NULL)) AND (([Time] = @original_Time) OR ([Time] IS NULL AND @original_Time IS NULL)) AND (([Count] = @original_Count) OR ([Count] IS NULL AND @original_Count IS NULL))" 
        InsertCommand="INSERT INTO [RandomStuff] ([Name], [Date], [Time], [Count]) VALUES (@Name, @Date, @Time, @Count)" 
        OldValuesParameterFormatString="original_{0}" 
        UpdateCommand="UPDATE [RandomStuff] SET [Name] = @Name, [Date] = @Date, [Time] = @Time, [Count] = @Count WHERE [ID] = @original_ID AND (([Name] = @original_Name) OR ([Name] IS NULL AND @original_Name IS NULL)) AND (([Date] = @original_Date) OR ([Date] IS NULL AND @original_Date IS NULL)) AND (([Time] = @original_Time) OR ([Time] IS NULL AND @original_Time IS NULL)) AND (([Count] = @original_Count) OR ([Count] IS NULL AND @original_Count IS NULL))">
        <DeleteParameters>
            <asp:Parameter Name="original_ID" Type="Int32" />
            <asp:Parameter Name="original_Name" Type="String" />
            <asp:Parameter DbType="Date" Name="original_Date" />
            <asp:Parameter Name="original_Time" Type="DateTime" />
            <asp:Parameter Name="original_Count" Type="Int32" />
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="Name" Type="String" />
            <asp:Parameter DbType="Date" Name="Date" />
            <asp:Parameter Name="Time" Type="DateTime" />
            <asp:Parameter Name="Count" Type="Int32" />
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="Name" Type="String" />
            <asp:Parameter DbType="Date" Name="Date" />
            <asp:Parameter Name="Time" Type="DateTime" />
            <asp:Parameter Name="Count" Type="Int32" />
            <asp:Parameter Name="original_ID" Type="Int32" />
            <asp:Parameter Name="original_Name" Type="String" />
            <asp:Parameter DbType="Date" Name="original_Date" />
            <asp:Parameter Name="original_Time" Type="DateTime" />
            <asp:Parameter Name="original_Count" Type="Int32" />
        </UpdateParameters>
    </asp:SqlDataSource>

    <h1>
            jQuery Skill Development</h1>
        <ul>
            <li>Use Datepicker on a textbox in Formview</li>
            <li>Use Timepicker on a textbox in Formview</li>
            <li>Place Formview on a Dialog for new entries</li>
        </ul>

        <asp:GridView ID="gvViewRecords" runat="server" AllowSorting="True" 
            AutoGenerateColumns="False" DataKeyNames="ID" 
            DataSourceID="sdsView_RandomStuff" Caption="View/Edit Records">
            <Columns>
                <asp:TemplateField ShowHeader="False">
                    <ItemTemplate>
                        <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" 
                            CommandName="Select" 
                            onclientclick="$(&quot;[id$=div_fvEditRecord]&quot;).dialog( &quot;open&quot;); return false;" 
                            Text="Select"></asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" 
                    ReadOnly="True" SortExpression="ID" />
                <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                <asp:BoundField DataField="Date" DataFormatString="{0:d}" HeaderText="Date" 
                    SortExpression="Date" />
                <asp:BoundField DataField="Time" DataFormatString="{0:t}" HeaderText="Time" 
                    SortExpression="Time" />
                <asp:BoundField DataField="Count" HeaderText="Count" SortExpression="Count" />
            </Columns>
        </asp:GridView>
    <div id="div_fvEditRecord" style="display:none">                
        <asp:FormView ID="fvEditRecord" runat="server" Caption="Edit selected record" 
            DataKeyNames="ID" DataSourceID="sdsTable_RandomStuff" DefaultMode="Edit" 
            EmptyDataText="No records have been chosen">
            <EditItemTemplate>
                ID:
                <asp:Label ID="IDLabel1" runat="server" Text='<%# Eval("ID") %>' />
                <br />
                Name:
                <asp:TextBox ID="NameTextBox" runat="server" Text='<%# Bind("Name") %>' />
                <br />
                Date:
                <asp:TextBox ID="txtDate_add" runat="server" Text='<%# Bind("Date") %>' />
                <br />
                Time:
                <asp:TextBox ID="txtTime_add" runat="server" Text='<%# Bind("Time") %>' />
                <br />
                Count:
                <asp:TextBox ID="CountTextBox" runat="server" Text='<%# Bind("Count") %>' />
                <br />
                <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" 
                    CommandName="Update" Text="Update" />
                &nbsp;<asp:LinkButton ID="UpdateCancelButton" runat="server" 
                    CausesValidation="False" CommandName="Cancel" Text="Cancel" />
            </EditItemTemplate>
        </asp:FormView>
    </div>
    </form>
</body>
</html>

해결책 3

I changed the way I opened the dialog: by means of a separate function defined in the head script block rather than in the onClientClick property of the gridview.

    $(document).ready( function Load_FV_Dialog() { 
       $("[id$=div_fvEditRecord]").dialog("open"); 
       return false; 
    });

I called the function in my gridview in onClientClick by calling "Load_FV_Dialog()" rather than letting onClientClick = the function definition.

This problem I asked for help on is now solved: when I select a record to edit, the dialog shows the formview with the selected row.

However, when I click update, null values sent rather than the updated values. That, however, is a different issue I will need to research. Thank you for those who responded, they helped me consider options I might not have thought of on my own.

다른 팁

I think it's because dsplay:none property in

<div id="div_fvEditRecord" style="display:none">

try removing it

I hope this

$("[id$=div_fvEditRecord]")

should be replaced with

  $("[id$='div_fvEditRecord']") or $("#div_fvEditRecord")

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow