MVC – Sibeesh Passion

LINQ Basic To Advanced – MVC Demo Application

SibeeshVenu — Mon, 15 May 2017 16:09:40 +0000

[toc]

Introduction

Here, in this post we are going to a see some LINQ queries, which covers both basics and advanced. LINQ queries are introduced few years back to offer a consistent way for working with data across many datasources and formats. In LINQ queries, you will always work with objects, which makes it simple to write. I hope you would have already written lots of LINQ queries already, if you haven’t, I strongly reccommend you to read this blog where you can find the answer for, why do we need to use LINQ?. Here I am going to create a MVC demo application. I hope you will like this. Now let’s begin.

Download Source Code

LINQ_B_To_A

Background

Whenever I get a chance to write some server side codes in C#, I always write it using LINQ. And few weeks back, I was assigned to a training programme where my job was to teach LINQ, hence this post covers the the queries I have written for the training programme. Hope you will find it useful.

Using the code

A LINQ query can be written in two ways.

Query Syntax

Method Chain or Using dot(.) operator

There are so many articles available in the Internet on the topic LINQ, but most of them dont cover the differences of writing the queries in two possible ways, the motive of this article is to write the queries in both ways, so that you can understand the differnces.

As I mentioned, we are going to create an MVC application, we need to create it first and then configure the entity. Let’s go and do that.

Create a database

To get started with we need to configure our database first. To do so, either you can download the Wild World Importers from here or you can run the script file included in the downlaod link above.

Once after you created the database, you can create your MVC application and Entity Data Model in it.

Configuring MVC application with Entity Data Model

By this time, I hope you would have configured your MVC application with Entity Data Model. Now it is time to create a controller and Entity object.

[csharp]
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Windows.Forms;
using LINQ_B_to_A.Models;
namespace LINQ_B_to_A.Controllers
{
public class HomeController : Controller
{
// GET: Home

public MyDataModel DtContext { get; set; } = new MyDataModel();
}
}
[/csharp]

Now we can write some LINQ queries as everything is set to get started.

Setting up the Index view with possible actions

This is just to call the actions we are going write. Let’s see the Index page now.

[html]
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}

Index

[/html]

LINQ Basic to Advanced Index View

Normal Select Query With StartWith and Take

Let’s have a look at the preceding query.

[csharp]
///

/// Linq query with Select
///

///
public ActionResult LoadAll()
{
var loadAllData = (from d in DtContext.Cities where d.CityName.StartsWith("C") select d).Take(10);

//Method Chain Format
var loadAllData1 = DtContext.Cities.Where(d => d.CityName.StartsWith("C")).Take(10);

return PartialView(loadAllData);
}
[/csharp]

As you can see, we are just fetching the data from Cities in both ways. And we are using StartWith as a filter, which actually looks for the city names which starts with the letter C, and finally we are taking 10 elements from it. The first query is the “Query syntax” and the second one is “Method chain”. Personally I like the second way. How about you?

[html]
@model IQueryable

City Names

@foreach (var ctyObj in Model)
{

@ctyObj.CityName

}



        public ActionResult LoadAll()

        {

            var loadAllData = (from d in DtContext.Cities where d.CityName.StartsWith("C") select d).Take(10);
            //Method Chain Format

            var loadAllData1 = DtContext.Cities.Where(d => d.CityName.StartsWith("C")).Take(10);
            return PartialView(loadAllData);

        }

[/html]

We are ready to see our first query in action now.

Let’s creat a partial view now to show the data we fetched.

JOIN Query

To write a join, the query would be as preceding.

[csharp]
///

/// Linq query with join and where
///

///
public ActionResult JoinWithWhere()
{
var loadAllData = (from oOrders in DtContext.Orders
join oOrderLines in DtContext.OrderLines
on oOrders.OrderID equals oOrderLines.OrderID
orderby oOrders.OrderID
select new OrderAndOrderLines()
{
OrderId = oOrders.OrderID,
Description = oOrderLines.Description,
Quantity = oOrderLines.Quantity
}).Take(10);
//Method Chain Format
var asMethodChain = DtContext.Orders.Join(DtContext.OrderLines, oOrders => oOrders.OrderID,
oOrderLines => oOrderLines.OrderID,
(oOrders, oOrderLines) => new { oOrders, oOrderLines })
.OrderBy(@o => @o.oOrders.OrderID)
.Select(@s => new OrderAndOrderLines()
{
OrderId = @s.oOrders.OrderID,
Description = @s.oOrderLines.Description,
Quantity = @s.oOrderLines.Quantity
}).Take(10);

return PartialView(loadAllData);
}
[/csharp]

In the above query we are just joining the tables Order and OrderLines with OrderID and to select we are using an another custom model OrderAndOrderLines.

[csharp]
namespace LINQ_B_to_A.Models
{
public partial class OrderAndOrderLines
{
public int OrderId { get; set; }
public string Description { get; set; }
public int? Quantity { get; set; }
}
}
[/csharp]

The view can be written as follows.

[html]
@model IEnumerable

@foreach (var @item in Model)
{

}

Order Details
Order ID	Description	Quantity
@item.OrderId	@item.Description	@item.Quantity



     public ActionResult JoinWithWhere()

        {

            var loadAllData = (from oOrders in DtContext.Orders

                               join oOrderLines in DtContext.OrderLines

                               on oOrders.OrderID equals oOrderLines.OrderID

                               orderby oOrders.OrderID

                               select new OrderAndOrderLines()

                               {

                                   OrderId = oOrders.OrderID,

                                   Description = oOrderLines.Description,

                                   Quantity = oOrderLines.Quantity

                               }).Take(10);

            //Method Chain Format

            var asMethodChain = DtContext.Orders.Join(DtContext.OrderLines, oOrders => oOrders.OrderID,

                    oOrderLines => oOrderLines.OrderID,

                    (oOrders, oOrderLines) => new { oOrders, oOrderLines })

                .OrderBy(o => o.oOrders.OrderID)

                .Select(s => new OrderAndOrderLines()

                {

                    OrderId = s.oOrders.OrderID,

                    Description = s.oOrderLines.Description,

                    Quantity = s.oOrderLines.Quantity

                }).Take(10);
            return PartialView(loadAllData);

        }

[/html]

Once you run the action you can see the result as follows.

LINQ Basic to Advanced Join With Where

Left JOIN Query

To write a Left join, the query would be as preceding.

[csharp]
///

/// Linq query with Left Join
///

///
public ActionResult LeftJoin()
{
var loadAllData = (from oOrder in DtContext.Orders
join oOrderLine in DtContext.OrderLines
on oOrder.OrderID equals oOrderLine.OrderID
into lftOrder
from afterJoined in lftOrder.DefaultIfEmpty()
orderby oOrder.OrderID descending
select new OrderAndOrderLines()
{
OrderId = oOrder.OrderID,
Description = afterJoined.Description
}).Take(10).ToList();
//Method Chain Format
var lftJoinMethodChain = (DtContext.Orders.GroupJoin(DtContext.OrderLines,
oOrder => oOrder.OrderID, oOrderLine => oOrderLine.OrderID,
(oOrder, lftJoin) => new { oOrder, lftJoin })
.SelectMany(@sm => @sm.lftJoin.DefaultIfEmpty(), (@sm, afterJoin) => new { @sm, afterJoin })
.OrderByDescending(@o => @o.sm.oOrder.OrderID)
.Select(@s => new OrderAndOrderLines()
{
OrderId = @s.sm.oOrder.OrderID,
Description = @s.afterJoin.Description
})).Take(10).ToList();

return PartialView(loadAllData);
}
[/csharp]

In the above query we are just joining the tables Order and OrderLines with OrderID and to select we are using an another custom model OrderAndOrderLines as our previous query. The differences you could find here are, using an ‘into’ and ‘DefaultIfEmpty’ statements. The DefaultIfEmpty is making sure that it returns empty if there is no appropriate rows found in the second table.

The view can be written as follows.

[html]
@model IEnumerable

@foreach (var @item in Model)
{

}

Order Details
Order ID	Description	Quantity
@item.OrderId	@item.Description	@item.Quantity



    public ActionResult LeftJoin()

        {

            var loadAllData = (from oOrder in DtContext.Orders

                               join oOrderLine in DtContext.OrderLines

                               on oOrder.OrderID equals oOrderLine.OrderID

                               into lftOrder

                               from afterJoined in lftOrder.DefaultIfEmpty()

                               orderby oOrder.OrderID descending

                               select new OrderAndOrderLines()

                               {

                                   OrderId = oOrder.OrderID,

                                   Description = afterJoined.Description

                               }).Take(10).ToList();

            //Method Chain Format

            var lftJoinMethodChain = (DtContext.Orders.GroupJoin(DtContext.OrderLines,

                    oOrder => oOrder.OrderID, oOrderLine => oOrderLine.OrderID,

                    (oOrder, lftJoin) => new { oOrder, lftJoin })

                .SelectMany(sm => sm.lftJoin.DefaultIfEmpty(), (sm, afterJoin) => new { sm, afterJoin })

                .OrderByDescending(o => o.sm.oOrder.OrderID)

                .Select(s => new OrderAndOrderLines()

                {

                    OrderId = s.sm.oOrder.OrderID,

                    Description = s.afterJoin.Description

                })).Take(10).ToList();
            return PartialView(loadAllData);

        }

[/html]

Once you run the action you can see the result as follows.

LINQ Basic to Advanced Left Join

As you can see in the image, the order id 200000 doesn’t has any appropriate rows in the second table, so it shows as empty.

Distinct Query

The below query shows how we can write simple distinct query.

[csharp]
///

/// Linq query Distinct sample
///

///
public ActionResult DistinctSample()
{
var distictSample = (from oOrder in DtContext.OrderLines
select oOrder.Description).Distinct().Take(10).ToList();

//Method Chain Format
var distictAsMethodChain = (DtContext.OrderLines.Select(oOrder => oOrder.Description)).Distinct().Take(10).ToList();

return PartialView(distictSample);
}
[/csharp]

In the above query we use Distinct to make sure that only distict items are selected from the result. The view can be written as follows.

[html]
@model List

Order Descriptions

@foreach (var orderLinesyObj in Model)
{

@orderLinesyObj

}



    public ActionResult DistinctSample()

        {

            var distictSample = (from oOrder in DtContext.OrderLines

                                 select oOrder.Description).Distinct().Take(10).ToList();
            //Method Chain Format

            var distictAsMethodChain = (DtContext.OrderLines.Select(oOrder => oOrder.Description)).Distinct().Take(10).ToList();
            return PartialView(distictSample);

        }

[/html]

Once you run the action you can see the result as follows.

LINQ Basic to Advanced Distinct Query

Equals and Not Equals Queries

We can write the equals and not equals query as preceding.

[csharp]
///

/// Linq query Equals sample
///

///
public ActionResult EqualsSamples()
{
var objEquals = (from objCity in DtContext.Cities
where objCity.CityName.Equals("Troy")
select objCity).Take(2);
//Method Chain Format
var objEquals1 = DtContext.Cities.Where(d => d.CityName.Equals("Troy")).Take(2);

return PartialView("OperatorSamples", objEquals);
}

///

/// Linq query Not Equals sample
///

///
public ActionResult NotEqualsSamples()
{
var objNotEquals = (from objCity in DtContext.Cities
where objCity.CityName != "Troy"
select objCity).Take(5);

var objNotEquals1 = (from objCity in DtContext.Cities
where !objCity.CityName.Equals("Troy")
select objCity).Take(5);

//Method Chain Format
var objNotEquals2 = DtContext.Cities.Where(d => d.CityName != "Troy").Take(2);

var objNotEquals3 = DtContext.Cities.Where(d => !d.CityName.Equals("Troy")).Take(2);

return PartialView("OperatorSamples", objNotEquals);
}
[/csharp]

The view can be written as follows.

[html]
@model IQueryable

@foreach (var @item in Model)
{

}

City Details
City ID	City Name	City Location
@item.CityID	@item.CityName	@item.Location

Equals Oerator



    public ActionResult EqualsSamples()

        {

            var objEquals = (from objCity in DtContext.Cities

                                       where objCity.CityName.Equals("Troy")

                                       select objCity).Take(2);

            //Method Chain Format

            var objEquals1 = DtContext.Cities.Where(d => d.CityName.Equals("Troy")).Take(2);
            return PartialView("OperatorSamples", objEquals);

        }
        public ActionResult NotEqualsSamples()

        {

            var objNotEquals = (from objCity in DtContext.Cities

                where objCity.CityName != "Troy"

                select objCity).Take(5);
            var objNotEquals1 = (from objCity in DtContext.Cities

                where !objCity.CityName.Equals("Troy")

                select objCity).Take(5);
            //Method Chain Format

            var objNotEquals2 = DtContext.Cities.Where(d => d.CityName != "Troy").Take(2);
            var objNotEquals3 = DtContext.Cities.Where(d => !d.CityName.Equals("Troy")).Take(2);
            return PartialView("OperatorSamples", objNotEquals);

        }
        public ActionResult PagingQueries()

        {

            var objNotEquals = (from objCity in DtContext.Cities

                where objCity.CityName != "Troy"

                orderby objCity.CityName ascending

                select objCity).Skip(5).Take(5);
            //Method Chain Format

            var objNotEquals2 = DtContext.Cities.Where(d => d.CityName != "Troy").Skip(5).Take(5);
            return PartialView("OperatorSamples", objNotEquals);

        }

[/html]

Once you run the action you can see the result as follows.

LINQ Basic to Advanced Equals and Not Equals

LINQ Paging Queries

Paging queries are always important as we work in some grid controls, with LINQ those are very easy. Let’s see one of that query.

[csharp]
///

/// Linq Paging Queries
///

///
public ActionResult PagingQueries()
{
var objNotEquals = (from objCity in DtContext.Cities
where objCity.CityName != "Troy"
orderby objCity.CityName ascending
select objCity).Skip(5).Take(5);

//Method Chain Format
var objNotEquals2 = DtContext.Cities.Where(d => d.CityName != "Troy").Skip(5).Take(5);

return PartialView("OperatorSamples", objNotEquals);
}
[/csharp]

Once you run the action you can see the result as follows.

LINQ Basic to Advanced Paging Queries

LINQ Math Queries

Here we are going to write the possible Math functions in our LINQ query.

[csharp]
///

/// Math Queries
///

///
public ActionResult MathQueries()
{
var objMath = (from objInv in DtContext.InvoiceLines
where objInv.ExtendedPrice > 10 && objInv.Quantity < 15
orderby objInv.InvoiceLineID descending
select new MathClass()
{
Actual = objInv.ExtendedPrice,
Round = Math.Round(objInv.ExtendedPrice),
Floor = Math.Floor(objInv.ExtendedPrice),
Ceiling = Math.Ceiling(objInv.ExtendedPrice),
Abs = Math.Abs(objInv.ExtendedPrice)
}).Take(10);

//Method Chain Format
var objMath2 = DtContext.InvoiceLines
.Where(objInv => objInv.ExtendedPrice > 10 && objInv.Quantity < 15)
.OrderByDescending(o => o.InvoiceLineID)
.Select(objInv => new MathClass()
{
Actual = objInv.ExtendedPrice,
Round = Math.Round(objInv.ExtendedPrice),
Floor = Math.Floor(objInv.ExtendedPrice),
Ceiling = Math.Ceiling(objInv.ExtendedPrice),
Abs = Math.Abs(objInv.ExtendedPrice)
}).Take(10);

return PartialView("MathQueries", objMath);
}
[/csharp]

As you can see we have written most of the possible Math functions in our query and selecting with a custome model MathClass.

[csharp]
namespace LINQ_B_to_A.Models
{
public partial class MathClass
{
public decimal Actual { get; set; }
public decimal Round { get; set; }
public decimal Floor { get; set; }
public decimal Ceiling { get; set; }
public decimal Abs { get; set; }
}
}
[/csharp]

Let’s see the view now.

[html]

@model IQueryable

@foreach (var @item in Model)
{

}

Math Operators
Actual: @item.Actual	Round: @item.Round	Floor: @item.Floor	Ceiling: @item.Ceiling	Abs: @item.Abs



    public ActionResult MathQueries()

        {

            var objMath = (from objInv in DtContext.InvoiceLines

                          where objInv.ExtendedPrice > 10 && objInv.Quantity < 15

                          orderby objInv.InvoiceLineID descending

                          select new MathClass()

                          {

                              Actual = objInv.ExtendedPrice,

                              Round = Math.Round(objInv.ExtendedPrice),

                              Floor = Math.Floor(objInv.ExtendedPrice),

                              Ceiling = Math.Ceiling(objInv.ExtendedPrice),

                              Abs = Math.Abs(objInv.ExtendedPrice)

                          }).Take(10);
            //Method Chain Format

            var objMath2 = DtContext.InvoiceLines

                .Where(objInv => objInv.ExtendedPrice > 10 && objInv.Quantity < 15)

                .OrderByDescending(o => o.InvoiceLineID)

                .Select(objInv => new MathClass()

                {

                    Actual = objInv.ExtendedPrice,

                    Round = Math.Round(objInv.ExtendedPrice),

                    Floor = Math.Floor(objInv.ExtendedPrice),

                    Ceiling = Math.Ceiling(objInv.ExtendedPrice),

                    Abs = Math.Abs(objInv.ExtendedPrice)

                }).Take(10);
            return PartialView("MathQueries", objMath);

        }

[/html]

See the result now.

LINQ Basic to Advanced Math Queries

LINQ String Queries

As we saw the Math queries, here we are going to write the possible String functions in our LINQ query.

[csharp]
///

/// String Queries
///

///
public ActionResult StringQueries()
{
var objString = (from objInv in DtContext.InvoiceLines
where objInv.ExtendedPrice > 10 && objInv.Quantity < 15
orderby objInv.InvoiceLineID descending
select new StringClass()
{
Actual = objInv.Description,
Insert = objInv.Description.Insert(2, "sibeeshpassion"),
Remove = objInv.Description.Remove(1, 1),
Substring = objInv.Description.Substring(2, 3),
ToLower = objInv.Description.ToLower(),
ToUpper = objInv.Description.ToUpper(),
TrimEnd = objInv.Description.TrimEnd(),
TrimStart = objInv.Description.TrimStart()
}).Take(2);

//Method Chain Format
var objString2 = DtContext.InvoiceLines
.Where(objInv => objInv.ExtendedPrice > 10 && objInv.Quantity < 15)
.OrderByDescending(o => o.InvoiceLineID)
.Select(objInv => new StringClass()
{
Actual = objInv.Description,
Insert = objInv.Description.Insert(2, "sibeeshpassion"),
Remove = objInv.Description.Remove(1, 1),
Substring = objInv.Description.Substring(2, 3),
ToLower = objInv.Description.ToLower(),
ToUpper = objInv.Description.ToUpper(),
TrimEnd = objInv.Description.TrimEnd(),
TrimStart = objInv.Description.TrimStart()
}).Take(2);

return PartialView("StringQueries", objString);
}
[/csharp]

As you can see, here we are using a custom model StringClass.

[csharp]
namespace LINQ_B_to_A.Models
{
public partial class StringClass
{
public string Actual { get; set; }
public string Insert { get; set; }
public string Remove { get; set; }
public string Substring { get; set; }
public string ToUpper { get; set; }
public string ToLower { get; set; }
public string TrimStart { get; set; }
public string TrimEnd { get; set; }
}
}
[/csharp]

Let’s see the view now.

[html]

@model IQueryable

@foreach (var @item in Model)
{

}

String Operators
Actual: @item.Actual	Insert: @item.Insert	Remove: @item.Remove	Substring: @item.Substring	ToLower: @item.ToLower	ToUpper: @item.ToUpper	TrimEnd: @item.TrimEnd	TrimStart: @item.TrimStart



        public ActionResult StringQueries()

        {

            var objString = (from objInv in DtContext.InvoiceLines

                where objInv.ExtendedPrice > 10 && objInv.Quantity < 15

                orderby objInv.InvoiceLineID descending

                select new StringClass()

                {
                    Actual = objInv.Description,

                    Insert = objInv.Description.Insert(2,"sibeeshpassion"),

                    Remove = objInv.Description.Remove(1,1),

                    Substring = objInv.Description.Substring(2,3),

                    ToLower = objInv.Description.ToLower(),

                    ToUpper = objInv.Description.ToUpper(),

                    TrimEnd = objInv.Description.TrimEnd(),

                    TrimStart = objInv.Description.TrimStart()

                }).Take(2);
            //Method Chain Format

            var objString2 = DtContext.InvoiceLines

                .Where(objInv => objInv.ExtendedPrice > 10 && objInv.Quantity < 15)

                .OrderByDescending(o => o.InvoiceLineID)

                .Select(objInv => new StringClass()

                {

                    Actual = objInv.Description,

                    Insert = objInv.Description.Insert(2, "sibeeshpassion"),

                    Remove = objInv.Description.Remove(1, 1),

                    Substring = objInv.Description.Substring(2, 3),

                    ToLower = objInv.Description.ToLower(),

                    ToUpper = objInv.Description.ToUpper(),

                    TrimEnd = objInv.Description.TrimEnd(),

                    TrimStart = objInv.Description.TrimStart()

                }).Take(2);
            return PartialView("StringQueries", objString);

        }

[/html]

Now see the result.

LINQ Basic to Advanced String Queries

SelectMany Query

A SelectMany query flattern the result to a single dimentional collection, so to loop through the result we just need only one loop.

LINQ Basic to Advanced SelectMany Tooltip

If you use the normal Select, you will be getting a list of lists, thus you will have to use two loops to get the datas.

LINQ Basic to Advanced Select Tooltip

[csharp]
///

/// Linq query with SelectMany
///

///
public ActionResult SelectMany()
{
var selectMany = DtContext.Orders.SelectMany(order => order.Invoices).Take(10);
var select = DtContext.Orders.Select(order => order.Invoices).Take(10);
return PartialView("SelectMany", selectMany);
}
[/csharp]

Let’s see the view now.

[html]
@model IQueryable

@foreach (var @item in Model)
{

}

Invoice Details
Order ID	Invoice ID	Invoice Date
@item.OrderID	@item.InvoiceID	@item.InvoiceDate

Select Many



     /// 

        /// Linq query with SelectMany

        /// 


        /// 

        public ActionResult SelectMany()

        {

            var selectMany = DtContext.Orders.SelectMany(order => order.Invoices).Take(10);

            var select = DtContext.Orders.Select(order => order.Invoices).Take(10);

            return PartialView("SelectMany", selectMany);

        }

[/html]

Now see the result.

That’s all for today, I will come with another set of LINQ queries in the next part. Till then, bye.

LINQ Basic to Advanced SelectMany

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

MVC CRUD Actions Using Knockout JS

SibeeshVenu — Sun, 11 Dec 2016 16:13:27 +0000

In this post we are going to create a MVC CRUD application with the help of Knockout JS. We will be using SQL database and Visual Studio for our development. If you are new to MVC, I strongly recommend you to read my previous post about MVC here. Now let’s begin.

Download source code

MVC CRUD Actions Using Knockout JS

Introduction about Knockout JS

According to Knockout JS documentation Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainable.

It has benefits as,

Pure JavaScript library – works with any server or client-side technology
Can be added on top of your existing web application without requiring major architectural changes
Compact – around 13kb after gzipping
Works on any mainstream browser (IE 6+, Firefox 2+, Chrome, Safari, Edge, others)
Comprehensive suite of specifications (developed BDD-style) means its correct functioning can easily be verified on new browsers and platforms.

Background

As I am working on a project which uses Knockout for binding the server data, a friend of mine requested me to create a CRUD application with Knockout, so that he can easily learn it. I just accepted his request and here we are going to create a MVC CRUD application with the help of Knockout JS. I hope you will like this.

Create an Empty MVC application

To get started we will create an empty MVC application as follows.

add_new_empty_mvc_project

Creating database and Entity Data Model

Here I am creating a database with name “TrialDB”, you can always create a DB by running the query given below.

[sql]
USE [master]
GO

/****** Object: Database [TrialDB] Script Date: 20-11-2016 03:54:53 PM ******/
CREATE DATABASE [TrialDB]
CONTAINMENT = NONE
ON PRIMARY
( NAME = N’TrialDB’, FILENAME = N’C:\Program Files\Microsoft SQL Server\MSSQL13.SQLEXPRESS\MSSQL\DATA\TrialDB.mdf’ , SIZE = 8192KB , MAXSIZE = UNLIMITED, FILEGROWTH = 65536KB )
LOG ON
( NAME = N’TrialDB_log’, FILENAME = N’C:\Program Files\Microsoft SQL Server\MSSQL13.SQLEXPRESS\MSSQL\DATA\TrialDB_log.ldf’ , SIZE = 8192KB , MAXSIZE = 2048GB , FILEGROWTH = 65536KB )
GO

ALTER DATABASE [TrialDB] SET COMPATIBILITY_LEVEL = 130
GO

IF (1 = FULLTEXTSERVICEPROPERTY(‘IsFullTextInstalled’))
begin
EXEC [TrialDB].[dbo].[sp_fulltext_database] @action = ‘enable’
end
GO

ALTER DATABASE [TrialDB] SET ANSI_NULL_DEFAULT OFF
GO

ALTER DATABASE [TrialDB] SET ANSI_NULLS OFF
GO

ALTER DATABASE [TrialDB] SET ANSI_PADDING OFF
GO

ALTER DATABASE [TrialDB] SET ANSI_WARNINGS OFF
GO

ALTER DATABASE [TrialDB] SET ARITHABORT OFF
GO

ALTER DATABASE [TrialDB] SET AUTO_CLOSE OFF
GO

ALTER DATABASE [TrialDB] SET AUTO_SHRINK OFF
GO

ALTER DATABASE [TrialDB] SET AUTO_UPDATE_STATISTICS ON
GO

ALTER DATABASE [TrialDB] SET CURSOR_CLOSE_ON_COMMIT OFF
GO

ALTER DATABASE [TrialDB] SET CURSOR_DEFAULT GLOBAL
GO

ALTER DATABASE [TrialDB] SET CONCAT_NULL_YIELDS_NULL OFF
GO

ALTER DATABASE [TrialDB] SET NUMERIC_ROUNDABORT OFF
GO

ALTER DATABASE [TrialDB] SET QUOTED_IDENTIFIER OFF
GO

ALTER DATABASE [TrialDB] SET RECURSIVE_TRIGGERS OFF
GO

ALTER DATABASE [TrialDB] SET DISABLE_BROKER
GO

ALTER DATABASE [TrialDB] SET AUTO_UPDATE_STATISTICS_ASYNC OFF
GO

ALTER DATABASE [TrialDB] SET DATE_CORRELATION_OPTIMIZATION OFF
GO

ALTER DATABASE [TrialDB] SET TRUSTWORTHY OFF
GO

ALTER DATABASE [TrialDB] SET ALLOW_SNAPSHOT_ISOLATION OFF
GO

ALTER DATABASE [TrialDB] SET PARAMETERIZATION SIMPLE
GO

ALTER DATABASE [TrialDB] SET READ_COMMITTED_SNAPSHOT OFF
GO

ALTER DATABASE [TrialDB] SET HONOR_BROKER_PRIORITY OFF
GO

ALTER DATABASE [TrialDB] SET RECOVERY SIMPLE
GO

ALTER DATABASE [TrialDB] SET MULTI_USER
GO

ALTER DATABASE [TrialDB] SET PAGE_VERIFY CHECKSUM
GO

ALTER DATABASE [TrialDB] SET DB_CHAINING OFF
GO

ALTER DATABASE [TrialDB] SET FILESTREAM( NON_TRANSACTED_ACCESS = OFF )
GO

ALTER DATABASE [TrialDB] SET TARGET_RECOVERY_TIME = 60 SECONDS
GO

ALTER DATABASE [TrialDB] SET DELAYED_DURABILITY = DISABLED
GO

ALTER DATABASE [TrialDB] SET QUERY_STORE = OFF
GO

USE [TrialDB]
GO

ALTER DATABASE SCOPED CONFIGURATION SET MAXDOP = 0;
GO

ALTER DATABASE SCOPED CONFIGURATION FOR SECONDARY SET MAXDOP = PRIMARY;
GO

ALTER DATABASE SCOPED CONFIGURATION SET LEGACY_CARDINALITY_ESTIMATION = OFF;
GO

ALTER DATABASE SCOPED CONFIGURATION FOR SECONDARY SET LEGACY_CARDINALITY_ESTIMATION = PRIMARY;
GO

ALTER DATABASE SCOPED CONFIGURATION SET PARAMETER_SNIFFING = ON;
GO

ALTER DATABASE SCOPED CONFIGURATION FOR SECONDARY SET PARAMETER_SNIFFING = PRIMARY;
GO

ALTER DATABASE SCOPED CONFIGURATION SET QUERY_OPTIMIZER_HOTFIXES = OFF;
GO

ALTER DATABASE SCOPED CONFIGURATION FOR SECONDARY SET QUERY_OPTIMIZER_HOTFIXES = PRIMARY;
GO

ALTER DATABASE [TrialDB] SET READ_WRITE
GO
[/sql]

Create a table

To create a table, you can run the query below.

[sql]
USE [TrialDB]
GO

/****** Object: Table [dbo].[Course] Script Date: 20-11-2016 03:57:30 PM ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[Course](
[CourseID] [int] NOT NULL,
[CourseName] [nvarchar](50) NOT NULL,
[CourseDescription] [nvarchar](100) NULL,
CONSTRAINT [PK_Course] PRIMARY KEY CLUSTERED
(
[CourseID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO
[/sql]

So our database is ready. Now we will create an Entity Data Model with the database we created.

create_entity_data_model

Install Knockout JS

To install Knockout JS in your project, please right click on your project ad click on Manage Nuget Package and search for ‘Knockout’.

install_knockout

Now let us start our coding as everything is set.

C – Create Operation

So we are going to see the create operation, as it comes first in CRUD. Let us set up our controller first. You can see the controller code for create operation here.

[csharp]
// GET: Home/Create
public ActionResult Create()
{
return View();
}

// POST: Home/Create
[HttpPost]
public string Create(Course course)
{
if (!ModelState.IsValid) return "Model is invalid";
_db.Courses.Add(course);
_db.SaveChanges();
return "Cource is created";
}
[/csharp]

Here the first action calls the view for the create operation and the second operation insert the data to database. And _db is our entity.

[csharp]
private readonly TrialDBEntities _db = new TrialDBEntities();
[/csharp]

Now let’s go ahead and create view for Create operation.

[html]
@model MVCCRUDKnockout.Models.Course

@{
ViewBag.Title = "Create";
}

Course

CourseName

CourseDescription

@Html.ActionLink("Back to List", "Read")

[/html]

Did you notice that we are binding data to our input controls as data-bind=”value: CourseName”? This value is related to the view model we are going to set, the interesting this is, the values in the model will get changed as you change the values in the input. You don’t need to add any kind of codes for that operations.

At last we are binding a click event as follows right?

[html]

[/html]

This will call the function createCourse which we are going to specify in our view model. Now you may be thinking what is this view model? This knockout uses MVVM pattern and now let us read some basic information provided in Knockout JS documentation.

MVVM and View Models

Model-View-View Model (MVVM) is a design pattern for building user interfaces. It describes how you can keep a potentially sophisticated UI simple by splitting it into three parts:

A model: your application’s stored data. This data represents objects and operations in your business domain (e.g., bank accounts that can perform money transfers) and is independent of any UI. When using KO, you will usually make Ajax calls to some server-side code to read and write this stored model data.

A view model: a pure-code representation of the data and operations on a UI. For example, if you’re implementing a list editor, your view model would be an object holding a list of items, and exposing methods to add and remove items.

Note that this is not the UI itself: it doesn’t have any concept of buttons or display styles. It’s not the persisted data model either – it holds the unsaved data the user is working with. When using KO, your view models are pure JavaScript objects that hold no knowledge of HTML. Keeping the view model abstract in this way lets it stay simple, so you can manage more sophisticated behaviors without getting lost.

A view: a visible, interactive UI representing the state of the view model. It displays information from the view model, sends commands to the view model (e.g., when the user clicks buttons), and updates whenever the state of the view model changes.

When using KO, your view is simply your HTML document with declarative bindings to link it to the view model. Alternatively, you can use templates that generate HTML using data from your view model.

Now back to our Create operation, KOCreate.js is the file we are going to write our operation. Now please open that file and bind view model as follows.

[js]
$(function () {
ko.applyBindings(modelCreate);
});
[/js]

knockout_apply_bindings

Now preceding is our view model and associated functions.

[js]
var modelCreate = {
CourseName: ko.observable(),
CourseDescription: ko.observable(),
createCourse: function () {
try {
$.ajax({
url: ‘/Home/Create’,
type: ‘post’,
dataType: ‘json’,
data: ko.toJSON(this), //Here the data wil be converted to JSON
contentType: ‘application/json’,
success: successCallback,
error: errorCallback
});
} catch (e) {
window.location.href = ‘/Home/Read/’;
}
}
};

function successCallback(data) {
window.location.href = ‘/Home/Read/’;
}
function errorCallback(err) {
window.location.href = ‘/Home/Read/’;
}
[/js]

Here ko.observable() are special objects which can notify the changes and update the model accordingly. So if you need to update your UI automatically when the view model changes, you can use observable().Now please run your view and check whether it is working fine.

create_page

R – Read operation

As we have completed our Create operation, now it is time for Read. Please open your controller and write the actions as follows.

[csharp]
// GET: Home
public ActionResult Read()
{
return View();
}

//GET All Courses
public JsonResult ListCourses()
{
return Json(_db.Courses.ToList(), JsonRequestBehavior.AllowGet);
}
[/csharp]

You can create your Read view as preceding.

[html]
@{
ViewBag.Title = "Read";
}

Index

@Html.ActionLink("Create New", "Create")

Course Name	Course Description
		Edit Delete

[/html]

Here we are using data-bind=”foreach: Courses” for looping through our model we are going to create now. So shall we do that? Please create a JS file with name KORead.js and add the following code.

[js]
$(function () {
ko.applyBindings(modelView);
modelView.viewCourses();
});

Here goes the output.

read_page

Now it is time for Update operation. Are you ready?

U – Update operation

As we did for the above two operation, let us create some actions in our controller first.

[csharp]
// GET: Home/Edit/5
public ActionResult Edit(int? id)
{
if (id == null)
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
var course = _db.Courses.Find(id);
if (course == null)
return HttpNotFound();
var serializer = new JavaScriptSerializer();
ViewBag.SelectedCourse = serializer.Serialize(course);
return View();
}

// POST: Home/Update/5
[HttpPost]
public string Update(Course course)
{
if (!ModelState.IsValid) return "Invalid model";
_db.Entry(course).State = EntityState.Modified;
_db.SaveChanges();
return "Updated successfully";
}
[/csharp]

Here the first action with parameter ID is called whenever a user click on Edit link from the table we created. And we are setting the queried data to ViewBag so that we can use it for our related operation. For now, we can create a view as follows.

[html]
@{
ViewBag.Title = "Edit";
}

Edit

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

Course

CourseName

CourseDescription

}

@Html.ActionLink("Back to List", "Read")

[/html]

And create a JS with name KOUpdate.js and add the following code.

[js]
var parsedSelectedCourse = $.parseJSON(selectedCourse);
$(function () {
ko.applyBindings(modelUpdate);
});

function successCallback(data) {
window.location.href = ‘/Home/Read/’;
}
function errorCallback(err) {
window.location.href = ‘/Home/Read/’;
}
[/js]

Now, run your application and see the Edit/Update operation.

edit_page

D – Delete operation

So our last operation, Delete. Let’s edit our controller as follows.

[csharp]
// GET: Home/Delete/5
public ActionResult Delete(int? id)
{
if (id == null)
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
var course = _db.Courses.Find(id);
if (course == null)
return HttpNotFound();
var serializer = new JavaScriptSerializer();
ViewBag.SelectedCourse = serializer.Serialize(course);
return View();
}

// POST: Home/Delete/5
[HttpPost, ActionName("Delete")]
public string Delete(Course course)
{
if (course == null) return "Invalid data";
var getCourse = _db.Courses.Find(course.CourseID);
_db.Courses.Remove(getCourse);
_db.SaveChanges();
return "Deleted successfully";
}
[/csharp]

The code looks exactly same as our update operation, so no explanation. Still if you get any issues, please ask. Now let us create our view.

[html]
@model MVCCRUDKnockout.Models.Course

@{
ViewBag.Title = "Delete";
}

Delete

Are you sure you want to delete this?

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

Course

CourseName

CourseDescription

}

@Html.ActionLink("Back to List", "Read")

[/html]

And you can always create our knockout codes as preceding.

[js]
var parsedSelectedCourse = $.parseJSON(selectedCourse);
$(function () {
ko.applyBindings(modelDelete);
});

function successCallback(data) {
window.location.href = ‘/Home/Read/’;
}
function errorCallback(err) {
window.location.href = ‘/Home/Read/’;
}
[/js]

If everything goes fine, you will get a page as follows.

delete_page

That’s all for today. You can always download the source code attached to see the complete code and application. Happy coding!.

References

Knockout JS

Knockout JS Observables

See also

External links and tutorials

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Caching In MVC

SibeeshVenu — Sat, 31 Oct 2015 18:25:25 +0000

In this post we will discuss about how we can improve the performance of out MVC application by using the technology Caching . Here I am using Visual Studio 2012. As you all know in MVC it is all about actions, so each and every time we are calling some actions according to the users request. For example when ever a use request a view we will call the controller and get the result and bind the data to the view. Isn’t it? So what if a user is requesting the same view 50 time in 2 minutes? In normal cases, this won’t happen, but there are few situations which may be somewhat equal to what I said. In that case it is always recommend to use the most useful thing ‘Caching’. This will make sure that there is no actions which are not required will be happening within a time period. So if a user already visited the same view within the time periods, the controller action won’t fire again if user calls the view again. It will return the same view which has been already rendered. Sounds cool? Yes, we will see how we can achieve this!. I hope you will like this.

Background

I am working in a MVC project. As you all know when it comes to performance, our clients will never be satisfied. So we used to everything we have got to improve the performance. One thing we used was Caching. So I thought of writing an article related to that and share wit you all.

What is Caching?

As I said above, it is performance improvement technique where you can get most of. It helps to avoid the unwanted or frequent actions which is already happened just by using Output Caching(In ASP.NET 5 it is ResponseCache). The view which is rendered recently wont fire the controller again if it is in the time limit period, it will just re show the one which is already rendered. It will cache the contents which is returned by the controller action.

Imagine that you have a controller which will return your debit/credit transaction from the database. What if the database is normally updating once in a week? Usually when ever a user hits the controller it will hit the DB and fetch the data right? But in this scenario it is not needed to hit the DB again since the data will be same for a week. So we can set the Output Caching so that withing the time interval the controller contents will be in cache so that the view can render the cached data.

How to enable Output Caching?

We will create a simple application in Visual Studio first.

Caching In MVC

Now we will create a control in our MVC application.

Caching In MVC

So our controller is ready, now we need to create simple view and after that we will change our Index action in the controller as below.

[csharp]
public ActionResult Index()
{
return Content(DateTime.Now.ToString("T"));
}
[/csharp]

So we are returning the current time from the controller. Isn’t it? Now refresh your view frequently, let us say 2 times in 5 minute, what is the output you are getting?

Caching In MVC

So have you noticed it within five minutes we have hit the controller twice? Now here is the magic of output cache. Please change your controller code as follows.

[csharp]
[OutputCache(Duration = 300, VaryByParam = "none")]
public ActionResult Index()
{
return Content(DateTime.Now.ToString("T"));
}
[/csharp]

Here we are setting the cache duration as 5 minutes (5*60 seconds)

Now if you run and do the same exercise you can notice that the controller will be hit only once in 5 minutes duration. That’s cool right?

Even though it is so cook, there is some limitations too. As the memory becomes low, the cache data will be released. So that there won’t be cached data.

Here in our case, we just used a simple view which returns time from the controller. What if the controller has some database operations, for every user’s hit we need to go to the database right? So in simple words we can say that the caching is helping to reduce the amount of work done must be performed by our web server and database.

So contents are chached. Where?

Now we will see which are all the locations we can save the cache data. Usually the contents are cached in three locations.

Web server

Proxy server

Web browser

You can always set where you want to save the cached data, whether it is in server, client or both server and client by using location property. By default the location will be ‘any’.

Caching In MVC

There are few situations that we should not cache in server. Let me explain, suppose we have a controller which will return the country name of the user logged in to our application. Now I am from ‘India’ , so when I logged in to the application it will show the country name as India. That’s correct. Now have cached these data in the server. So what will happen if a user form Ireland logged in to the application? Will it be good if we show India as his/her country? It doesn’t make any sense right?

[csharp]
[OutputCache(Duration = 10, VaryByParam = "none")]
public ActionResult Index()
{
User u = new User();
return Content(u.getUserCountry());
}
[/csharp]

So in short we can say that we should not cache any personalized data in the server.

So what is the fix for this? Simple, cache the data in client. To do that we can change our controller as follows.

[csharp]
[OutputCache(Duration = 10, VaryByParam = "none", Location=OutputCacheLocation.Client, NoStore=true)]
public ActionResult Index()
{
User u = new User();
return Content(u.getUserCountry());
}
[/csharp]

To use OutputCacheLocation, you must include the namespace using System.Web.UI;

Have you noticed that we have set NoStore=true? This is to intimate the proxy server that should not save any copy of these data in server.

Use of VaryByParam property

Now we are going to discuss an another scenario which explain the use of VaryByParam property. Let us say an action called ‘GetEmployee’ which will return all the Employees in our company. Now if we click on any employee links, an another view (GetEmployeeDetails) will show with all the details about that employee( Like account details, leave details, personal informations). So if we save the cached view of GetEmployeeDetails, what will happen? For all the employees, it will show the same GetEmployeeDetails view right?

So we will change the controller actions as follows.

[csharp]
[OutputCache(Duration = 10, VaryByParam = "none")]
public ActionResult GetEmployee()
{
Employee e = new Employee();
return Content(e.getEmployees());
}
[/csharp]

[csharp]
[OutputCache(Duration = 10, VaryByParam = "empID")]
public ActionResult GetEmployeeDetail(int empID)
{
Employee e = new Employee();
return Content(e.getEmployeeDetails(empID));
}
[/csharp]

The above mentioned implementation will make sure the different Employee Details view are being generated for different users. Sound cool?

Cache Profiles

There is an another way of achieving the caching, that is cache profiles, which is nothing but creating a tag in web.config file and apply that for different controllers. In this way you can have the same cache profile for different controls. And also it is easy to make any changes in the cache profile since it is just a tag in the web.config file. Any changes in cache profile will get applied easily. I found this is the most effective way of caching. We can do the cache profile as follows.

[html]

[/html]

The above cache profile can be used for any admin control action which will be cached for one day (60*60*24). You can simply use this profile as follows.

[csharp]
[OutputCache(CacheProfile="Admin")]
[/csharp]

That is all about the Caching. I will come with an another post which explains caching in ASP.NET 5, MVC 6 soon. Thanks for reading. Have a happy coding.

Conclusion

Did I miss anything that you may think which is needed? Did you try caching yet? Have you ever wanted to do this requirement? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Load Data From Database Using Web API

SibeeshVenu — Sat, 31 Oct 2015 11:08:57 +0000

In this article we will learn about Loading Data From Database in MVC using Web API. We will use Visual Studio 2015 to create a Web API and performs the operations. In this project we are going to create a database and a table called tbl_Subcribers which actually contains a list of data. We will use our normal jQuery ajax to call the Web API, once the data is ready we will format the same in an html table. I hope you will like this.

Download the source code

Load Data From Database Using Web API

Background

What is a Web API?

A Web API is a kind of a framework which makes building HTTP services easier than ever. It can be used almost everywhere including wide range of clients, mobile devices, browsers etc. It contains normal MVC features like Model, Controller, Actions, Routing etc. Support all HTTP verbs like POST, GET, DELETE, PUT.

Why Web API

Image Courtesy : blogs.msdn.com

Why Web API

Image Courtesy : forums.asp.net

Using the code

We will create our project in Visual Studio 2015. To create a project click File-> New-> Project.

CRUD_in_MVC_Using_Web_API

Create a control

Now we will create a control in our project.

CRUD_in_MVC_Using_Web_API_Adding_Control

Select Empty API Controller as template.

CRUD_in_MVC_Using_Web_API_Select_APIControl

As you can notice that we have selected Empty API Controller instead of selecting a normal controller. There are few difference between our normal controller and Empty API Controller.

Controller VS Empty API Controller

A controller normally render your views. But an API controller returns the data which is already serialized. A controller action returns JSON() by converting the data. You can get rid of this by using API controller.

Find out more: Controller VS API Controller

Create a model

As you all know, we write logic in a class called model in MVC. So next step what we need to do is creating a model.

Right click on Model and click Add new Items and then class. Name it as Subscribers. We are going to handle the subscriber list who all are subscribed to your website.

Now we will create a Database to our application.

Create Database

CRUD_in_MVC_Using_Web_API_Create_Database

Once you created the database, you can see your database in App_Data folder.

CRUD_in_MVC_Using_Web_API_Created_DB

Now will add a new table to our database.

CRUD_in_MVC_Using_Web_API_Adding_Table

You can see the query to create a table below.

[sql]
CREATE TABLE [dbo].[Table]
(
[SubscriberID] INT NOT NULL PRIMARY KEY,
[MailID] NVARCHAR(50) NOT NULL,
[SubscribedDate] DATETIME2 NOT NULL
)
[/sql]

It seems our database is ready now.

Load Data From Database Using Web API

The next thing we need to do is to create a ADO.NET Entity Data Model. SO shall we do that? Right click on your model and click on add new item, in the upcoming dialogue, select ADO.NET Entity Data Model.Name that file, Here I have given the name as SP. And in the next steps select the tables, stored procedures, and views you want.

Load Data From Database Using Web API

So a new file will be created in your model folder.

Now we will create an ajax call so that you can call the web API. We will use normal Ajax with type GET since we need to just retrieve the data.

A web API control does not return any action result or any json result, so we need to manually do this. We will use the index.cshtml file as our view

We are going to call our web API as follows from the view Index.cshtml.

[js]
@section scripts
{

}
[/js]

Once we get the data in the success part of the ajax call we are formulating the data in an HTML table and bind the formatted html to the element myGrid.

[html]

[/html]

Please be noted that url you give must be correct, or else you will end up with some errors. Your actions won’t work

So we are calling our web api as http://localhost:3064/api/Subscribers. Do you remember we have already created a controller? Now we are going back to that. So we need to create an action which returns the total subscribed list from the database, so for that we will write few lines of codes as follows.

[csharp]
public List getSubscribers()
{
try
{
using (var db = new sibeeshpassionEntities())
{
Subscriber sb = new Subscriber();
return (sb.getSubcribers(db).ToList());
}

}
catch (Exception)
{

throw;
}
}
[/csharp]

Here Subscriber is our model class, to get the reference of your model class in controller, you need to include the model namespace. We are getting a list of data in tbl_Subcribers type. Now we will concentrate on model class.

You can see the model action codes here.

[csharp]
public List getSubcribers(sibeeshpassionEntities sb)
{
try
{
if (sb != null)
{
return sb.tbl_Subscribers.ToList();
}
return null;
}
catch (Exception)
{
throw;
}
}
[/csharp]

This will return the data which is available in the table tbl_Subcribers in sibeeshpassion DB. It seems everything is set. Now what else we need to do? Yes we need to create some entries in the table. Please see the insertion query here.

[sql]
INSERT INTO [dbo].[tbl_Subscribers] ([SubscriberID], [MailID], [SubscribedDate]) VALUES (1, N’sibikv4u@gmail.com’, N’2015-10-30 00:00:00′)
INSERT INTO [dbo].[tbl_Subscribers] ([SubscriberID], [MailID], [SubscribedDate]) VALUES (2, N’sibeesh.venu@gmail.com’, N’2015-10-29 00:00:00′)
INSERT INTO [dbo].[tbl_Subscribers] ([SubscriberID], [MailID], [SubscribedDate]) VALUES (3, N’ajaybhasy@gmail.com’, N’2015-10-28 00:00:00′)
[/sql]

So the data is inserted. Isn’t it?

Load Data From Database Using Web API

Do you know?
Like we have RouteConfig.cs in MVC, we have another class file called WebApiConfig.cs in Web API which actually sets the routes.

[csharp]
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
[/csharp]

So shall we run our project and see the output? Before going to run, I suggest you to style the HTML table by applying some CSSs as follows.

[css]

[/css]

If everything goes fine, you will get the output as follows.

Load Data From Database Using Web API

That is all. We did it. Have a happy coding.

Conclusion

Did I miss anything that you may think which is needed? Did you try Web API yet? Have you ever wanted to do this requirement? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Create And Consume A User Control In MVC

SibeeshVenu — Tue, 14 Jul 2015 14:13:32 +0000

Introduction

In this article we will learn how we can create and consume a user control in MVC. I hope you will like it.

Background

Today I got a requirement of working with CellSetGrid. Since it is supported with our normal Asp.Net web pages alone, I was in a need to convert the same to a user view control and consume it in MVC because my application is in MVC4. I have done the same. So I thought of sharing you that with you all.

Using the code

To do so, You need to follow the following steps.

Add reference to your control DLL

Add new Web User Control

Register your DLL reference

[html]
<%@ Register assembly="CellSetGrid2" namespace="OLAPControls" tagprefix="cc1" %>
[/html]

Place your control

[html]

cube="Your Cube Name" height="800px" width="1500px" />

[/html]

Change default namespace

Go to ADODMGrid.ascx.cs from the solution explorer.

Change Namespace System.Web.UI.UserControl to System.Web.Mvc.ViewUserControl

Create Controller

Create a View

Please make sure that you have selected a partial view

Add the User Control to your View

[html]
@Html.Partial("ADODMGrid")
@* Here ADODMGrid is our user control name. No need to give its extension (ascx)*@
[/html]

So here we are add our new web user control to our view.

Add tagPrefix to your Web.Config

Last but the least, you need to add tagPrefix to your web.config file as follows.

[html]

[/html]

You need to add teh above code under system.web –> Pages

Now if your your view, you can see your control there 🙂

Conclusion

That is all. I hope you liked this article. Please share me your feedback.

Kindest Regards
Sibeesh Venu

Uploading and Downloading in MVC Step-by-Step

SibeeshVenu — Sun, 14 Jun 2015 01:00:52 +0000

Introduction

I hope you all are fine. Today we will learn how to perform upload and download operations in MVC. Please refer to the step-by-step approach in learning Model View Controller if you are new to MVC. Our MVC Master, Shivprasad koirala has explained the concepts in a perfect way.

Download the source code

Uploading and Downloading in MVC Step-by-Step

Background

Some days earlier, I got a requirement to develop a upload and download mechanism in my MVC application. After completing it perfectly, I decided to share it with you all.

Using the code

Before moving further into the details, let us first list the key points we will explain in this article:

Create a MVC application.

Create a controller.

Create View depending on the controller.

Change the RouteConfig as needed.

Create ActionResult for the actions.

Create a folder where we need to save the downloaded files.

Let us start with creating a controller called “myAction”.
[csharp]
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace UploadDownloadInMVC.Controllers
{
public class myActionController : Controller
{
//
// GET: /myAction/
}
}
[/csharp]

As you can see that the controller is empty; we will be writing the action results next.
[csharp]
public ActionResult Index()
{
foreach (string upload in Request.Files)
{
if (Request.Files[upload].FileName != “”)
{
string path = AppDomain.CurrentDomain.BaseDirectory + “/App_Data/uploads/”;
string filename = Path.GetFileName(Request.Files[upload].FileName);
Request.Files[upload].SaveAs(Path.Combine(path, filename));
}
}
return View(“Upload”);
}
[/csharp]

The action result shown above is for index. So, whenever the application loads, the action result will be fired. For that, the following changes should be done for RouteCofig.
[csharp]
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 = “myAction”, action = “Index”, id = UrlParameter.Optional }
);
}
}
[/csharp]

As you can see in the Index Action, we are checking whether the request parameter contains the files. If it exists, we will save the selected file to the directory

/App_Data/uploads/ (that we need to manually create in our application). After returning to the view Upload, we need to set the Upload view.

Upload View

The following is the code for the Upload view.
[html]
@{
ViewBag.Title = “Upload”;
}

Upload

@Html.ActionLink(“Documents”, “Downloads”)
[/html]

In the upload view, we have the following:

File uploader

Upload button

Ajax call to the controller ( myAction/Index)

Here, we are adding the uploaded image content to the form data collection.
[csharp]
var data = new FormData();
var files = $(“#fileUpload”).get(0).files;
// Add the uploaded image content to the form data collection
if (files.length > 0) {
data.append(“UploadedImage”, files[0]);
}
[/csharp]

Once the data is added to the form data collection, we will pass the data to the controller via ajax call. Sounds cool, right? If the procedure goes well, we will see the output as follows.

When you choose the file and click upload, your selected file will be uploaded to the folder “uploads” as we have set it in the controller.

We have finished the process of uploading files. We will now move to the downloading section. This is the right time to add the remaining actions to our controller. The following is the code.
[csharp]
public ActionResult Downloads()
{
var dir = new System.IO.DirectoryInfo(Server.MapPath(“~/App_Data/uploads/”));
System.IO.FileInfo[] fileNames = dir.GetFiles(“*.*”); List items = new List();
foreach (var file in fileNames)
{
items.Add(file.Name);
}
return View(items);
}
public FileResult Download(string ImageName)
{
var FileVirtualPath = “~/App_Data/uploads/” + ImageName;
return File(FileVirtualPath, “application/force-download”, Path.GetFileName(FileVirtualPath));
}
[/csharp]

Do you remember that we have set an action link in the “Upload” View?
[html]
@Html.ActionLink(“Documents”, “Downloads”)
[/html]

Next, if we click on the “Documents” link, our Action Result Downloads will be fired, right? Now, the following code will explain what is happening here.
[csharp]
var dir = new System.IO.DirectoryInfo(Server.MapPath(“~/App_Data/uploads/”));
System.IO.FileInfo[] fileNames = dir.GetFiles(“*.*”); List items = new List();
foreach (var file in fileNames)
{
items.Add(file.Name);
}
return View(items);
[/csharp]

We are considering all the attached files, adding the file information to a list and returning this list to the view “Download”. Next, here’s the need to set another view. The following code is for the Download View.

Download View
[html]
@{
ViewBag.Title = “Downloads”;
}

Downloads

@model List

Downloads

@for (var i = 0; i <= Model.Count – 1; i++)
{

}

File Name	Link
@Model[i].ToString()	@Html.ActionLink(“Download”, “Download”, new { ImageName = @Model[i].ToString() })

[/html]

Here, we are taking the information (that we are sending from the controller) about the uploaded files and creating the Html.ActionLinks dynamically.

Please note that we are adding the Image name to the action. Here is the output after performing the operations.

As in the preceding image, when you mouse over the link, it will show the image name along with the controller URL. Click on the link to download the file. So simple, right?

Conclusion

I hope you liked the article. Please provide your valuable feedback; it matters a lot. You can download the source code to determine more.

Point of interest

MVC, MVC Upload, MVC Download, File Uploading Using MVC, File Downloading Using MVC