FormView布局

时间:2013-11-01 13:35:11

标签: asp.net gridview formview

这让我在过去几次疯狂,但我总是捏造它并继续前进。今天我想尝试解决它!

我经常创建一个GridView来显示数据,并在插入模式下直接显示FormView,其中InsertItemTemplate中的控件对应于GridView中的列,因此它看起来像FormView只是GridView等待新数据条目的空行。这很有效。

问题在于我永远无法获得FormView中“列”(实际上只是文本框)的宽度,以对应上面GridView中列的宽度。

在下面的示例中,正如您所看到的,GridViewFormView的宽度均为100%,当然,当呈现页面时,它们的宽度都完全相同(我简要地给了FormView一个边框来检查)。但是,即使FormView中文本框的宽度与GridView中列的宽度相同,它们也不会以这种方式显示。文本框略宽,当你到达最右边的列时,累积效果意味着对齐已经结束了。

我猜这个问题与边框宽度或正在渲染的其他隐藏元素有关,但我无法弄明白。我不得不说,对齐的数量似乎超过边界会影响事物的几个像素。

<asp:GridView ID="gvTPR" runat="server" DataSourceID="SQLTPR" AutoGenerateColumns="false" DataMember="DefaultView" DataKeyNames="TPRID" Width="100%" >
<RowStyle HorizontalAlign="Center" />
<EditRowStyle BackColor="#ccffff" />
<HeaderStyle BackColor="#013b82" ForeColor="White" />
<Columns>
<asp:BoundField DataField="TPREnteredAt" HeaderText="Entered At" ReadOnly="True" SortExpression="TPREnteredAt" ItemStyle-Width="24%" ControlStyle-Width="90%" />
<asp:BoundField DataField="TPRTemp" HeaderText="Temp" ReadOnly="True" SortExpression="TPRTemp" ItemStyle-Width="12%" ControlStyle-Width="90%"/>
<asp:BoundField DataField="TPRPulse" HeaderText="Pulse" ReadOnly="True" SortExpression="TPRPulse" ItemStyle-Width="12%" ControlStyle-Width="90%"/>
<asp:BoundField DataField="TPRRespiration" HeaderText="Respiration" ReadOnly="True" SortExpression="TPRRespiration" ItemStyle-Width="12%" ControlStyle-Width="90%"/>
<asp:BoundField DataField="TPRPCV" HeaderText="PCV" ItemStyle-Width="12%" ControlStyle-Width="90%"/>
<asp:BoundField DataField="TPRTP" HeaderText="TP" ItemStyle-Width="12%" ControlStyle-Width="90%" />
<asp:CommandField ButtonType="Button" InsertVisible="False" ShowEditButton="True" ItemStyle-Width="16%" UpdateText="Save" ControlStyle-Width="60px" />
</Columns>
<EmptyDataTemplate>
No TPR records exist
</EmptyDataTemplate>
</asp:GridView>
<asp:FormView ID="fvTPR" runat="server" DataSourceID="SQLTPR" DefaultMode="Insert" Width="100%" >
<InsertItemTemplate>
<asp:textbox ID="lblEnteredAt" runat="server" Text="Will be added automatically" Width="24%" />
<asp:TextBox ID="txtTemp" runat="server" Text='<%# Bind("TPRTemp")%>' Width="12%" />
<asp:TextBox ID="txtPulse" runat="server" Text='<%# Bind("TPRPulse")%>' Width="12%" />
<asp:TextBox ID="txtRespiration" runat="server" Text='<%# Bind("TPRRespiration")%>' Width="12%" />
<asp:TextBox ID="txtPCV" runat="server" Text='<%# Bind("TPRPCV")%>' Width="12%" />
<asp:TextBox ID="txtTP" runat="server" Text='<%# Bind("TPRTP")%>' Width="12%" />                
<asp:Button ID="btnAddTPR" runat="server" Text="Save" Width="5%" />
</InsertItemTemplate>
</asp:FormView>

这样渲染: Rendered GridView and FormView

1 个答案:

答案 0 :(得分:5)

如何使用GridView页脚添加功能?通过这种方式,您可以将所有列放在同一个表中,并且可以解决定位问题。

以下是gridview应如何显示的示例:

<asp:GridView ID="gvTPR" runat="server" DataSourceID="SQLTPR" AutoGenerateColumns="False" ShowFooter="True" DataKeyNames="TPRID" Width="100%" EnableModelValidation="True">
<RowStyle HorizontalAlign="Center" />
<EditRowStyle BackColor="#ccffff" />
<HeaderStyle BackColor="#013b82" ForeColor="White" />
<Columns>
    <asp:TemplateField HeaderText="Entered At" SortExpression="TPREnteredAt">
        <EditItemTemplate>
            <asp:TextBox ID="lblEnteredAt" runat="server" Text='<%# Eval("TPREnteredAt") %>'></asp:TextBox>
        </EditItemTemplate>
        <ItemTemplate>
            <asp:Label ID="Label1" runat="server" Text='<%# Bind("TPREnteredAt") %>'></asp:Label>
        </ItemTemplate>
        <ControlStyle Width="90%" />
        <ItemStyle Width="24%" />
        <FooterTemplate>
            <asp:TextBox ID="lblEnteredAt" runat="server" Text="Will be added automatically" Width="24%" />
        </FooterTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Temp" SortExpression="TPRTemp">
        <EditItemTemplate>
            <asp:TextBox ID="txtTemp" runat="server" Text='<%# Eval("TPRTemp") %>'></asp:TextBox>
        </EditItemTemplate>
        <ItemTemplate>
            <asp:Label ID="Label2" runat="server" Text='<%# Bind("TPRTemp") %>'></asp:Label>
        </ItemTemplate>
        <FooterTemplate>
            <asp:TextBox ID="txtTemp" runat="server" Text='<%# Bind("TPRTemp")%>' Width="12%" />
        </FooterTemplate>
        <ControlStyle Width="90%" />
        <ItemStyle Width="12%" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Pulse" SortExpression="TPRPulse">
        <EditItemTemplate>
            <asp:TextBox ID="txtPulse" runat="server" Text='<%# Eval("TPRPulse") %>'></asp:TextBox>
        </EditItemTemplate>
        <ItemTemplate>
            <asp:Label ID="Label3" runat="server" Text='<%# Bind("TPRPulse") %>'></asp:Label>
        </ItemTemplate>
        <FooterTemplate>
            <asp:TextBox ID="txtPulse" runat="server" Text='<%# Bind("TPRPulse")%>' Width="12%" />
        </FooterTemplate>
        <ControlStyle Width="90%" />
        <ItemStyle Width="12%" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Respiration" SortExpression="TPRRespiration">
        <EditItemTemplate>
            <asp:TextBox ID="txtRespiration" runat="server" Text='<%# Eval("TPRRespiration") %>'></asp:TextBox>
        </EditItemTemplate>
        <ItemTemplate>
            <asp:Label ID="Label4" runat="server" Text='<%# Bind("TPRRespiration") %>'></asp:Label>
        </ItemTemplate>
        <FooterTemplate>
            <asp:TextBox ID="txtRespiration" runat="server" Text='<%# Bind("TPRRespiration")%>' Width="12%" />
        </FooterTemplate>
        <ControlStyle Width="90%" />
        <ItemStyle Width="12%" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="PCV">
        <EditItemTemplate>
            <asp:TextBox ID="txtPCV" runat="server" Text='<%# Bind("TPRPCV") %>'></asp:TextBox>
        </EditItemTemplate>
        <ItemTemplate>
            <asp:Label ID="Label5" runat="server" Text='<%# Bind("TPRPCV") %>'></asp:Label>
        </ItemTemplate>
        <FooterTemplate>
            <asp:TextBox ID="txtPCV" runat="server" Text='<%# Bind("TPRPCV")%>' Width="12%" />
        </FooterTemplate>
        <ControlStyle Width="90%" />
        <ItemStyle Width="12%" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="TP">
        <EditItemTemplate>
            <asp:TextBox ID="txtTP" runat="server" Text='<%# Bind("TPRTP") %>'></asp:TextBox>
        </EditItemTemplate>
        <ItemTemplate>
            <asp:Label ID="Label6" runat="server" Text='<%# Bind("TPRTP") %>'></asp:Label>
        </ItemTemplate>
        <FooterTemplate>
            <asp:TextBox ID="txtTP" runat="server" Text='<%# Bind("TPRTP")%>' Width="12%" />
        </FooterTemplate>
        <ControlStyle Width="90%" />
        <ItemStyle Width="12%" />
    </asp:TemplateField>
    <asp:TemplateField>
        <ItemTemplate>
            <asp:Button ID="lnkbtnEdit" runat="Server" Text="Edit" CommandName="Edit"
                CausesValidation="false"></asp:Button>

        </ItemTemplate>
        <EditItemTemplate>
            <asp:Button ID="lnkbtnUpdate" runat="Server" Text="Save" CommandName="Update"
                CausesValidation="true"></asp:Button><br />
            <asp:LinkButton ID="lnkbtnCancel" runat="Server" Text="Cancel" CommandName="Cancel"
                CausesValidation="false"></asp:LinkButton>
        </EditItemTemplate>
        <FooterTemplate>
            <asp:LinkButton ID="lnkbtnInsert" runat="Server" Text="Save" CommandName="Insert"
                CausesValidation="true"></asp:LinkButton>
        </FooterTemplate>
    </asp:TemplateField>
</Columns>
<EmptyDataTemplate>
    No TPR records exist
</EmptyDataTemplate>
</asp:GridView>

希望这有帮助!

此致 乌罗什