Search code examples
c#asp.netvisual-studiovisual-web-developer

Visual Studio Web Developer (C#) - GridView and FormView

I have this homework in Visual Web Developer (ASP.NET - C#) and unfortunately I have not enough time to the deadline to study everything properly - I have to create GridView so it shows data in database. The problem I have is:

When I click on Edit button in a row I am supposed to go to "Edit mode of FormView" or to something that looks like that instead of "Edit mode of GridView" (so after clicking on Edit I am supposed to see only a form with 1 line for each column of gridview of the appropriate table record, not the same Gridview with just changed records of one line to TextBoxes...).

Consider Default.aspx like this please:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            DataKeyNames="id_people" DataSourceID="SqlDataSource1" 
            EmptyDataText="There are no data records to display.">
            <Columns>
                <asp:CommandField ShowEditButton="True" />
                <asp:BoundField DataField="id_people" HeaderText="id_people" ReadOnly="True" 
                    SortExpression="id_people" />
                <asp:BoundField DataField="first_name" HeaderText="first_name" 
                    SortExpression="first_name" />
                <asp:BoundField DataField="last_name" HeaderText="last_name" 
                    SortExpression="last_name" />
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:InsertRowsWithGridViewConnectionString1 %>" 
            SelectCommand="SELECT [id_people], [first_name], [last_name] FROM [Table1]" 
            UpdateCommand="UPDATE [Table1] SET [first_name] = @first_name, [last_name] = @last_name WHERE [id_people] = @id_people">
            <UpdateParameters>
                <asp:Parameter Name="first_name" Type="String" />
                <asp:Parameter Name="last_name" Type="String" />
                <asp:Parameter Name="id_people" Type="Int32" />
            </UpdateParameters>
        </asp:SqlDataSource>

    </div>
    </form>
</body>
</html>
Solution 
  •  <asp:Panel ID="pnlAddPropertyDetails" runat="server" CssClass="ui-dialog ui-widget ui-widget-content ui-corner-all"
        Width="400" EnableViewState="True">
        <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
            <span class="ui-dialog-title">
                Add Property Details</span>
            <a class="ui-dialog-titlebar-close ui-corner-all"></a>
        </div>
        <div class="ui-dialog-content ui-widget-content">
            //ur content of dialog here
        </div>
    </asp:Panel>

    do not forget to add css file of jquery to leverage their classes