Display User Detail in Tooltip in Webgrid in mvc4 using jquery

Description:-

In this example we exlain that how to display Tooltip when mouse is hover to each rows or cells in webgrid in mvc with asp.net.or how to show webgrid row details in Tooltip on mouseover using JQuery in MVC with ASP.NET.

Previous time we already explain that how to display Gridview rows detail in tooltip when mouse is over to rows in asp.net but now in this example we explain that how to provide same facility in webgrid in mvc application.

Here we not used any jquery plugin to display custom tooltip in webgrid rows when mouse is hover to cells of the webgrid in mvc.

to display user detail in tooltip in mvc webgrid you have to follow below steps

 

Restrict the size of File when Uploaded How to Restrict the size of File when uploaded by user

Dynamically Read/Write File in asp.Net How to Read Write File in Asp.Net using C#

 Step 1:- Create StudentDetails class in Model Folder.

StudentDetails.cs:-

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; }

    }

}

Step 2:- Create HomeController class Controller Folder.

HomeController.cs:-

  

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, Age = item.Age,EmailId=item.EmailId });

            }

            return objStudent;

        }

     }

}

Step 3:- Create Index view in View Folder.

Index.CShtml:- 

@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>

}