Jquery vertical Timeline in ASP.NET C#

Jquery vertical Timeline  in ASP.NET C#

How to implement jQuery timeline in C# ASP.NET.

i have implement timeline in asp.net  MVC4, here is the details.

Step 1- You need these script files in your web from or View.

<script type="text/javascript" src="~/Scripts/js/Timeline/libs/handlebars-1.0.rc.1.min.js"></script>

<script type="text/javascript" src="~/Scripts/js/Timeline/libs/tabletop-zzolo.master-20130402.min.js"></script>

<script type="text/javascript" src="~/Scripts/js/Timeline/libs/jquery.isotope.v1.5.21.min.js"></script>

<script type="text/javascript" src="~/Scripts/js/Timeline/libs/jquery.ba-resize.v1.1.min.js"></script>

<script type="text/javascript" src="~/Scripts/js/Timeline/libs/jquery.imagesloaded.v2.1.0.min.js"></script>

<script type="text/javascript" src="~/Scripts/js/Timeline/jquery-veritcal-timeline.js"></script>

<link href="~/Content/Timeline/style.css" rel="stylesheet" />

<script src="~/Scripts/library/jquery-ui-1.8.24.js"></script>

<script src="~/Scripts/js/Timeline/TimeLine.js"></script>

Step 2- Create HTML Div like

This is the div where time line render in your view or web form.

 <div id="TimeLineDiv" class="timeline-jquery-TimeLine">

 </div>

Step 3- Creat your your method to get timeline data in your MVC controller 

  [HttpGet]

        public ActionResult GetTimeLineDate()

        {

  var ProductID = 2242; 

 var TimelineMileStoneData = _iEAppService.getTimeLineData(ProductID);

 var yearList = TimelineMileStoneData.Select(x => x.DATE_ADDED.Value.Year).Distinct().ToList();

 return Json(new { TimelineMileStoneData = TimelineMileStoneData, yearList = yearList }, JsonRequestBehavior.AllowGet);

        }

Step 4- Write your query in repository if you are using repository pattern

 #region [Time Line Data]

        public List<TimeLine> getTimeLineData(long ProductId)

        {

            try

            {

                var TimeLineData =

             (from j in _dataContext.ADM_PRODUCT_MILESTONE

              join k in _dataContext.ADM_TC_MILESTONE on j.MILESTONE_ID equals k.MILESTONE_ID

              where k.TECHNICAL_COMMITTEE_ID == 18

              && j.EVALUATION_REQUEST_ID == 358

              && j.PRODUCT_ID == 2242

              select new TimeLine

              {

                  DATE_ADDED = j.DATE_ADDED,

                  MILE_STONE_TYPE_ID = j.MILESTONE_TYPE_ID,

                  CATEGORY_COLOR = "",

                  // photourl = "#"

                  readmoreurl = "#",

                 // TITLE_ICON = "",

                  //  DISPLAY_DATE =tl.DATE_ADDED.ToString(), // + " " + "May", ///TODO get month name like May

                  body = k.MILESTONE_MESSAGE

              }).Union(from a in _dataContext.ADM_PRODUCT_INFORMATIONAL_MILESTONE

                       select new TimeLine

                       {

                           DATE_ADDED = a.DATE_ADDED,

                           MILE_STONE_TYPE_ID = 4,

                           CATEGORY_COLOR = "#F8E27C",

                           // photourl = "#"

                           readmoreurl = "#",

                         //  TITLE_ICON = "",

                           body = a.INFORMATIONAL_NOTE

                       }).OrderByDescending(o => o.DATE_ADDED).ToList();

                foreach (var item in TimeLineData)

                {

                   

                    if (Convert.ToInt32(item.MILE_STONE_TYPE_ID) > 0)

                    {

                        item.CATEGORY_COLOR = SetColorCode(Convert.ToInt32(item.MILE_STONE_TYPE_ID));

                    }   

                    item.DISPLAY_DATE = item.DATE_ADDED.Value.Date.Day.ToString() + ", " + item.DATE_ADDED.Value.ToString("MMM");

                }

                return TimeLineData;

            }

            catch (Exception ex)

            {

                throw ex;

            }

        }

        public string SetColorCode(int? MileStoneTypeId)

        {

            string ColorCode = "";

            if (MileStoneTypeId == 1)

            {

                ColorCode = "#B7CC8A"; // Past Milestone.

            }

            if (MileStoneTypeId == 2)

            {

                ColorCode = "#8DB1E2"; //Active Nilestone.

            }

            if (MileStoneTypeId == 3)

            {

                ColorCode = "#E5B9B5"; //Recommended Re-evaluation

            }

            if (MileStoneTypeId == 4)

            {

          

                ColorCode = "#F8E27C"; //Informational Notes

            }

          

            return ColorCode;

        }

Run your code you can see your time line like.

if any buddy need complete code then let me know 

Email: rahman.qau80@gmail.com

Skype: webdeveloper84

Cell: +92 333 5440 951

Thanks