In this article I will show you how you can bind and display
the bind content detail like address and email id in detail in asp.net mvc
webgrid. In this article I have used asp.net mvc, webgrid control and c#.Net.
This article we can use in mvc3, mvc4 and mvc5.
Some of my previous articles are as follows: jQueryUI
Tooltip Using jQuery on Textbox MouseOver in Asp.Net, How
to Add Email Id Hyperlink or Mailto Link in Asp.net MVC WebGrid, MVC
WebGrid Custom paging With Page no and Shorting Data Using C#.Net, How
To Disable Sorting in Asp.net MVC Webgrid, Code
to Select All Checkbox in GridView in Asp.Net Using jQuery.
So for this article first we will create a new asp.net mvc application. After creating a new application we will add a new model class file. Please check the mode class code below.
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; }
}
}
|
Now come to controller part we will add the below code in
the controller file.
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;
}
}
}
|
Now we will create view for the controller class. After creating
the view add the below code.
@model MVCDemo.Models.StudentDetails
@{
ViewBag.Title = "Display
User Detail Using jQuery ToolTip In Asp.net MVC WebGrid";
}
<b>jQuery
ToolTip In MVC4 WebGrid</b>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<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>
<script>
$(function
() {
$(document).tooltip();
});
</script>
@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(null, "Detail",
format: @<text><div title="Address :@item.Address Email:@item.EmailId"
style="cursor:pointer;"><b>Detail</b></div></text>),
grid.Column("Name", "Stud
Name"),
grid.Column("Class", "Class"),
grid.Column("Section", "Section"),
grid.Column("Address", "Address")
), mode: WebGridPagerModes.Numeric)
</div>
}
|
In above code I have used jQuery for displaying the tool
tip. In this whatever we will put into title of the control it will appear in
the tool tip. Check the line
grid.Column(null, "Detail",
format: @<text><div title="Address :@item.Address Email:@item.EmailId"
style="cursor:pointer;"><b>Detail</b></div></text>),
|
Now run the application to view the output.
DOWNLOAD
About the Author
0 comments:
Please let me know your view