Question

我有4列的gridview。在其中一列中，我试图显示图像。我将图像路径保存在数据库中，并将实际图像保存在一个文件夹中。该文件夹称为图像。

问题是，当填充gridview时，它不显示图像，而是显示图像路径。（请参见所附图片）

存储图像路径的数据库中的表列名称称为LogoImagePath，而gridview列名称标头为ImageLogo

这是我的代码

HTML

<asp:Button ID="btnGrid" runat="server" Text="Button" />
    <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" Font-Names="Arial"
        Font-Size="10pt" RowStyle-BackColor="#A1DCF2" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White">
        <Columns>
            <asp:BoundField ItemStyle-Width="150px" DataField="ClubID" HeaderText="ClubID" />
            <asp:BoundField ItemStyle-Width="150px" DataField="ClubName" HeaderText="ClubName" />
            <asp:BoundField ItemStyle-Width="150px" DataField="ClubEmail" HeaderText="ClubEmail" />
            <asp:ImageField DataImageUrlField="LogoImagePath" HeaderText="ImageLogo" />
        </Columns>
    </asp:GridView>

C＃

 protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                this.BindDummyRow();
            }
        }

private void BindDummyRow()
{
    DataTable dummy = new DataTable();

    dummy.Columns.Add("ClubID");
    dummy.Columns.Add("ClubName");
    dummy.Columns.Add("ClubEmail");
    dummy.Columns.Add("LogoImagePath");
    dummy.Rows.Add();
    gvCustomers.DataSource = dummy;
    gvCustomers.DataBind();

}

protected string FormatImageUrl(string LogoImagePath)
{

    if (LogoImagePath != null && LogoImagePath.Length > 0)

        return ("~/" + LogoImagePath);

    else return null;

}

[System.Web.Services.WebMethod]
public static string GetCustomers()
{
    string query = "SELECT * from tb_ClubDetails";
    SqlCommand cmd = new SqlCommand(query);
    return GetData(cmd).GetXml();
}
private static DataSet GetData(SqlCommand cmd)
{
    string strConnString = ConfigurationManager.ConnectionStrings["MyDbConn"].ConnectionString;
    using (SqlConnection con = new SqlConnection(strConnString))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataSet ds = new DataSet())
            {
                sda.Fill(ds);
                return ds;

            }
        }
    }
}

AJAX

 $(document).ready(function () {
            $("#btnGrid").click(function () {
                Bind();
                return false;
            });

            function Bind() {
                $.ajax({
                    type: "POST",
                    url: "Clubs.aspx/GetCustomers",
                    data: '{}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function (response) {
                        alert(response.d);
                    },
                    error: function (response) {
                        alert(response.d);
                    }
                });
            };
        });
        function OnSuccess(response) {
            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);
            var customers = xml.find("Table");
            var row = $("[id*=gvCustomers] tr:last-child").clone(true);
            $("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();
            $.each(customers, function () {
                var customer = $(this);
                $("td", row).eq(0).html($(this).find("ClubID").text());
                $("td", row).eq(1).html($(this).find("ClubName").text());
                $("td", row).eq(2).html($(this).find("ClubEmail").text());
                 $("td", row).eq(3).html($(this).find("LogoImagePath").text());
                $("[id*=gvCustomers]").append(row);
                row = $("[id*=gvCustomers] tr:last-child").clone(true);
            });
        }

请协助并提供建议。谢谢。

Answer 1

您应该替换此一个：

.data

使用：

$("td", row).eq(3).html($(this).find("LogoImagePath").text());

使用AJAX从数据库图像路径在gridview中显示图像

1 个答案: