Asp.net - 将图像字段添加到 gridview,并将其 link 添加到数据类型字段
Asp.net - Add imagefield to gridview, and link it to datatype field
我正在尝试将 "asp:Imagefield" 添加到我的网格视图中,以便它可以根据房间类型显示图像。假设我们的房间类型是:单人房、双人房和家庭房。基于这些,我也希望它显示图像。在我的图像文件夹中,我有这些图像:
Double.jpg
Single.jpg
Family.jpg
因此对于所有双行(其中 Type = "Double"),它应该显示 Double.jpg 图像。
现在我的 gridview 看起来像这样:
Nr Type Price Select (checkbox)
我添加了图像字段,现在看起来像这样:
Photo Nr Type Price Select
一些代码:
<!-- Source control -->
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DefaultConnection %>" SelectCommand="SELECT Nr, Type, Price
FROM AspRooms r
WHERE @adults <= r.Adult AND @children <= r.Children AND NOT EXISTS
(
SELECT 1 FROM Booking b
WHERE b.RoomNr = r.Nr
AND
(
(CAST(@Checkin AS date) >= b.CheckIn AND CAST(@Checkin AS date) <= b.CheckOut)
OR (CAST(@Checkin AS date) <= b.CheckIn AND CAST(@Checkout AS date) >= b.CheckIn)
)
)
">
<SelectParameters>
<asp:ControlParameter ControlID="adults" Name="adults" PropertyName="SelectedValue" />
<asp:ControlParameter ControlID="childrens" Name="children" PropertyName="SelectedValue" />
<asp:ControlParameter ControlID="datetimepicker1" Name="Checkin" PropertyName="Text" />
<asp:ControlParameter ControlID="datetimepicker2" Name="Checkout" PropertyName="Text" />
</SelectParameters>
</asp:SqlDataSource>
<!-- Gridview table -->
<asp:GridView ID="GridView1" runat="server" CssClass="table table-hover table-condensed" GridLines="None" AutoGenerateColumns="False" DataKeyNames="Nr" DataSourceID="SqlDataSource1" Width="100%">
<Columns>
<asp:ImageField HeaderText="Rooms" DataImageUrlField="PhotoPath" ControlStyle-Height="150px" ControlStyle-Width="150px">
</asp:ImageField>
<asp:BoundField DataField="Nr" HeaderText="Nr" ReadOnly="True" SortExpression="Nr" />
<asp:BoundField DataField="Type" HeaderText="Type" SortExpression="Type" />
<asp:BoundField DataField="Price" HeaderText="Price" SortExpression="Price" />
<asp:TemplateField HeaderText="Select Room">
<EditItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</EditItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
正如您在代码中看到的,我在 ImageField 中使用了 DataImageUrlField="PhotoPath"。在我的数据库中,我创建了一个名为 PhotoPath 的字段,其中包含数据类型 nchar(20)。表格是这样的:images/single.jpg
但是当这是 运行 时,我收到一个错误,其中显示:在所选数据源上找不到名称为 'PhotoPath' 的字段或 属性。
任何人都可以看到我的代码目前有什么问题吗?
您需要将 PhotoPath
列添加到 SelectCommand
,并更新 ImageField
以使用该列。
由于您设置了 AutoGenerateColumns="False"
,此列不会自动显示为单独的列。
您还可以将重叠预订的测试简化为:
[my check in] <= [booking check out]
AND
[my check out] >= [booking check in]
这将查找与新预订重叠的任何现有预订。您当前的查询仅查找完全包含新预订或在新预订期间开始的预订。将找不到在新预订之前开始并在其中途结束的预订。
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:DefaultConnection %>"
SelectCommand="SELECT Nr, Type, Price, PhotoPath
FROM AspRooms r
WHERE @adults <= r.Adult AND @children <= r.Children AND NOT EXISTS
(
SELECT 1 FROM Booking b
WHERE b.RoomNr = r.Nr
AND CAST(@Checkin AS date) <= b.CheckOut
AND CAST(@Checkout AS date) >= b.CheckIn
)">
<SelectParameters>
<asp:ControlParameter ControlID="adults" Name="adults" PropertyName="SelectedValue" />
<asp:ControlParameter ControlID="childrens" Name="children" PropertyName="SelectedValue" />
<asp:ControlParameter ControlID="datetimepicker1" Name="Checkin" PropertyName="Text" />
<asp:ControlParameter ControlID="datetimepicker2" Name="Checkout" PropertyName="Text" />
</SelectParameters>
</asp:SqlDataSource>
<asp:GridView ID="GridView1" runat="server"
DataSourceID="SqlDataSource1" DataKeyNames="Nr"
CssClass="table table-hover table-condensed" GridLines="None" AutoGenerateColumns="False" Width="100%"
>
<Columns>
<asp:ImageField HeaderText="Rooms"
DataImageUrlField="PhotoPath"
ControlStyle-Height="150px"
ControlStyle-Width="150px"
/>
<asp:BoundField DataField="Nr" HeaderText="Nr" ReadOnly="True" SortExpression="Nr" />
<asp:BoundField DataField="Type" HeaderText="Type" SortExpression="Type" />
<asp:BoundField DataField="Price" HeaderText="Price" SortExpression="Price" />
<asp:TemplateField HeaderText="Select Room">
<EditItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</EditItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
我正在尝试将 "asp:Imagefield" 添加到我的网格视图中,以便它可以根据房间类型显示图像。假设我们的房间类型是:单人房、双人房和家庭房。基于这些,我也希望它显示图像。在我的图像文件夹中,我有这些图像:
Double.jpg
Single.jpg
Family.jpg
因此对于所有双行(其中 Type = "Double"),它应该显示 Double.jpg 图像。
现在我的 gridview 看起来像这样:
Nr Type Price Select (checkbox)
我添加了图像字段,现在看起来像这样:
Photo Nr Type Price Select
一些代码:
<!-- Source control -->
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DefaultConnection %>" SelectCommand="SELECT Nr, Type, Price
FROM AspRooms r
WHERE @adults <= r.Adult AND @children <= r.Children AND NOT EXISTS
(
SELECT 1 FROM Booking b
WHERE b.RoomNr = r.Nr
AND
(
(CAST(@Checkin AS date) >= b.CheckIn AND CAST(@Checkin AS date) <= b.CheckOut)
OR (CAST(@Checkin AS date) <= b.CheckIn AND CAST(@Checkout AS date) >= b.CheckIn)
)
)
">
<SelectParameters>
<asp:ControlParameter ControlID="adults" Name="adults" PropertyName="SelectedValue" />
<asp:ControlParameter ControlID="childrens" Name="children" PropertyName="SelectedValue" />
<asp:ControlParameter ControlID="datetimepicker1" Name="Checkin" PropertyName="Text" />
<asp:ControlParameter ControlID="datetimepicker2" Name="Checkout" PropertyName="Text" />
</SelectParameters>
</asp:SqlDataSource>
<!-- Gridview table -->
<asp:GridView ID="GridView1" runat="server" CssClass="table table-hover table-condensed" GridLines="None" AutoGenerateColumns="False" DataKeyNames="Nr" DataSourceID="SqlDataSource1" Width="100%">
<Columns>
<asp:ImageField HeaderText="Rooms" DataImageUrlField="PhotoPath" ControlStyle-Height="150px" ControlStyle-Width="150px">
</asp:ImageField>
<asp:BoundField DataField="Nr" HeaderText="Nr" ReadOnly="True" SortExpression="Nr" />
<asp:BoundField DataField="Type" HeaderText="Type" SortExpression="Type" />
<asp:BoundField DataField="Price" HeaderText="Price" SortExpression="Price" />
<asp:TemplateField HeaderText="Select Room">
<EditItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</EditItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
正如您在代码中看到的,我在 ImageField 中使用了 DataImageUrlField="PhotoPath"。在我的数据库中,我创建了一个名为 PhotoPath 的字段,其中包含数据类型 nchar(20)。表格是这样的:images/single.jpg
但是当这是 运行 时,我收到一个错误,其中显示:在所选数据源上找不到名称为 'PhotoPath' 的字段或 属性。
任何人都可以看到我的代码目前有什么问题吗?
您需要将 PhotoPath
列添加到 SelectCommand
,并更新 ImageField
以使用该列。
由于您设置了 AutoGenerateColumns="False"
,此列不会自动显示为单独的列。
您还可以将重叠预订的测试简化为:
[my check in] <= [booking check out]
AND
[my check out] >= [booking check in]
这将查找与新预订重叠的任何现有预订。您当前的查询仅查找完全包含新预订或在新预订期间开始的预订。将找不到在新预订之前开始并在其中途结束的预订。
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:DefaultConnection %>"
SelectCommand="SELECT Nr, Type, Price, PhotoPath
FROM AspRooms r
WHERE @adults <= r.Adult AND @children <= r.Children AND NOT EXISTS
(
SELECT 1 FROM Booking b
WHERE b.RoomNr = r.Nr
AND CAST(@Checkin AS date) <= b.CheckOut
AND CAST(@Checkout AS date) >= b.CheckIn
)">
<SelectParameters>
<asp:ControlParameter ControlID="adults" Name="adults" PropertyName="SelectedValue" />
<asp:ControlParameter ControlID="childrens" Name="children" PropertyName="SelectedValue" />
<asp:ControlParameter ControlID="datetimepicker1" Name="Checkin" PropertyName="Text" />
<asp:ControlParameter ControlID="datetimepicker2" Name="Checkout" PropertyName="Text" />
</SelectParameters>
</asp:SqlDataSource>
<asp:GridView ID="GridView1" runat="server"
DataSourceID="SqlDataSource1" DataKeyNames="Nr"
CssClass="table table-hover table-condensed" GridLines="None" AutoGenerateColumns="False" Width="100%"
>
<Columns>
<asp:ImageField HeaderText="Rooms"
DataImageUrlField="PhotoPath"
ControlStyle-Height="150px"
ControlStyle-Width="150px"
/>
<asp:BoundField DataField="Nr" HeaderText="Nr" ReadOnly="True" SortExpression="Nr" />
<asp:BoundField DataField="Type" HeaderText="Type" SortExpression="Type" />
<asp:BoundField DataField="Price" HeaderText="Price" SortExpression="Price" />
<asp:TemplateField HeaderText="Select Room">
<EditItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</EditItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>