In this article I will show you how you can display the email
Id hyperlink or mailto Link in asp.net MVC WebGrid. So in this when you click
on main to hyperlink your outlook will open to send the mail.
Some of my previous articles are as follows:
MVC
WebGrid Custom paging With Page no and Shorting Data Using C#.Net, Code
to Select All Checkbox in GridView in Asp.Net Using jQuery, Highlight
GridView Row on Mouseover Using CSS in Asp.Net C#.Net, Drag
Drop Cells in GridView Control Using Asp.net C# and jQuery, Track
and Display Error Message in Asp.Net MVC Application Using C#.Net, Simple
Login From in Asp.Net MVC Using C#.Net, Bind
and Retrieve ListBox Selected Value in MVC Using C#.Net, Bind
DropDownList Using Entity Framework in ASP.Net MVC Using C#.
So for this article first we will create a new asp.net mvc
application and create the model.
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 Class { get;
set; }
public
string Section { get;
set; }
public
string Address { get;
set; }
public
string EmailId { get;
set; }
}
}
|
After creating model add the table in your entity
file(.edmx)
Now we will come to our controller end and add the below
code in your controller.
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, Section = item.Section, Class = item.Class,
Address = item.Address,EmailId=item.EmailId });
}
return
objStudent;
}
}
}
|
In above code I have first created instance for the entity
class. After that we have used linq query to access the value from table. After
that I have assign it to model. Now we have done at controller end. We will
create view and add the below code in our view.
@model MVCDemo.Models.StudentDetails
@{
ViewBag.Title = "How
to Add Email Id Hyperlink or Mailto Link in Asp.net MVC WebGrid";
}
<b>Mailto
Link in 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:true,canPage:true,rowsPerPage:5);
<div>
@grid.GetHtml(columns:
grid.Columns
(
grid.Column("ID", "Stud
ID"),
grid.Column("Name", "Stud
Name"),
grid.Column("Class", "Class"),
grid.Column("Section", "Section"),
grid.Column("Address", "Address"),
grid.Column("EmailId", "Email
Id", format:@<text>@{<a href="mailto:@item.EmailId">@item.EmailId</a>}</text>)
), mode: WebGridPagerModes.Numeric)
</div>
}
|
Now just check
grid.Column("EmailId", "Email
Id", format:@<text>@{<a href="mailto:@item.EmailId">@item.EmailId</a>}</text>)
)
|
The above code is used for adding mailto link in your mvc
webgrid. Now run the page to view the output. when you put mouse on email link you will be able to see the email attach in link.
About the Author
0 comments:
Please let me know your view