asp.net ajax 技巧4

原创

mb5c80f4c73b73a 2022-12-02 10:28:49 博主文章分类：Ajax ©著作权

文章标签 sql 数据 html 文章分类 运维

©著作权归作者所有：来自51CTO博客作者mb5c80f4c73b73a的原创作品，请联系作者获取转载授权，否则将追究法律责任

在章立民的书里看到的，的确是不错的技巧，一个gridview,一个detailview，很好的master-detail关系
在detailview中，还可以编辑，删除具体的信息，下面全部摘录之
前台：

<form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <table border="0" width="850" id="Table2">
                <tr>
                    <td colspan="2">
                        请选择一个部门：<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" DataSourceID="SqlDataSource1"
                            DataTextField="部门" DataValueField="部门" Width="168px" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                        </asp:DropDownList><asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:chtNorthwind %>"
                            DataSourceMode="DataReader" SelectCommand="SELECT DISTINCT [部门] FROM [章立民工作室]"></asp:SqlDataSource>
                    </td>
                </tr>
                <tr>
                    <td valign="top" style="width: 239px">
                        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"><ContentTemplate>
<asp:GridView id="GridView1" runat="server" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" Width="384px" DataSourceID="SqlDataSource2" OnSorted="GridView1_Sorted" OnRowDeleted="GridView1_RowDeleted" OnPageIndexChanged="GridView1_PageIndexChanged" ShowFooter="True" SelectedIndex="0" GridLines="None" ForeColor="#333333" Font-Size="Smaller" CellPadding="4" DataKeyNames="员工号码" AutoGenerateColumns="False" AllowSorting="True" AllowPaging="True">
                                    <Columns>
                                        <asp:TemplateField ShowHeader="False">
                                            <ItemTemplate>
                                                <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Select"
                                                    Text="选取"></asp:LinkButton>
                                                <asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Delete"
                                                    OnClientClick="return confirm('您确定要删除此笔数据纪录吗?');" Text="删除"></asp:LinkButton>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:BoundField DataField="员工号码" HeaderText="员工号码" InsertVisible="False" ReadOnly="True"
                                            SortExpression="员工号码" />
                                        <asp:BoundField DataField="姓名" HeaderText="姓名" SortExpression="姓名" />
                                        <asp:BoundField DataField="部门" HeaderText="部门" SortExpression="部门" />
                                    </Columns>
                                    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                                    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                                    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                                    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                                    <AlternatingRowStyle BackColor="White" />
                                </asp:GridView> <asp:SqlDataSource id="SqlDataSource2" runat="server" SelectCommand="SELECT 员工号码, 姓名, 部门 FROM 章立民工作室 WHERE 部门 = @部门" ConnectionString="<%$ ConnectionStrings:chtNorthwind %>" DeleteCommand="DELETE FROM 章立民工作室 WHERE 员工号码 = @员工号码">
                                    <DeleteParameters>
                                        <asp:Parameter Name="员工号码" />
                                    </DeleteParameters>
                                    <SelectParameters>
                                        <asp:ControlParameter ControlID="DropDownList1" Name="部门" PropertyName="SelectedValue" />
                                    </SelectParameters>
                                </asp:SqlDataSource> <asp:Label id="ErrorMessageLabel" runat="server"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged"></asp:AsyncPostBackTrigger>
</Triggers>
</asp:UpdatePanel>
                    </td>
                    <td valign="top" style="width: 280px">
                        <asp:UpdatePanel ID="UpdatePanel2" runat="server"><ContentTemplate>
<asp:DetailsView id="DetailsView1" runat="server" Width="472px" DataSourceID="SqlDataSource3" OnDataBound="DetailsView1_DataBound" GridLines="None" ForeColor="#333333" Font-Size="Smaller" CellPadding="4" DataKeyNames="员工号码" OnItemUpdated="DetailsView1_ItemUpdated" OnItemInserted="DetailsView1_ItemInserted" Height="50px" AutoGenerateRows="False">
<FooterStyle BackColor="#507CD1" ForeColor="White" Font-Bold="True"></FooterStyle>

<HeaderStyle HorizontalAlign="Right"></HeaderStyle>
<ItemTemplate>
<asp:Label id="Label1" runat="server" Text='<%# Bind("性别") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField SortExpression="地址" HeaderText="地址："><EditItemTemplate>
                                                <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("地址") %>' Width="328px"></asp:TextBox>

</EditItemTemplate>
<InsertItemTemplate>
                                                <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("地址") %>' Width="328px"></asp:TextBox>

</InsertItemTemplate>

<HeaderStyle HorizontalAlign="Right"></HeaderStyle>
<ItemTemplate>
                                                <asp:Label ID="Label2" runat="server" Text='<%# Bind("婚姻状况") %>'></asp:Label>

</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HtmlEncode="False" DataFormatString="{0:d}" DataField="到职日期" SortExpression="到职日期" HeaderText="到职日期：" ApplyFormatInEditMode="True">
<HeaderStyle HorizontalAlign="Right"></HeaderStyle>
</asp:BoundField>
<asp:BoundField DataField="起薪" SortExpression="起薪" HeaderText="起薪：">
<HeaderStyle HorizontalAlign="Right"></HeaderStyle>
</asp:BoundField>
<asp:BoundField DataField="目前薪资" SortExpression="目前薪资" HeaderText="目前薪资：">
<HeaderStyle HorizontalAlign="Right"></HeaderStyle>
</asp:BoundField>
<asp:BoundField HtmlEncode="False" DataFormatString="{0:d}" DataField="加薪日期" SortExpression="加薪日期" HeaderText="加薪日期：" ApplyFormatInEditMode="True">
<HeaderStyle HorizontalAlign="Right"></HeaderStyle>
</asp:BoundField>
<asp:TemplateField SortExpression="部门" HeaderText="部门："><EditItemTemplate>
                                                <asp:DropDownList ID="DropDownList6" runat="server" DataSourceID="DepartmentList"
                                                    DataTextField="部门" DataValueField="部门" SelectedValue='<%# Bind("部门") %>' Width="160px">
                                                </asp:DropDownList><asp:SqlDataSource ID="DepartmentList" runat="server" ConnectionString="<%$ ConnectionStrings:chtNorthwind %>"
                                                    SelectCommand="SELECT DISTINCT [部门] FROM [章立民工作室]"></asp:SqlDataSource>

</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox id="txtDepartment" runat="server" Text='<%# Bind("部门") %>'></asp:TextBox>
</InsertItemTemplate>

<AlternatingRowStyle BackColor="White"></AlternatingRowStyle>
</asp:DetailsView> <asp:SqlDataSource id="SqlDataSource3" runat="server" SelectCommand="SELECT * FROM [章立民工作室] WHERE ([员工号码] = @员工号码)" ConnectionString="<%$ ConnectionStrings:chtNorthwind %>" DeleteCommand="DELETE FROM [章立民工作室] WHERE [员工号码] = @员工号码" UpdateCommand="UPDATE [章立民工作室] SET [身份证号码] = @身份证号码, [姓名] = @姓名, [性别] = @性别, [地址] = @地址, [邮政编码] = @邮政编码, [出生日期] = @出生日期, [婚姻状况] = @婚姻状况, [到职日期] = @到职日期, [起薪] = @起薪, [目前薪资] = @目前薪资, [加薪日期] = @加薪日期, [部门] = @部门 WHERE [员工号码] = @员工号码" InsertCommand="INSERT INTO [章立民工作室] ([身份证号码], [姓名], [性别], [地址], [邮政编码], [出生日期], [婚姻状况], [到职日期], [起薪], [目前薪资], [加薪日期], [部门]) VALUES (@身份证号码, @姓名, @性别, @地址, @邮政编码, @出生日期, @婚姻状况, @到职日期, @起薪, @目前薪资, @加薪日期, @部门)">
                                    <DeleteParameters>
                                        <asp:Parameter Name="员工号码" Type="Int32" />
                                    </DeleteParameters>
                                    <UpdateParameters>
                                        <asp:Parameter Name="身份证号码" Type="String" />
                                        <asp:Parameter Name="姓名" Type="String" />
                                        <asp:Parameter Name="性别" Type="String" />
                                        <asp:Parameter Name="地址" Type="String" />
                                        <asp:Parameter Name="邮政编码" Type="String" />
                                        <asp:Parameter Name="出生日期" Type="DateTime" />
                                        <asp:Parameter Name="婚姻状况" Type="String" />
                                        <asp:Parameter Name="到职日期" Type="DateTime" />
                                        <asp:Parameter Name="起薪" Type="Decimal" />
                                        <asp:Parameter Name="目前薪资" Type="Decimal" />
                                        <asp:Parameter Name="加薪日期" Type="DateTime" />
                                        <asp:Parameter Name="部门" Type="String" />
                                        <asp:Parameter Name="员工号码" Type="Int32" />
                                    </UpdateParameters>
                                    <SelectParameters>
                                        <asp:ControlParameter ControlID="GridView1" Name="员工号码" PropertyName="SelectedValue"
                                            Type="Int32" />
                                    </SelectParameters>
                                    <InsertParameters>
                                        <asp:Parameter Name="身份证号码" Type="String" />
                                        <asp:Parameter Name="姓名" Type="String" />
                                        <asp:Parameter Name="性别" Type="String" />
                                        <asp:Parameter Name="地址" Type="String" />
                                        <asp:Parameter Name="邮政编码" Type="String" />
                                        <asp:Parameter Name="出生日期" Type="DateTime" />
                                        <asp:Parameter Name="婚姻状况" Type="String" />
                                        <asp:Parameter Name="到职日期" Type="DateTime" />
                                        <asp:Parameter Name="起薪" Type="Decimal" />
                                        <asp:Parameter Name="目前薪资" Type="Decimal" />
                                        <asp:Parameter Name="加薪日期" Type="DateTime" />
                                        <asp:Parameter Name="部门" Type="String" />
                                    </InsertParameters>
                                </asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
                    </td>
                </tr>
            </table>
        </div>
    </form>

后台

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        // 在选取了不同的部门之后，就将 DetailsView 控件切换至只读模式，也就是一般的显示模式。
        DetailsView1.ChangeMode(DetailsViewMode.ReadOnly);
    }

    protected void GridView1_PageIndexChanged(object sender, EventArgs e)
    {
        this.GridView1.SelectedIndex = 0;
        // 在 GridView 控件中按下数字按钮来切换至其它页面后，
        // 就将 DetailsView 控件切换至只读模式，也就是一般的显示模式。
        DetailsView1.ChangeMode(DetailsViewMode.ReadOnly);
    }

    protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
    {
        // 在 GridView 控件中按下"选取"按钮来选取某一列数据之后，
        // 就将 DetailsView 控件切换至只读模式，也就是一般的显示模式。
        DetailsView1.ChangeMode(DetailsViewMode.ReadOnly);
    }

    protected void GridView1_Sorted(object sender, EventArgs e)
    {
        // 在 GridView 控件中按下数据行的标题超级链接来排序之后，
        // 就将 DetailsView 控件切换至只读模式，也就是一般的显示模式。
        DetailsView1.ChangeMode(DetailsViewMode.ReadOnly);
    }

    protected void DetailsView1_DataBound(object sender, EventArgs e)
    {
        // 在 DetailsView 控件绑定至数据来源之后，检查 DetailsView 控件是否处于
        // 添加模式（也就是可以让用户将数据添加至数据来源）。如果是的话，将用来输
        // 入"员工号码"字段的 TextBox 控件设定成停用状态（因为"员工号码"字段是
        // 一个自动编号字段，不需要用户输入），另外，还将"部门"字段之 TextBox 控
        // 制项的值设定成当前所选取的部门，然后再将其设定成停用状态。
        if (DetailsView1.CurrentMode == DetailsViewMode.Insert)
        {
            TextBox IdTextBox = (TextBox)(DetailsView1.Rows[0].Cells[1].Controls[0]);
            IdTextBox.Enabled = false;

            TextBox DepartmentTextBox = (TextBox)(DetailsView1.Rows[12].FindControl("txtDepartment"));
            DepartmentTextBox.Text = DropDownList1.SelectedValue;
            DepartmentTextBox.Enabled = false;
        }
    }

    protected void DetailsView1_ItemInserted(object sender, DetailsViewInsertedEventArgs e)
    {
        if (e.Exception != null || e.AffectedRows <= 0)
        {
            ErrorMessageLabel.Text = "在添加数据时发生错误，请确认所输入之数据的格式是否正确。";
            e.ExceptionHandled = true;
        }
        else
        {
            ErrorMessageLabel.Text = "已经成功添加资料...";
        }

        GridView1.DataBind();
        this.UpdatePanel1.Update();
    }

    protected void DetailsView1_ItemUpdated(object sender, DetailsViewUpdatedEventArgs e)
    {
        if (e.Exception != null || e.AffectedRows <= 0)
        {
            ErrorMessageLabel.Text = "在编辑数据时发生错误，请确认所输入之数据的格式是否正确。";
            e.ExceptionHandled = true;
        }
        else
        {
            ErrorMessageLabel.Text = "已经成功编辑数据...";
        }

        GridView1.DataBind();
        this.UpdatePanel1.Update();
    }

    protected void GridView1_RowDeleted(object sender, GridViewDeletedEventArgs e)
    {
        if (e.Exception != null || e.AffectedRows <= 0)
        {
            ErrorMessageLabel.Text = "因为数据表上拥有外部索引键条件约束，因此无法删除。您只能删除没有关联数据记录的数据记录。";
            e.ExceptionHandled = true;
        }
        else
        {
            ErrorMessageLabel.Text = "已经成功删除资料...";
        }

        GridView1.DataBind();
        this.UpdatePanel1.Update();
    }