View Product Details Using Kendo ScrollView In ASP.NET MVC5 With Entity Framework

Introduction

 

 In this article, I will demonstrate how to work with Kendo ScrollView to View the product details from a database using Entity Framework in ASP.Net MVC5. Let's move forward

 

Prerequisites 

• Visual Studio
• SQL Server
• Basic Knowledge of ASP.Net MVC
• Basic Knowledge of Entity Framework
• Basic Knowledge of JQuery
• Basic Knowledge of CSS

Article Flow 

• Create a table in database with List of product values
• Create ASP.NET MVC Empty project
• Configure Entity Framework with database and application
• Create a Controller and View
• Enable Kendo UI Features
• Load Products to ScrollView 

Create a table in database with List of product values

 

First, we will create a table in SQL Server to populate a Kendo Scrollview with the product(s) details in ASP.NET MVC Web application. I have created a table called "Product" with the following design.

 

 

 

Execute the below query to create a table with the above design.

CREATE TABLE [dbo].[Product] (
  [ProductID] [int] IDENTITY (1, 1) NOT NULL,
  [Name] [nvarchar](300) NULL,
  [Type] [nvarchar](100) NULL,
  [Price] [float] NULL,
  [Description] [nvarchar](MAX) NULL,
  [ImageURL] [nvarchar](MAX) NULL,
  [CreatedOn] [datetime] NULL,
  CONSTRAINT [PK_Product] PRIMARY KEY CLUSTERED
  (
  [ProductID] ASC
  ) WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO

And now, add a few dummy values to view in Kendo UI ScrollView. I have added some rows as shown below.

 

 

To add these dummy products, execute the below insert queries.

SET IDENTITY_INSERT [dbo].[Product] ON
GO
INSERT [dbo].[Product] ([ProductID], [Name], [Type], [Price], [Description], [ImageURL], [CreatedOn])
  VALUES (1, N'Pen', N'Education', 25, N'A pen is a writing instrument', N'Pen', CAST(0x0000A8390001E88B AS datetime))
GO
INSERT [dbo].[Product] ([ProductID], [Name], [Type], [Price], [Description], [ImageURL], [CreatedOn])
  VALUES (2, N'Pencil', N'Education', 10, N'A pencil is a writing implement', N'Pencil', CAST(0x0000A8390001E88B AS datetime))
GO
INSERT [dbo].[Product] ([ProductID], [Name], [Type], [Price], [Description], [ImageURL], [CreatedOn])
  VALUES (3, N'Tomato', N'Vegitable', 25, N'The tomato is the edible, often red, fruit of the plant Solanum lycopersicum', N'Tomato', CAST(0x0000A8390001E88B AS datetime))
GO
INSERT [dbo].[Product] ([ProductID], [Name], [Type], [Price], [Description], [ImageURL], [CreatedOn])
  VALUES (4, N'Potato', N'Vegitable', 40, N'NULLThe potato is a starchy, tuberous crop from the perennial nightshade Solanum tuberosum. The word "potato" may refer either to the plant itself or to the edible tuber', N'Potato', CAST(0x0000A8390001E88B AS datetime))
GO
SET IDENTITY_INSERT [dbo].[Product] OFF
GO
ALTER TABLE [dbo].[Product] ADD CONSTRAINT [DF_Product] DEFAULT (GETDATE()) FOR [CreatedOn]
GO

Create ASP.NET MVC Empty project

 

To create ASP.NET MVC empty project, follow the below steps one by one. Here, I have used Visual Studio 2013.

1. Select New Project -> Visual C# -> Web -> ASP.NET Web Application and enter your application name. Here, I named it "KendoScrollViewInMVC5".
2. Now, click OK.
3. Then, select Empty ASP.Net MVC template and click OK to create the project.
4. Once you click OK, the project will be created with the basic architecture of MVC.If you are not aware of how to create an Empty ASP.NET Web Application, please visit Step 1 and Step 2 to learn. 

 Once you complete these steps you will get the screen as below

 

 

 

 Configure Entity Framework with database and application

 

Here, I already discussed how to configure and implement database first approach. In the meantime choose our created table with entity framework, once we do our configuration with SQL table "Product" from CSharpCorner database and with our application you will get the below screen as succeeding configuration. 

 

 

 

Create a Controller and View

 

Now create an empty controller and view, here I created a controller with the name of "ScrollViewController".Whenever we create an empty Controller, it is created with empty Index action method. And create an empty view to this action method "Index".

 

Enable Kendo UI Features

 

Here, we going to enable the Kendo UI features with our application by adding the below CSS and JS in our shared _Layout view.

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>

Now create a divs in view which will act as scroll view with previous and next image buttons

<div id="example" style="width:570px;">
    <div class="demo-section hidden-on-narrow k-content">
        <div id="scrollview" style="height:570px !important;"></div> <a id="prev-img" title="Previous Image"></a> <a id="next-img" title="Next Image"></a>
</div>

And add the below kendo template to load the database data to scroll view slider. In below code, you can see that these(#:ImageURL#,#:Name #,#:Type #,#:Price #,#:Description #) fields, these fields are the database column name and we can declare it between # with colon to display the data in view.

<script id="template" type="text/x-kendo-template">
    <div>
        <div class="image" style="background-image: url('../Content/Products/#:ImageURL#.jpg');"></div>
        <p class="title">#:Name #</p>
    </div>
    <div>
        <p>Type : #:Type #</p>
        <p>Price : Rs. #:Price # </p>
        <p>Details: #:Description # </p>
    </div>
</script>

In above code, you can see that the name of the product has been saved in database and file has stored in physical as below and loaded from that respective path

 

 

And, add the script given below to enable the kendoScrollview plugin to the respective control. In the below code, you can see that the products are loading with the help of transport read and there we mentioned the path of action. 

<script type="text/javascript">
    $(function() {
        $("#scrollview").kendoMobileScrollView({
            dataSource: {
                type: "json",
                transport: {
                    read: "http://localhost:5157/ScrollView/GetProducts"
                }
            },
            serverPaging: true,
            pageSize: 30,
            schema: {
                data: "photos",
                total: "total_items"
            },
            contentHeight: "440px",
            enablePager: false,
            template: kendo.template($("#template").html())
        });
        $("#prev-img").click(function(e) {
            var scrollView = $("#scrollview").data("kendoMobileScrollView");
            scrollView.prev();
        });
        $("#next-img").click(function(e) {
            var scrollView = $("#scrollview").data("kendoMobileScrollView");
            scrollView.next();
        });
    });
</script>

Write the below logic in a controller to load the data from a database and return it as JSON type.

public ActionResult GetProducts()
{
    CSharpCornerEntities entities = new CSharpCornerEntities();
    var products = entities.Products.ToList();
    return Json(products, JsonRequestBehavior.AllowGet);
}

Now add the below CSS to make the scroll viewer control look good

<style>
    .demo-section {
        position: relative;
    }

    .demo-section>p {
        text-align: right;
        margin-top: 10px;
        font-size: .8em;
    }

    #prev-img,
    #next-img {
        display: block;
        position: absolute;
        top: 42px;
        z-idex: 1;
        height: 400px;
        width: 100px;
        opacity: 0.2;
    }

    #prev-img {
        left: 42px;
        background: url('../Content/Arrow/arrow-left.ico') no-repeat 50% 50%;
    }

    #next-img {
        left: auto;
        right: 42px;
        background: url('../Content/Arrow/arrow-right.ico') no-repeat 50% 50%;
    }

    a#prev-img:hover {
        background: url('../Content/Arrow/arrow-left.ico') no-repeat 50% 50% rgba(0, 0, 0, .3);
        opacity: 1;
    }

    a#next-img:hover {
        background: url('../Content/Arrow/arrow-right.ico') no-repeat 50% 50% rgba(0, 0, 0, .3);
        opacity: 1;
    }

    .title {
        font-weight: bold;
        text-transform: uppercase;
        text-align: center;
        margin: 0;
        padding: 1em;
        background-color: #222;
        color: #fff;
    }

    .image {
        display: block;
        height: 450px;
        width: 550px;
        background-size: cover;
    }
</style>

Okay now change the controller name in RouteConfig.cs file as below 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace KendoScrollViewInMVC5 {
    public class RouteConfig {
        public static void RegisterRoutes(RouteCollection routes) {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.MapRoute(name: "Default", url: "{controller}/{action}/{id}", defaults: new {
                controller = "ScrollView", action = "Index", id = UrlParameter.Optional
            });
        }
    }
}

Run your application

 

 

 

Complete View 

 

_Layout.cshtml 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Kendo ScrollView</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.mobile.min.css" />
    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> @Html.ActionLink("Kendo ScollView with ASP.NET MVC5", "Index", "Home", null, new { @class = "navbar-brand" }) </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav"> </ul>
            </div>
        </div>
    </div>
    <div class="container body-content"> @RenderBody()
        <hr /> </div>
</body>

</html>

Index.cshtml

@ {
    ViewBag.Title = "Index";
} < div id = "example"
style = "width:570px;" > < div class = "demo-section hidden-on-narrow k-content" > < div id = "scrollview"
style = "height:570px !important;" > < /div> < a id = "prev-img"
title = "Previous Image" > < /a> < a id = "next-img"
title = "Next Image" > < /a> < /div> < div class = "responsive-message" > < /div> < /div> < script id = "template"
type = "text/x-kendo-template" > < div > < div class = "image"
style = "background-image: url('../Content/Products/#:ImageURL#.jpg');" > < /div> < p class = "title" > #: Name# < /p> < /div> < div > < p > Type: #: Type# < /p> < p > Price: Rs.#: Price# < /p> < p > Details: #: Description# < /p> < /div> < /script> < script type = "text/javascript" > $(function() {
    $("#scrollview").kendoMobileScrollView({
        dataSource: {
            type: "json",
            transport: {
                read: "http://localhost:5157/ScrollView/GetProducts"
            }
        },
        serverPaging: true,
        pageSize: 30,
        schema: {
            data: "photos",
            total: "total_items"
        },
        contentHeight: "440px",
        enablePager: false,
        template: kendo.template($("#template").html())
    });
    $("#prev-img").click(function(e) {
        var scrollView = $("#scrollview").data("kendoMobileScrollView");
        scrollView.prev();
    });
    $("#next-img").click(function(e) {
        var scrollView = $("#scrollview").data("kendoMobileScrollView");
        scrollView.next();
    });
}); < /script> < style > .demo - section {
    position: relative;
}.demo - section > p {
    text - align: right;
    margin - top: 10 px;
    font - size: .8e m;
}#
prev - img, #next - img {
    display: block;
    position: absolute;
    top: 42 px;
    z - idex: 1;
    height: 400 px;
    width: 100 px;
    opacity: 0.2;
}#
prev - img {
    left: 42 px;
    background: url('../Content/Arrow/arrow-left.ico') no - repeat 50 % 50 % ;
}#
next - img {
    left: auto;
    right: 42 px;
    background: url('../Content/Arrow/arrow-right.ico') no - repeat 50 % 50 % ;
}
a# prev - img: hover {
    background: url('../Content/Arrow/arrow-left.ico') no - repeat 50 % 50 % rgba(0, 0, 0, .3);
    opacity: 1;
}
a# next - img: hover {
    background: url('../Content/Arrow/arrow-right.ico') no - repeat 50 % 50 % rgba(0, 0, 0, .3);
    opacity: 1;
}.title {
    font - weight: bold;
    text - transform: uppercase;
    text - align: center;
    margin: 0;
    padding: 1e m;
    background - color: #222;
color: # fff;
}.image {
    display: block;
    height: 450 px;
    width: 550 px;
    background - size: cover;
} < /style>

Complete Controller 

using KendoScrollViewInMVC5.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace KendoScrollViewInMVC5.Controllers {
    public class ScrollViewController: Controller {
        //
        // GET: /ScrollView/
        public ActionResult Index() {
            return View();
        }
        public ActionResult GetProducts() {
            CSharpCornerEntities entities = new CSharpCornerEntities();
            var products = entities.Products.ToList();
            return Json(products, JsonRequestBehavior.AllowGet);
        }
    }
}

Here, we have created an empty project so it can not get built in CSS. So, I have attached the respective CSS under Content folder and referred it to a project. Refer to the attached project for reference and I did attach the demonstrated project without a package for Entity Framework 6.0 due to the size limit.

 

Summary

 

In this article, we have seen how to view the product details in our ASP.NET MVC5 web application with Kendo ScrollView using Entity Framework.

I hope you enjoyed this article. Your valuable feedback and comments about this article are always welcome.