Introduction

In this article we are going to see some features of the brand new Visual Studio 2017. This is the second article of the Visual Studio 2017 series. Please be noted that, this is not the complete series of new functionalities of Visual Studio 2017, here I am going to share only few things to get you started with the new Visual Studio 2017. I hope you will like this. Now let’s begin.

Download Source Code

• VS2017 features you may love

Background

You can always find the first part of this series here. If you never use Visual Studio, you can find some articles and code snippets relates to it here

Let’s start then

Let’s say you have a MVC application with a model Customer as follows.

[csharp]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace VS2017Features.Models
{
public class Customer
{
public string CustId { get; set; }
public string CustName { get; set; }
public string CustCode { get; set; }
}
}
[/csharp]

And a controller as follows

[csharp]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using VS2017Features.Models;
namespace VS2017Features.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
List<Customer> lstCust = new List<Customer>();
Customer cst = new Customer()
{
CustId = “1”,
CustName = “Royal Enfield”,
CustCode = “CST01”
};
lstCust.Add(cst);
return View(lstCust);
}
}
}
[/csharp]

As of now, I am not going to explain the codes, as it is pretty much clear and easy. Now we are going to see the preceding topics.

• Run execution to here feature
• The new exception handler
• Redisigned Attach to process box
• Reattach to process
• What is there for JavaScript developer in VS2017

Run execution to here feature

Let’s say we have a break point in our code as preceding.

Run_execution_to_here_in_VS2017

Could you notice that there is a small green color icon in the image, in which you get the text “Run execution to here” while hovering it. This is a new feature in VS2017, if you click on the icon which is near to any lines of codes, the execution will hit at that point. That’s pretty much simple right? Now you don’t need to put any unwanted breakpoints for checking out the execution line by line while debugging.

Now what if you are using this feature in a loop. Let’s modify our controller code as preceding.

[csharp]
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
List<Customer> lstCust = BuildCustomer();
return View(lstCust);
}

private static List<Customer> BuildCustomer()
{
List<Customer> lstCust = new List<Customer>();
for (int i = 0; i < 5; i++)
{
Customer cst = new Customer()
{
CustId = i.ToString(),
CustName = $”CustName{i}”,
CustCode = $”CST{i}”
};
lstCust.Add(cst);
}
return lstCust;
}
}
[/csharp]

And view as preceding.

[html]
@model IEnumerable<VS2017Features.Models.Customer>

@{
ViewBag.Title = “Index”;
}

<h2>Index</h2>
<style>
th, td, tr {
border: 1px solid #ccc;
padding: 10px;
}
</style>
<table>
<thead>
<tr>
<th>Cust Id</th>
<th>Cust Name</th>
<th>Cust Code</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{

<tr>
<td>@item.CustId</td>
<td>@item.CustName</td>
<td>@item.CustCode</td>
</tr>

}
</tbody>
</table>
[/html]

Now let’s run our application.

Applciation_output

Put a breakpoint in the loop, when you run you can see that i value is getting incremented which means, the iterations are happening. Once the iterations are over, the execution comes out. Please be noted that you can always come out of this loop by changing the execution point.

Run_execution_to_here_in_loop_1

Run_execution_to_here_in_loop_2

The new exception popup

The new exception box is really handy which can be resized, as an additional features the inner exceptions are added to the pop up itself. No need to search for the inner exceptions now. To create an exception, we can call the preceding function.

[csharp]
private void MakeDivideByZeroException()
{
throw new DivideByZeroException();
}
[/csharp]

Once you call the above function, you can get an error as follows.

The_new_exception_box

If you click on the view details, a quick watch popup with the error information will be opened.

Quickwatch_in_VS2017

Under the exception settings, you can always set whether you need to throw this type of exception only for the particular DLL or for every DLL.

Redesigned Attach to process box

We all know how we can attach to a process in Visual Studio. But have you ever thought, if we have a search box to search a process and attach to it, it would make the task easier? No worries, in VS2017 you get that. To see the redesigned Attach to process window, please click on Debug -> Attach to process.

Redesigned_attach_to_process

Now we have attached our process which was running in Microsoft Edge browser. Wait, the game is not over yet. Please click on the Debug option, you can see an option called Reattach to process. What is that? This option gives you an advantage of reattach the recent process that you already attached. That’s cool right? If you have one or more instance of the same process, it will ask you to select which ever you needed.

What is there for JavaScript developer in VS2017

VS2017 has lots of improvements for JavaScript language. Let’s find out few of them.

• Advanced JavaScript intellisense
• Added ECMAScript 6
• Introduction of JS Doc
• New Rename options in JavaScript
• Find all references of functions or classes

Advanced JavaScript intellisense

VS2017 has advanced intellisenses for JavaScript. We don’t need to remember the parameters for the in built functions of JavaScript. For example, if you typed jQuery.ajax() you can see the parameters of the functions as follows.

Advanced_JavaScript_intellisence

The best thing is, it is even shows what exactly the type of the parameter. Yeah, JavaScript types are dynamic, so no one was creating a proper documentation for JavaScript functions. Now we have an option.

If you right click on the ajax() function and click on Go To Definition, you can see the definition in a .ts file (TypeScript) as follows.

[js]
/**
* Perform an asynchronous HTTP (Ajax) request.
*
* @param settings A set of key/value pairs that configure the Ajax request. All settings are optional. A default can be set for any option with $.ajaxSetup().
* @see {@link https://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings}
*/
ajax(settings: JQueryAjaxSettings): JQueryXHR;
/**
* Perform an asynchronous HTTP (Ajax) request.
*
* @param url A string containing the URL to which the request is sent.
* @param settings A set of key/value pairs that configure the Ajax request. All settings are optional. A default can be set for any option with $.ajaxSetup().
* @see {@link https://api.jquery.com/jQuery.ajax/#jQuery-ajax-url-settings}
*/
ajax(url: string, settings?: JQueryAjaxSettings): JQueryXHR;
[/js]

In VS2017, all JavaScript related documentations are handled by these TypeScript files.

Added ECMAScript 6

In VS2017, the new ECMAScript 6 features are added which are more intuitive and OOP-style. So we can always use those in our application. Shall we start now?

[js]
class Operations {
constructor(x, y) {
this.x = x;
this.y = y;
}
add() {
return (this.x + this.y);
}
}
var myObj = new Operations(1, 2);
console.log(myObj.add());
[/js]

If you run the above code, you can see an output as follows.

JavaScript_Class_Output

Now how can you rewrite the above code to lower ECMAScript version? I leave it to you. You can always read more about ECMAScript6 here.

JSDoc

Documenting a JavaScript fucntion was a tough task, but not anymore. In VS2017, this makes simple. Let’s check it out. By pressing /** you can easily document your JavaScript functions and classes. Let us rewrite the class and function as preceding.

[js]
/**
* This class performs arithmetic operations
*/
class Operations {
/**
* Operations class constructor
* @param {any} x
* @param {any} y
*/
constructor(x, y) {
this.x = x;
this.y = y;
}
/**
* Add function
*/
add() {
return (this.x + this.y);
}
}
var myObj = new Operations(1, 2);
console.log(myObj.add());
[/js]

You can even set the type of the parameter.

Set_default_type_for_the_parameter_in_JSDoc

If you change the type in the JSDoc, the same will reflect in when you create an instances or calling the functions.

JSDoc_reflects_while_creating_instances

New Rename options in JavaScript

You can now right click on any function name or class name and easily rename those in all references.

New_Rename_option_in_JavaScript

Find all references of functions or classes

You can now find the references of your functions or classes easily, just right click and click on Find all references.

Find_all_references_in_JavaScript

That’s all for today. I will come with another set of features of Visual Studio 2017 very soon. Happy coding!.

References

• Visual Studio

See also

• Articles related to Visual Studio

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

Introduction

Here we are going to a see some live actions of the brand new Visual Studio 2017. Please be noted that, this is not the complete series of new functionalities of Visual Studio 2017, here I am going to share only few things to get you started with the new Visual Studio 2017.I hope you will like this. Now let’s begin.

Background

Today, the wait is over. Visual Studio 2017 is here, so I thought of trying it out today itself. That’s how this article is made. If you never use Visual Studio, you can find some articles and code snippets relates to it here

Installing Visual Studio 2017

You can always install the brand new Visual Studio 2017 from here. While installing you can always select the things you may need, for example if you are a Xamarin developer, you can select the Xamarin. Visual Studio 2017 has the option for it. This makes the installation pretty much fast. Once after you install, it is time to launch.

After_installing_Visual_Studio_2017

You can always set the development settings and the theme as per your wish, this features are already available in other lower versions too. Just thought to say it.

Selecting_theme_in_Visual_Studio_2017

New features of Visual Studio 2017

Recent, Open, New project template

In the start screen, you can see some slight changes like preceding.

Recent

This is where your recent projects will be shown, so that you can easily open it up.

Open

This, helps you to open the projects you need in an easy manner. It is not only helping to open a project from your local computer, but also from Visual Studio Team services. Things are pretty much easier now. Right?

New project

Here you can see the templates that you recently worked with, and you can always search the templates too.

Recent_menu_and_open_menu_in_Visual_Studio_2017

Creating first Visual Studio Application

Now, let’s create an empty MVC application and a controller in it.

[csharp]
namespace WhyVisualStudio2017.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
}
[/csharp]

Now if you look at the preceding image, you can see that there is a dotted lines between the namespaces, classes, methods.

New_layered_structure

This will help you to understand how the namespaces, class, methods are related to. If you have worked in heavy projects where you can have 1000’s lines of codes in a single class, you may find this feature very useful.

Now let’s create a model class as preceding.

[csharp]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WhyVisualStudio2017.Models
{
public class Calculator
{
public static int CalculateMe(int v1, int v2)
{
return v1 * v2;
}
}
}
[/csharp]

Go back to your controller and type ‘cal’, you can see the new intellisense, where you can separate the lists by classes, snippets, interfaces etc.

New_Intellisense_feature

New_Intellisense_feature

Now, if you have given your function name as in camel Case manner, the Visual Studio 2017 will give a suggestion to rename it as preceding.

Naming_Suggestions_in_Visual_Studio

As an additional feature, if you click on the preview changes, you can get to know where exactly your recent code changes may affect and what fix you can give.

Preview_Changes_in_Visual_Studio

Searching for a file is quite easier in Visual Studio 2017, all you have to do is type CTRl + T, then you can see a box as preceding.

Find_files_in_Visual_Studio_2017

You can select any kind of files by typing the file name as preceding.

Find_Files_in_Visual_Studio

You can always use the filters given there in the box.

Another important feature available in Visual Studio 2017 is, Exception User Handled. If you get any error, the Visual Studio 2017 will say you where exactly the error is. For example, we all know the preceding codeblock will give you a null reference exception.

[csharp]
List<string> lstString = new List<string>();
lstString = null;
lstString.Add(“Sibeesh”);
[/csharp]

Now, if you run your application, Visual Studio 2017 will give you the entire details of the error as preceding.

Exception_User_Handled_In_Visual_Studio_2017

In the exception box, it is been mentioned as lstString was null. For every developer, one of the head ache is finding where exactly the error occurs. Now Visual Studio 2017 makes that much easier. Way to go. That’s all for today. I will come with all the features of Visual Studio 2017 very soon. Happy coding!.

References

• Visual Studio

See also

• Articles related to Visual Studio

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

Introduction

In this article we are going to work with Media Service Account in Azure. Once we create a media service account, we will create a console application in which we will add the operations like creating the media assets dynamically. You can also upload some files to the assets created. We will discuss here that too. I hope you will like this.

Download the source code

You can always download the source code here: Azure Media Service

Background

Few days back I have got a requirement of storing some files in the cloud. As you all know, Azure will be the right choice if you talk about the cloud services. And I had account with Azure already, so the things were pretty much easy for me. Thus I decided to create a media service account for this requirement. Here we are going to see how we can create an Azure media service account and how to use the same. Following are the prerequisites.

What is media service account?

Please be noted that your storage account region must be same as your media service account region.

Prerequisites

If you are a start up company or you are in thinking to start a one, you can always go for BizSpark(Software and services made for the start ups), to join please check here: How to join bizspark. Or you can always create a free account here.

Things we are going to do

The following are the tasks we are going to do.

If you don’t have an Azure account with active subscription, you must creates it first before going to do this task.

Now we will go and create our media service account.

Steps to create an Azure media service account

To create an azure media service account, please follows the preceding steps.

Step 1: Login to your Azure Portal (https://portal.azure.com)

Azure Home

Step 2: Click New and select Media + CDN

Media And CDN

Step 3: Click on the media service

This will redirect you to old azure portal, If you are not redirected, no worries. It is fine.

Media Service

Step 4: Give the details.

New Storage Account

Here you can select if you have a storage account or a new one will be created for you automatically.

Step 5: Finish

Once you give the needed details, you can click on the tick symbol.

Media Service Created

Now we have our storage account and media service account with us. You can always download the sample applications given there. What you need to do all is just select the language you wish and click on the download link. We will create a console application to use this media service account. Sounds cool?

Creating a Console application to use Media service account

To create a console application in Visual Studio click File->New project-> Select language->Select Console Application.

Now go back to your Azure portal and click on Manage Keys at the bottom, copy the MEDIA SERVICE ACCOUNT NAME and MEDIA SERVICE ACCESS KEY (Either primary or secondary). Then you need to add the settings as appSettings in your App.config file as follows.

[xml]
<appSettings>
<add key="MediaServicesAccountName" value="****" />
<add key="MediaServicesAccountKey" value="***************************" />
</appSettings>
[/xml]

The next thing you need to do is installing windowsazure.mediaservices from package manager console. For that please go to your package manger console from NuGet Package Manager. And run the below query.

[csharp]
install-package windowsazure.mediaservices
[/csharp]

Now you need to include the preceding namespace to get started with.

[csharp]
using Microsoft.WindowsAzure.MediaServices.Client;
[/csharp]

Now change your Program.cs codes as follows

[csharp]
using Microsoft.WindowsAzure.MediaServices.Client;
using System;
using System.Configuration;

namespace AzureMediaServiceApp
{
class Program
{
#region Constants
private static string mediaServicesAccountName = ConfigurationManager.AppSettings["MediaServicesAccountName"];
private static string mediaServicesAccountKey = ConfigurationManager.AppSettings["MediaServicesAccountKey"];
#endregion
static void Main(string[] args)
{
string input = string.Empty;
Console.WriteLine("Enter the asset name to be created…");
input = Console.ReadLine();
CreateBLOBContainer(input);
}
public static string CreateBLOBContainer(string containerName)
{
try
{
string result = string.Empty;
CloudMediaContext mediaContext;
mediaContext = new CloudMediaContext(mediaServicesAccountName, mediaServicesAccountKey);
IAsset asset = mediaContext.Assets.Create(containerName, AssetCreationOptions.None);
return asset.Uri.ToString();
}
catch (Exception ex)
{
return ex.Message;
}
}
}
}
[/csharp]

What we are doing in the above code is, we are fetching the account details from the App.config and calling a function CreateBLOBContainer with the name of the asset as a parameter. We will ask for this name in the console window. Sounds good?

Media Service Created Output

Now go back to your azure portal and click on content tab, you can see the asset you are just created.

Media Service Created Azure Portal Output

Now we will create a function which will upload some files to asset. So that we will change our Program.cs file as follows.

[csharp]
using Microsoft.WindowsAzure.MediaServices.Client;
using System;
using System.Configuration;
using System.IO;

namespace AzureMediaServiceApp
{
class Program
{
#region Constants
private static readonly string mediaServicesAccountName = ConfigurationManager.AppSettings["MediaServicesAccountName"];
private static readonly string mediaServicesAccountKey = ConfigurationManager.AppSettings["MediaServicesAccountKey"];
private static readonly string myAzureCon = ConfigurationManager.ConnectionStrings["myAzureStorageCon"].ConnectionString;
private static MediaServicesCredentials _mediaServiceCredentials = null;
#endregion
static void Main(string[] args)
{
string input = string.Empty;
Console.WriteLine("Enter the asset name to be created…");
input = Console.ReadLine();
_mediaServiceCredentials = new MediaServicesCredentials(mediaServicesAccountName, mediaServicesAccountKey);
IAsset asset = CreateBLOBContainer(input, _mediaServiceCredentials);
UploadImages(asset, _mediaServiceCredentials);
}
public static IAsset CreateBLOBContainer(string containerName, MediaServicesCredentials _medServCredentials)
{
try
{
string result = string.Empty;
CloudMediaContext mediaContext;
mediaContext = new CloudMediaContext(_medServCredentials);
IAsset asset = mediaContext.Assets.Create(containerName, AssetCreationOptions.None);
return asset;

}
catch (Exception)
{
throw;
}
}
public static string UploadImages(IAsset asset, MediaServicesCredentials _medServCredentials)
{
try
{
string _singleInputFilePath = Path.GetFullPath(@"E:\X7Md4VB.JPG");
CloudMediaContext mediaContext;
mediaContext = new CloudMediaContext(_medServCredentials);
var fileName = Path.GetFileName(_singleInputFilePath);
var assetFile = asset.AssetFiles.Create(fileName);
var policy = mediaContext.AccessPolicies.Create("policy for upload", TimeSpan.FromMinutes(30), AccessPermissions.Read | AccessPermissions.Write | AccessPermissions.List);
var locator = mediaContext.Locators.CreateSasLocator(asset, policy, DateTime.UtcNow.AddDays(1));
assetFile.Upload(_singleInputFilePath);
return "Success!";
}
catch (Exception)
{
throw;
}
}
}
}
[/csharp]

Here we calls a function UploadImages which accepts IAsset and MediaServicesCredentials as a parameter to upload the images to the asset we created. Once you run this, you can see that image has been uploaded in your asset. To check that, please go to your Azure portal and see your asset size in content tab. I am sure that the size must be changed.

Image uploaded to Media Service

Now we will list down all the items we saved to the asset. Shall we?

Retrieving the items from the Asset

To retrieve the items we will add an another function as follows.

[csharp]
private static void GetAllTheAssetsAndFiles(MediaServicesCredentials _medServCredentials)
{
try
{
string result = string.Empty;
CloudMediaContext mediaContext;
mediaContext = new CloudMediaContext(_medServCredentials);
StringBuilder myBuilder = new StringBuilder();
foreach (var item in mediaContext.Assets)
{
myBuilder.AppendLine(Environment.NewLine);
myBuilder.AppendLine("–My Assets–");
myBuilder.AppendLine("Name: " + item.Name);
myBuilder.AppendLine("++++++++++++++++++++");

foreach (var subItem in item.AssetFiles)
{
myBuilder.AppendLine("File Name: "+subItem.Name);
myBuilder.AppendLine("Size: " + subItem.ContentFileSize);
myBuilder.AppendLine("++++++++++++++++++++++");
}
}
Console.WriteLine(myBuilder);
}
catch (Exception)
{
throw;
}
}
[/csharp]

And it will give you an output as follows.

My Assets and contents

Conclusion

Did I miss anything that you may think which is needed? Have you ever tried Azure media service account? 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

Download the source code

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

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
{
<script>
$(document).ready(function () {
$.ajax(
{
type: ‘GET’,
dataType: ‘json’,
contentType: ‘application/json;charset=utf-8’,
url: ‘http://localhost:3064/api/Subscribers’,
success: function (data) {
try {
debugger;
var html = ‘<table><thead><th>Mail ID</th><th>Subscription ID</th><th>Subscription Date</th></thead><tbody>’;
$.each(data, function (key, val) {
debugger;
html += ‘<tr><td>’
+ ‘<a ‘ + ‘href="mailto:’ + val.MailID + ‘">’ + val.MailID + ‘</a>’ +
‘</td><td>’ + val.SubscriberID + ‘</td><td>’ + val.SubscribedDate + ‘</td></tr>’;
});
html += ‘</tbody></table>’;
$(‘#myGrid’).html(html);
} catch (e) {
console.log(‘Error while formatting the data : ‘ + e.message)
}
},
error: function (xhrequest, error, thrownError) {
console.log(‘Error while ajax call: ‘ + error)
}

}
);
});
</script>

}
[/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]
<div id="myGrid"></div>
[/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<tbl_Subscribers> 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<tbl_Subscribers> 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]
<style>
table,tr,td,th {
border:1px solid #ccc;
border-radius:5px;
padding:10px;
margin:10px;
}

</style>
[/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?

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