In this article I will show you how you can bind image to a
webgrid in an mvc application using c#.net. In this we will use to bind the
image data to image control present in the mvc webgid. This article we can use
in mvc3, mvc4, mvc5.
In my previous article I have shown you how to do MVC
WebGrid Custom paging With Page no and Shorting Data Using C#.Net, How
To Disable Sorting in Asp.net MVC Webgrid, How
to Bind Data to Webgrid in ASP.net MVC Using C#.Net.
So for this article first we will create a new as mvc
application. Now we will create table
After this we will add an entity file in our application,
after adding .edmx file we will add the table into our entity file.
Now we will create a model file, and add the below code into
this.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MVCDemo.Models
{
public class StudentDetails
{
public
List<StudentDetail>
Studentmodel { get; set;
}
}
public class StudentDetail
{
public
int Id { get;
set; }
public
string Name { get;
set; }
public
string Address { get;
set; }
public
string Class { get;
set; }
public
string Section { get;
set; }
public
string StudentImg { get;
set; }
}
}
|
Now we will add controller in our application. In this
controller add the below code.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVCDemo.Models;
namespace MVCDemo.Controllers
{
public class HomeController
: Controller
{
//
// GET:
/UserLogin/
public
ActionResult Index()
{
StudentDetails
_objuserloginmodel = new StudentDetails();
List<StudentDetail> _objStudent = new List<StudentDetail>();
_objStudent = GetStudentList();
_objuserloginmodel.Studentmodel =
_objStudent;
return
View(_objuserloginmodel);
}
public
List<StudentDetail>
GetStudentList()
{
List<StudentDetail> objStudent = new List<StudentDetail>();
/*Create
instance of entity model*/
NorthwindEntities
objentity = new NorthwindEntities();
/*Getting
data from database for user validation*/
var
_objuserdetail = (from data in objentity.Students
select data);
foreach
(var item in
_objuserdetail)
{
objStudent.Add(new StudentDetail
{ Id = item.Id, Name = item.Name, Address =
item.Address,StudentImg=item.StudentImg });
}
return
objStudent;
}
}
}
|
Now we will create view of the controller and add the below
code in the view.
@model MVCDemo.Models.StudentDetails
@{
ViewBag.Title = "Code
to Dynamicelly Bind Image To Asp.net MVC WebGrid";
}
<b>Dynamicelly
Bind Image To a Asp.net MVC WebGrid</b>
<style type="text/css">
table
{
font-family:
verdana,arial,sans-serif;
font-size:
11px;
color:
#333333;
border-width:
1px;
border-color:
#666666;
border-collapse:
collapse;
}
table th
{
border-width:
1px;
padding:
8px;
border-style:
solid;
border-color:
#666666;
background-color:
#dedede;
}
table td
{
border-width:
1px;
padding:
8px;
border-style:
solid;
border-color:
#666666;
background-color:
#ffffff;
}
</style>
@using
(@Html.BeginForm("Index", "Home"))
{
var grid
= new WebGrid(Model.Studentmodel,
canSort: false, canPage: true, rowsPerPage: 5);
<div>
@grid.GetHtml(columns:
grid.Columns
(
grid.Column("ID", "Stud
ID"),
grid.Column(
format: (item) =>
{
return
Html.Raw(string.Format("<text><img src=\"{0}\"
alt=\"Image\" width='100px' height='100px'/></text>",
Url.Content(@item.StudentImg)));
}
),
grid.Column("Name", "Stud
Name"),
grid.Column("Class", "Class"),
grid.Column("Section", "Section"),
grid.Column("Address", "Address")
), mode: WebGridPagerModes.Numeric)
</div>
}
|
In above code we have added image in webgrid. Now run the application to view the output.
About the Author
0 comments:
Please let me know your view