如何在webgrid中提供动态图像

时间:2013-02-23 12:01:42

标签: razor asp.net-mvc-4 webgrid

你好我在mvc中创建一个webgrid来显示数据库中的数据。在数据库中有一列包含图像的路径。例如: 的〜/ Images1 / PLCDTV1 / ILCDTV1.png

这是控制器的代码:

 public ActionResult Index()
        {
            SqlCommand cmd = new SqlCommand("select * from example_tbl", con);
            con.Open();
            SqlDataReader dr = cmd.ExecuteReader();
            List<AddDetailModel> model = new List<AddDetailModel>();
            while (dr.Read())
            {
                model.Add(new AddDetailModel()
                {
                    AdName = dr["Ad_name"].ToString(),
                    AdType=dr["Ad_type_name"].ToString(),
                    PartnerName=dr["Partner Name"].ToString(),
                    hrefurl=dr["Ad_url"].ToString(),
                    startDate=dr["Start_date"].ToString(),
                    endDate = dr["End_date"].ToString(),
                    tagName = dr["Tag"].ToString(),
                    AdPath= dr["Ad_image_path"].ToString()
                });
            }
            dr.Close();
            return View(model);
        }

在上面的代码中, Ad_image_path 是包含图片路径的列。

这是我的View代码:

@model IEnumerable<Example.Models.AddDetailModel>
@{
    ViewBag.Title = "Index";
    Layout = null;
}
@{
    var grid = new WebGrid(source: Model,
                                              defaultSort: "First Name",
                                              rowsPerPage: 5, fieldNamePrefix: "wg_",
                                              canPage: true, canSort: true,
                                              pageFieldName: "pg", sortFieldName: "srt"
                                              );  
}
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Ad Management</title>
    <link href="../../CSS/AdminLayStyle.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
       some style
    </style>
</head>
<body>
@using (Html.BeginForm())
{
    <table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <div class="maindiv" style="background-image: url('../../Images/blackbg.PNG')">
                    <div class="hd">
                        <h1>
                            Product Settings</h1>
                    </div>
                    <div class="bd">
                        <table align="center" cellpadding="0" cellspacing="0" width="100%">
                            <tr>
                                <td>
                                    @Html.ActionLink("Add new Ad", "adManage", "Ad")
                                </td>
                            </tr>
                            <tr>
                            <td>
                            &nbsp;
                            </td>
                            </tr>
                            <tr>
                                <td align="center">
                                    @grid.GetHtml(tableStyle: "listing-border", headerStyle: "gridhead", footerStyle: "paging", rowStyle: "td-dark", alternatingRowStyle: "td-light",
                            columns:
                                grid.Columns(

                                grid.Column("AdName", "Ad Name", style: "colProductid"),
                                grid.Column("PartnerName", "Partner Name", style: "colProductRate"),
                                grid.Column(header: "Ad", format: @<text><img src="http://localhost:31502/Images/Landing/Lighthouse.jpg" id="adimg"  alt="YourText" title="YourText"  width:"50px" height="50px"></text>),
                                grid.Column("hrefurl", "URL", style: "colDiscountRate"),
                                grid.Column("startDate", "Start Date", style: "colCategoryID"),
                                grid.Column("endDate", "End Date", style: "colCategoryID"),
                                grid.Column("tagName", "Tag", style: "colCategoryID"),
                                grid.Column(header: "Edit", format: @<text><a id="@item.Productid" class="clk"><img
                                        src="../../Images/edit.png" class="asa" width="25px" height="25px" alt="" style="border: none;" /></a></text>, style: "colOperation"),
                                grid.Column(header: "Delete", format: @<text><a href="@Url.Action("Delete", "Product", new { pid = item.Productid })" onclick="javascript:return ConfirmDelete();"><img
                                        src="../../Images/delete.png" width="20px" height="20px" alt="" style="border: none;" /></a></text>, style: "colOperation")
                                ), mode: WebGridPagerModes.All)
                                </td>
                            </tr>
                        </table>
                 </div>
            </td>
        </tr>
    </table>
}
</body>
</html>

正如你在webgrid的第三列中看到的那样,我保留了一个图像。它是一个硬编码值。 我希望图片的src是存储在AdPath中的值。

有什么办法可以实现吗?感谢

2 个答案:

答案 0 :(得分:1)

您可以通过item参数访问当前列的数据项:

grid.Column(header: "Ad", format: @<text><img src="@item.AdPath" id="adimg"  alt="YourText" title="YourText"  width:"50px" height="50px"></text>),

答案 1 :(得分:0)

  grid.Column(format: @<img src="@Url.Content(item.Image)"  

 alt="@item.Name" height="30" width="30" />   , header: "Photo"),

试试这个.... 101%它会起作用。