Asp.Net网页开发——DataGrid的应用(1)

image

       网页由上下两部分构成:上方由用户输入数据,按Add后该记录插入数据库,并在下方显示;下方为一个DataGrid,把从数据库读出的记录显示出来。其中,按下edit会出现update和cancel按钮,用来修改现有数据。

 

1. 网页设计代码:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="ubs_fix_price_maintain.aspx.vb" Inherits="ubs_fix_price_maintain" %>
<!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 id="Head1" runat="server">
    <title>Page Fix Price</title>
<script language="javascript" src="JS/client.js" type="text/javascript"></script>

    <script type ="text/javascript" >
    function validcheck()
    {  if (document.getElementById ("txtPuCode").value.length<3)
         {
              alert("Please enter at least 3 letters!");
              document.getElementById ("txtPuCode").focus();
              return false;
          }
          if (document.getElementById ("txtDesCode").value.length<3)
         {
              alert("Please enter at least 3 letters!");
              document.getElementById ("txtDesCode").focus();
              return false;
          }
          if (document.getElementById ("txtJourneyCost").value=="")
         {
              alert("Please enter journey cost!");
              document.getElementById ("txtJourneyCost").focus();
              return false;
          }
          if (document.getElementById ("txtGratuity").value=="")
         {
              alert("Please enter gratuity!");
              document.getElementById ("txtGratuity").focus();
              return false;
          }
          if (document.getElementById ("txtBookingFee").value=="")
         {
              alert("Please enter booking fee!");
              document.getElementById ("txtBookingFee").focus();
              return false;
          }
          if (document.getElementById ("txtAdminCost").value=="")
         {
              alert("Please enter admin cost!");
              document.getElementById ("txtAdminCost").focus();
              return false;
          }
    }
    </script>

</head>
<body>
<center>
    <form id="form1" runat="server">
        <uc1:OT_head ID="OT_head1" runat="server" />
        <uc3:PopGreyLayer ID="PopGreyLayer" runat="server" />
        <div id="divContent" >      
            <table cellspacing="0" cellpadding="0" width="100%" border="0" class="css_table_frame">
            <tr>
            <td>
            <table width="100%" cellpadding="0" cellspacing="0">
                <tr>
                    <td class="css_orderheader1" colspan="7">
                        <font class="header3">Fix Price</font>
                    </td>
                </tr>
            </table>
            <table width="100%" cellpadding="1" cellspacing="1">
                <tr class="css_orderdesc1" id="tr1" runat="server">
                    <td style="padding-left: 4px; width: 90px;">
                        Pickup post code
                    </td>
                    <td style="width: 100px">
                        <asp:TextBox ID="txtPuCode" runat="server" Width="100px" MaxLength="7"></asp:TextBox>
                    </td>
                    <td style="padding-left: 4px; width: 90px;">
                        Destination post code
                    </td>
                    <td style="width: 100px">
                        <asp:TextBox ID="txtDesCode" runat="server" Width="100px" MaxLength="7"></asp:TextBox>
                    </td>
                    <td style="padding-left: 4px; width: 80px;">
                        Vehicle Type
                    </td>
                    <td style="width:120px">
                        <asp:DropDownList ID="ddlVehicleType" runat="server" AutoPostBack="false" Width="102%" >
                        </asp:DropDownList>
                    </td>
                    <td style="padding-left: 4px; width: 80px;">
                        Fixed journey cost
                    </td>
                    <td style="width: 100px">
                        <asp:TextBox ID="txtJourneyCost" runat="server" Width="100px" onkeypress="javascript:floatOnly(this);"></asp:TextBox>
                    </td>
                </tr>
                <tr class="css_orderdesc" runat="server" id="Tr2">
                    <td style="padding-left: 4px; width: 90px;">
                        Fixed gratuity
                    </td>
                    <td style="width: 100px">
                        <asp:TextBox ID="txtGratuity" runat="server" Width="100px" onkeypress="javascript:floatOnly(this);"></asp:TextBox>
                    </td>
                    <td style="padding-left: 4px; width: 90px;">
                        Fixed booking fee
                    </td>
                    <td> 
                        <asp:TextBox ID="txtBookingFee" runat="server" Width="100px" onkeypress="javascript:floatOnly(this);"></asp:TextBox>
                    </td>
                    <td style="padding-left: 4px; width: 80px;">
                        Fixed admin cost
                    </td>
                    <td style="width: 100px">
                        <asp:TextBox ID="txtAdminCost" runat="server" Width="115px" onkeypress="javascript:floatOnly(this);"></asp:TextBox>
                    </td>
                    <td style="padding-left: 4px; width: 80px;">
                        Status
                    </td>
                    <td>
                        <asp:RadioButton ID="rdbON" Text ="ON" runat ="server" GroupName ="edit"/>
                        <asp:RadioButton ID="rdbOFF" Text ="OFF" runat ="server" GroupName ="edit"/>
                    </td>
                </tr>
            </table>
            <table id="table1" width="100%" cellpadding="1" cellspacing="1">
                <tr align="right">
                    <td colspan="7">
                        <asp:ImageButton ID="btnAdd" runat="server" ImageUrl="~/Style/default/images/add.jpg"
                                            ImageAlign="right" />
                    </td>
                </tr>
                <tr align="left" class="css_orderdesc">
                            <td colspan="7">
                                <asp:DataGrid ID="dgPrices" runat="server" AllowSorting="True" CellSpacing="2" CellPadding="2"
                                    Width="880px" AutoGenerateColumns="False" AllowPaging="True" PageSize="20" BorderColor="White">
                                    <AlternatingItemStyle Height="27px" CssClass="css_alterdesc"></AlternatingItemStyle>
                                    <ItemStyle Height="27px" CssClass="css_itemdesc" BorderColor="White"></ItemStyle>
                                    <HeaderStyle Height="20px" CssClass="css_title"></HeaderStyle>
                                    <Columns>
                                        <asp:TemplateColumn HeaderText="Pickup Post Code" >
                                            <ItemTemplate >
                                                <asp:Label ID="lblPickupPostCode" runat="server" width="95%" Text='<%# databinder.eval(container.dataitem,"pu_postcode") %>’></asp:Label>
                                            </ItemTemplate>
                                            <EditItemTemplate>
                                                <asp:TextBox ID="txtPickupPostCode" runat="server" CssClass="text2" width="95%"
                                                    Text='<%# databinder.eval(container.dataitem,"pu_postcode") %>’ MaxLength="7"></asp:TextBox>
                                            </EditItemTemplate>
                                            <ItemStyle Width="80px" Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
                                                Font-Underline="False" HorizontalAlign="Left" />
                                        </asp:TemplateColumn>
                                        <asp:TemplateColumn HeaderText="Destination Post Code">
                                            <ItemTemplate>
                                                <asp:Label ID="lblDestinationPostCode" runat="server" width="95%" Text='<%# databinder.eval(container.dataitem,"dest_postcode") %>’></asp:Label>
                                            </ItemTemplate>
                                            <EditItemTemplate>
                                                <asp:TextBox ID="txtDestinationPostCode" runat="server" CssClass="text2" width="95%"
                                                    Text='<%# databinder.eval(container.dataitem,"dest_postcode") %>’ MaxLength="7"></asp:TextBox>
                                            </EditItemTemplate>
                                            <ItemStyle Width="80px" Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
                                                Font-Underline="False" HorizontalAlign="Left" />
                                        </asp:TemplateColumn>
                                        <asp:TemplateColumn HeaderText="Vehicle Type">
                                            <ItemTemplate>
                                                <asp:Label ID="lblVehicleType" runat="server" Text='<%# databinder.eval(container.dataitem,"type_name") %>’></asp:Label>
                                            </ItemTemplate>
                                            <EditItemTemplate>
                                                <asp:DropDownList ID="ddlVType" runat="server" CssClass="text2" width="100%" >
                                                </asp:DropDownList>
                                            </EditItemTemplate>
                                            <ItemStyle Width="122px" Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
                                                Font-Underline="False" HorizontalAlign="Left" />
                                        </asp:TemplateColumn>
                                        <asp:TemplateColumn HeaderText="Fixed journey cost">
                                            <ItemTemplate>
                                                <asp:Label ID="lblFixedJourneyCost" runat="server" Text='<%# databinder.eval(container.dataitem,"fix_journey_cost") %>’></asp:Label>
                                            </ItemTemplate>
                                            <EditItemTemplate>
                                                <asp:TextBox ID="txtFixedJourneyCost" runat="server" CssClass="text2" width="75px" onkeypress="javascript:floatOnly(this);"
                                                    Text='<%# databinder.eval(container.dataitem,"fix_journey_cost") %>’ MaxLength="5"></asp:TextBox>
                                            </EditItemTemplate>
                                            <ItemStyle Width="80px" Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
                                                Font-Underline="False" HorizontalAlign="Left" />
                                        </asp:TemplateColumn>
                                        <asp:TemplateColumn HeaderText="Fixed gratuity">
                                            <ItemTemplate>
                                                <asp:Label ID="lblFixedGratuity" runat="server" Text='<%# databinder.eval(container.dataitem,"fix_gratuity") %>’></asp:Label>
                                            </ItemTemplate>
                                            <EditItemTemplate>
                                                <asp:TextBox ID="txtFixedGratuity" runat="server" CssClass="text2" width="75px" onkeypress="javascript:floatOnly(this);"
                                                    Text='<%# databinder.eval(container.dataitem,"fix_gratuity") %>’ MaxLength="5"></asp:TextBox>
                                            </EditItemTemplate>
                                            <ItemStyle Width="80px" Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
                                                Font-Underline="False" HorizontalAlign="Left" />
                                        </asp:TemplateColumn>
                                        <asp:TemplateColumn HeaderText="Fixed booking fee">
                                            <ItemTemplate>
                                                <asp:Label ID="lblFixedBookingFee" runat="server" Text='<%# databinder.eval(container.dataitem,"fix_booking_fee") %>’></asp:Label>
                                            </ItemTemplate>
                                            <EditItemTemplate>
                                                <asp:TextBox ID="txtFixedBookingFee" runat="server" CssClass="text2" width="75px" onkeypress="javascript:floatOnly(this);"
                                                    Text='<%# databinder.eval(container.dataitem,"fix_booking_fee") %>’ MaxLength="5"></asp:TextBox>
                                            </EditItemTemplate>
                                            <ItemStyle Width="80px" Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
                                                Font-Underline="False" HorizontalAlign="Left" />
                                        </asp:TemplateColumn>
                                        <asp:TemplateColumn HeaderText="Fixed admin cost">
                                            <ItemTemplate>
                                                <asp:Label ID="lblFixedAdminCost" runat="server" Text='<%# databinder.eval(container.dataitem,"fix_admin_cost") %>’></asp:Label>
                                            </ItemTemplate>
                                            <EditItemTemplate>
                                                <asp:TextBox ID="txtFixedAdminCost" runat="server" CssClass="text2" width="75px" onkeypress="javascript:floatOnly(this);"
                                                    Text='<%# databinder.eval(container.dataitem,"fix_admin_cost") %>’ MaxLength="5"></asp:TextBox>
                                            </EditItemTemplate>
                                            <ItemStyle Width="80px" Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
                                                Font-Underline="False" HorizontalAlign="Left" />
                                        </asp:TemplateColumn>
                                        <asp:TemplateColumn HeaderText="Status">
                                            <ItemTemplate>
                                                <asp:Label ID="lblActiveFlag" runat="server" Text='<%# databinder.eval(container.dataitem,"active_flag") %>’></asp:Label>
                                            </ItemTemplate>
                                            <EditItemTemplate>
                                                <asp:RadioButton ID="rdbYes" Text ="ON" runat ="server" GroupName ="edit"/>
                                                <asp:RadioButton ID="rdbNo" Text ="OFF" runat ="server" GroupName ="edit"/>
                                            </EditItemTemplate>
                                            <ItemStyle Width="40px" Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
                                                Font-Underline="False" HorizontalAlign="Left" />
                                        </asp:TemplateColumn>
                                        <asp:TemplateColumn HeaderText="Action">
                                            <ItemTemplate>
                                                <asp:LinkButton ID="btnEdit" runat="server" CommandName="Edit" CausesValidation="False">Edit</asp:LinkButton>
                                                <asp:LinkButton ID="btnDelete" runat="server" CommandName="Delete" CausesValidation="False" Visible ="false" >Remove</asp:LinkButton>
                                            </ItemTemplate>
                                            <EditItemTemplate>
                                                <asp:LinkButton ID="btnUpdate" Runat="server"  CommandArgument='<% #databinder.eval(container.dataitem,"id") %>’ CommandName="Update" >Update</asp:LinkButton>
                                                <asp:LinkButton ID="btnCancel" Runat="server" Commandname="Cancel">Cancel</asp:LinkButton>
                                            </EditItemTemplate>
                                            <ItemStyle Width ="10%"/>
                                        </asp:TemplateColumn>
                                        <asp:BoundColumn DataField="id" HeaderText="id" ReadOnly="True" Visible="False"></asp:BoundColumn>
                                    </Columns>
                                    <PagerStyle Mode="NumericPages"></PagerStyle>
                                </asp:DataGrid>
                            </td>
                        </tr>
                    </table>
                    </td>
                    </tr>
                </table>
        <div id="divButtom"></div>
        </div>
        <input id="hdnID" runat="server" type="hidden" />
        <asp:Literal ID="ltrErr" runat="server"></asp:Literal>
        </form>
</center>
</body>
</html>

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s