c# - 在gridview中缩放图像

Question

我是 asp.net 的新手。我有显示来自数据库的数据的 gridview。其中一个字段包含图像。动态显示的图像，因为只有图像路径存储在数据库中。我的表包含字段 Car_Name Car_Id Car_Photo No_of_Seats

现在我想要的是当用户点击图像时，我想要一个模态的弹出图像.....或者图像应该像这样缩放......

<%@ Page Title="" Language="C#" MasterPageFile="~/Project/MasterPage/MasterPage.master"
    AutoEventWireup="true" CodeFile="Reserve.aspx.cs" Inherits="Project_Reserve_Reserve" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link href="reserve.css" rel="stylesheet" type="text/css" />
    <script src="../../javascript/jquery-1.9.0.js" type="text/javascript"></script>
    <%-- <script src="myscript.js" type="text/javascript"></script>
    <script src="f12.js" type="text/javascript"></script>--%>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="homepageContentPlaceHolder" runat="Server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            Select Start Date&nbsp;&nbsp;
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:CalendarExtender ID="TextBox1_CalendarExtender" runat="server" Enabled="True"
                TargetControlID="TextBox1">
            </asp:CalendarExtender>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"
                ErrorMessage="*"></asp:RequiredFieldValidator>
            <br />
            <br />
            Select End Date&nbsp;&nbsp;&nbsp;
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <asp:CalendarExtender ID="TextBox2_CalendarExtender" runat="server" Enabled="True"
                TargetControlID="TextBox2">
            </asp:CalendarExtender>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox2"
                ErrorMessage="*"></asp:RequiredFieldValidator>
            <asp:AnimationExtender ID="RequiredFieldValidator2_AnimationExtender" runat="server"
                Enabled="True" TargetControlID="RequiredFieldValidator2">
            </asp:AnimationExtender>
            <br />
            <br />
            <br />
            Select Model&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:DropDownList ID="ddlModel" runat="server"
                AppendDataBoundItems="True" AutoPostBack="True" DataSourceID="SqlDataSource1"
                DataTextField="Model_Name" DataValueField="Model_Id" OnSelectedIndexChanged="ddlModel_SelectedIndexChanged"
                Width="100px">
                <asp:ListItem Value="0">--Select--</asp:ListItem>
            </asp:DropDownList>
            &nbsp;<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="ddlModel"
                ErrorMessage="Select a Model"></asp:RequiredFieldValidator>
            <br />
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
                SelectCommand="SELECT * FROM [Model]"></asp:SqlDataSource>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <br />
            <br />
            <br />
            <asp:GridView ID="gvcar" runat="server" AllowPaging="True" AutoGenerateColumns="False"
                CellPadding="4" ForeColor="#333333" GridLines="None" EmptyDataText="No data found!">
                <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                <Columns>
                    <asp:TemplateField HeaderText="Select">
                        <ItemTemplate>
                            <asp:CheckBox ID="CheckBox1" runat="server" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField DataField="Car_Name" HeaderText="Car Name" />
                    <asp:BoundField DataField="No_of_Seats" HeaderText="Seats" />
                    <asp:TemplateField HeaderText="Photo">
                        <ItemTemplate>
                            <asp:Image Width="300" Height="200" ID="Image1" runat="server" ImageUrl='<%# Eval("Car_Photo") %>' />
                        </ItemTemplate>
                    </asp:TemplateField>

                </Columns>
                <EmptyDataTemplate>
                    <div>
                        <h3>
                            <em>Sorry...No Car is available rightnow for this model</em></h3>
                    </div>
                </EmptyDataTemplate>
                <EditRowStyle BackColor="#999999" />
                <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                <SortedAscendingCellStyle BackColor="#E9E7E2" />
                <SortedAscendingHeaderStyle BackColor="#506C8C" />
                <SortedDescendingCellStyle BackColor="#FFFDF8" />
                <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
            </asp:GridView>
            <asp:Button runat="server" ID="btnModalPopUp" Style="display: none" />

            <br />
            <br />
            <br />
            <asp:Button ID="btnbook" runat="server" Text="Book" />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
            <br />
            <br />
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

Answer 1

以下链接可能对您有所帮助：

http://technico.qnownow.com/zoom-image-on-mouse-over-in-asp-net-gridview-control/

和

http://www.aspdotnet-suresh.com/2011/12/jquery-fancy-zoom-effect-for-image-in.html

希望它有帮助。