Диалог jQuery: размещение формы asp.net в диалоговом окне

У меня настроена простая страница ASP.NET (VB), и я пытаюсь сделать что-то конкретное: поместить представление формы asp.net в диалоговое окно, которое открывается всякий раз, когда выбирается конкретная запись gridview.

Вот симптом: когда я выбираю запись, он запускает диалоговое окно с представлением формы, но представление формы пусто, когда оно должно содержать запись, выбранную в представлении сетки.

Вот мой вопрос: Кто-нибудь может сказать мне, что мне не хватает? Что мне нужно добавить или сделать по-другому, чтобы formview содержал выбранную запись.

Заранее спасибо за любой полезный совет.

Вот соответствующий код jQuery, определяющий диалоговое окно:

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

Вот код, запускающий диалоговое окно:

<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>

Вот блок div, содержащий вид формы, отображаемый в диалоговом окне:

<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>

Чтобы лучше понять контекст, вот полный файл asp.net.

<%@ 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>

dialog jquery formview
person Community    schedule 25.01.2014    source источник
comment
Обновление: я изменил способ открытия диалогового окна: с помощью отдельной функции, определенной в блоке заголовка заголовка, а не в свойстве onClientClick сетки. '$(document).ready(function Load_FV_Dialog() { $([id$=div_fvEditRecord]).dialog(open); return false; });'   -  person    schedule 25.01.2014
comment
Поскольку я новый пользователь с низкой репутацией, это не позволит мне заявить, что я нашел ответ на свой вопрос. Пожалуйста, смотрите мой предыдущий комментарий. Проблема решена - не знаю почему, но этот симптом решен. Спасибо тем, кто ответил.   -  person    schedule 25.01.2014

Ответы (3)


arrow_upward
0
arrow_downward

Я думаю, это потому, что dsplay:none свойство в

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

попробуй удалить

person Mahesh Reddy    schedule 25.01.2014
comment
Извиняюсь. Это не решило проблему. Кроме того, цель этого стиля состоит в том, чтобы он отображался только в диалоговом окне, а не на самой главной странице. - person ; 25.01.2014

arrow_upward
0
arrow_downward

Я надеюсь это

$("[id$=div_fvEditRecord]")

следует заменить на

  $("[id$='div_fvEditRecord']") or $("#div_fvEditRecord")
person Mahesh Reddy    schedule 25.01.2014
comment
Я последовал вашему совету и использовал этот формат: '([id$='div_fvEditRecord'])'. Никаких изменений не наблюдается. - person ; 25.01.2014

arrow_upward
0
arrow_downward

Я изменил способ открытия диалога: с помощью отдельной функции, определенной в блоке сценария head, а не в свойстве onClientClick gridview.

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

Я вызвал функцию в своем представлении сетки в onClientClick, вызвав «Load_FV_Dialog()», вместо того, чтобы позволить onClientClick = определение функции.

Эта проблема, о которой я попросил помощи, теперь решена: когда я выбираю запись для редактирования, в диалоговом окне отображается форма с выбранной строкой.

Однако, когда я нажимаю «Обновить», отправляются нулевые значения, а не обновленные значения. Это, однако, другой вопрос, который мне нужно исследовать. Спасибо тем, кто откликнулся, они помогли мне рассмотреть варианты, до которых я, возможно, не додумался бы сам.

person Community    schedule 25.01.2014