hello i am creating a webgrid in mvc which displays data from database. In the database there is a column which contains the path of the image.For example : ~/Images1/PLCDTV1/ILCDTV1.png
this is the code for controller :
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);
}
in the above code, Ad_image_path is the column which contains the image path.
this is my code for 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>
</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>
As you can see in the third column of the webgrid i am keeping an image.It is a hard coded value. I want the src of the image to be the value which is stored in the AdPath.
Is there any way it can be achieved? thanks
You can access the data item for the current column via the item parameter:
grid.Column(header: "Ad", format: @<text><img src="@item.AdPath" id="adimg" alt="YourText" title="YourText" width:"50px" height="50px"></text>),