1) View Data

ViewData is a built-in object of the "ViewDataDictionary" class.
ViewData stores the data in key-value pairs

Example
public IActionResult Index() {
    ViewData["Name"] = "MVC";
    return View();
}

Output

2) View Bag
ViewBag is also used for sending Data from the controller to View.
ViewBag is developed based on Dynamic Typing.
No need to perform Type Casting
Use key as property

Example
public IActionResult ViewBagIndex() {
    ViewBag.Name = "MVC";
    return View();
}

Output

3) Temp Data
TempData is used to transfer the aata from one Action to Another Action at the time of redirection
TempData is an object of the "TempDataDictionary" class

Example
public ActionResult TempDataIndex() {
    TempData["Name"] = "MVC";
    return View();
}

Output

Please do leave a comment if you find it useful.

Many times we need to post a list of records to controller instead of a single record to controller such as dynamically added html table records etc . Also I have learned on many forum posts regarding the problem in posting a list of records to controller, as many are saying while posting list of records we are getting only one record at controller instead of list of records . So by considering this requirement I have decided to write this article . Now let's learn step by step which helps beginners to learn how to get list of records into ASP.NET MVC controller .
 
Scenario
Let's consider we have a requirement in which a single user can add multiple orders of products at a time instead of  ordering one by one. So in this scenario we need to create one single view from a complex model that is from multiple models where one model can be used to hold customer information and the second model used to hold the list of records .

So let's demonstrate the preceding scenario by creating one simple ASP.NET MVC application

Step 1: Create an MVC Application.
Now let us start with a step by step approach from the creation of a simple MVC application as in the following:

    "Start", then "All Programs" and select "Microsoft Visual Studio 2015".

    "File", then "New" and click "Project", then select "ASP.NET Web Application Template", then provide the Project a name as you wish and click OK. After clicking, the following window will appear:

Step 2: Create Model Class
Now let us create the model class file named OrderModel.cs by right clicking on model folder as in the following screenshot:

Note:
It is not mandatory that Model class should be in Models folder, it is just for better readability; you can create this class anywhere in the solution explorer. This can be done by creating different folder names or without folder name or in a separate class library.

OrderModel.cs class file code snippet:
    /// <summary>  
       /// To hold order details  
       /// </summary>  
      public class OrderModel  
       {  
           public string ProductCode { get; set; }  
           public string ProductName { get; set; }  
           public Int16 Qty { get; set; }  
           public double Price { get; set; }  
           public double TotalAmount { get; set; }  
       }  
      public class OrderDetail  
       {  
           /// <summary>  
           /// To hold list of orders  
           /// </summary>  
           public List<OrderModel> OrderDetails { get; set; }  
      
       }

 Step 3: Add Controller Class.
Now let us add the MVC 5 controller as in the following screenshot:

After clicking on Add button it will show the window. Specify the Controller name as Order with suffix Controller.

Note:
The controller name must be having suffix as 'Controller' after specifying the name of controller. Now modify the default code in OrderController.cs class file to bind HTML table in view from strongly typed model class with list of records and getting those list of records into controller, after modifying code will look like as follows,

OrderController.cs
      public class OrderController : Controller  
        {  
            /// <summary>  
            /// Get list of records with View     
            /// </summary>  
            /// <returns></returns>  
            public ActionResult PlaceOrder()  
            {  
                List<OrderModel> objOrder = new List<OrderModel>()  
                {  
     new OrderModel {ProductCode="AOO1",ProductName="Windows Mobile",Qty=1,Price=45550.00,TotalAmount=45550.00 },  
    new OrderModel {ProductCode="A002",ProductName="Laptop",Qty=1,Price=67000.00,TotalAmount=67000.00 },  
    new OrderModel {ProductCode="A003",ProductName="LCD Television",Qty=2,Price=15000.00,TotalAmount=30000.00 },  
    new OrderModel {ProductCode="A004",ProductName="CD Player",Qty=4,Price=10000.00,TotalAmount=40000.00 }  
                };  
      
                OrderDetail ObjOrderDetails = new OrderDetail();  
                ObjOrderDetails.OrderDetails = objOrder;  
                return View(ObjOrderDetails);  
            }  
            /// <summary>  
            /// Get list of records from view  
            /// </summary>  
            /// <param name="Order"></param>  
            /// <returns></returns>  
            [HttpPost]  
            public ActionResult PlaceOrder(OrderDetail Order)  
            {  
      
      
                return View();  
            }  
        }

Step 4:
Creating strongly typed view named PlaceOrder using OrderDetail class. Right click on View folder of created application and choose add view, select OrderDetail model class and scaffolding template List   as,

Click on Add button then it will create the view named PlaceOrder , Now open the PlaceOrder.cshtml view, Then some default code you will see which is generated by MVC scaffolding template, Now modify default code to make as per our requirements, After modifying the code it will look like the following,

PlaceOrder.cshtml
@model GetHTMLTableRecordsInMVC.Models.OrderDetail  
@{  
    ViewBag.Title = "www.cpmpilemode.com";  
}  
<hr />  
@using (Html.BeginForm())  
{  
    @Html.AntiForgeryToken()  
 
    <div class="form-horizontal">  
        <div class="form-group">  
            <div class="col-md-offset-2 col-md-10 text-right">  
                 <input type="button" value="Add Product" class="btn btn-primary" />  
            </div>  
        </div>  
        <div class="form-group">  
            <div class="col-md-12">  
                <table class="table table-condensed table-hover">  
                    <tr>  
                        <th>  
                            Product Code  
                        </th>  
                        <th>  
                            Product Name  
                        </th>  
                        <th>  
                            Quantity  
                        </th>  
                        <th>  
                            Price  
                        </th>  
                        <th>  
                            Total Amount  
                        </th>  
                    </tr>  
                    @{  
                        //To make unique Id  
                        int i = 0;  
                        foreach (var item in Model.OrderDetails.ToList())  
                        {  
 
                            <tr>  
                                <td>  
 
 
                                    @Html.EditorFor(o => o.OrderDetails[i].ProductCode, new { @id = "ItemCode_" + i })  
                                </td>  
                                <td>  
                                    @Html.EditorFor(o => o.OrderDetails[i].ProductName, new { @id = "ProductName_" + i })  
                                </td>  
                                <td>  
                                    @Html.EditorFor(o => o.OrderDetails[i].Qty, new { @id = "Qty_" + i })  
                                </td>  
                                <td>  
                                    @Html.EditorFor(o => o.OrderDetails[i].Price, new { @id = "Price_" + i })  
                                </td>  
                                <td>  
                                    @Html.EditorFor(o => o.OrderDetails[i].TotalAmount, new { @id = "Price_" + i })  
                                </td>  
 
                            </tr>  
                            i++;  
                        }  
                    }  
                </table>  
            </div>  
        </div>  
        <hr />  
        <div class="form-group">  
            <div class="col-md-offset-2 col-md-10 text-center">  
                <input type="submit" value="Place Order" class="btn btn-primary" />  
            </div>  
        </div>  
    </div>  
 }

Common issues
While binding list of records your control Id's must be unique , otherwise same first record will repeat in all lists. So to avoid this we need to maintain  unique id's for control . As we have maintained in preceding view manually by using incremental i counter and model properties .

Now after adding the Model, View and controller into our project. The solution explorer will look like as follows,

Now we have done all coding to upload files . Step 5 : Now run the application. After running the application initial screen will look like as follows,

In preceding table we are adding orders (records) dynamically. Put break point on PlaceOrder action result method and click on Place Order button. Now the reference variable Order of OrderDetail class will show the four records in debug mode as,

In the preceding image you can see that four records list count which is coming from view because we have added four records into the table . Now Expand the OrderDetails node it will show the following records,

I hope from all preceding examples we have learned how to pass dynamically added HTML table records list to controller in ASP.NET MVC.

Note:

    Download the Zip file of the sample application for a better understanding.
    Add product button is just for scenario purpose , In next article I will explain how to add dynamic records into html table .
    Since this is a demo, it might not be using proper standards, so improve it depending on your skills.

Summary

I hope this article is useful for all readers. If you have any suggestions please contact me.

View injection is the most useful feature introduced in ASP.NET Core. Using ASP.NET Core inbuilt dependency injection container, we can easily inject dependencies in Controllers, Filters, and Views. In this post, I am going to show how to inject dependencies using inject keyword in the View.

Previously, to retrieve the data in View, we needed to pass it from the Controller using Controller properties, like ViewBag, ViewData or model properties. In ASP.NET Core MVC, things are quite smooth by the usage of Inject directive. Inject helps with injecting the dependencies directly to the View and retrieving the data.

Setup project
In Visual Studio, create a new project (File > New > Project), and select ASP.NET Core Web Application (.NET Core).

Enter a name for the application and click OK. Select Web Application to generate the default ASP.NET Core MVC project.

Visual Studio will automatically generate ASP.NET Core MVC project structure and display a welcome screen.

Add Services
Add a new folder "Models" and add FruitServices class in it. Now, add a method GetFruits() which returns List<string>().

    public class FruitServices  
    {  
        public List<string> GetFruits()  
        {  
            return new List<string>() { "Mango", "Apple", "Apricot", "Banana", "Grapes" };  
        }  
    }  

Inject in View
We can inject a service into a View using the @inject directive. You can think of @inject as adding a property to your View, and populating the property using DI.
 
The basic syntax for View Injection is:
    @inject <service> <name>  

    @inject is the directive used to inject dependencies
    <service> is service class.
    <name> is the service injection name by which we can access service methods.

In our example, we are going to inject FruitServices and give service injection name fruitList.
    @inject MVCCoreExample.Models.FruitServices fruitList  
      
    <h3>Fruit List</h3>  
    <ul>  
        @foreach (var name in fruitList.GetFruits())  
        {  
            <li>@name</li>  
        }  
    </ul>  

This View displays a list of fruits which are populated from the injected FruitServices. Using GetFruit() method, we can retrieve a list of fruits.
 
Let's run it without registering FruitServices in DI container.

When we run the app, it will throw an invalid operation exception "No service for type 'MVCCoreExample.Modes.FruitServices' has been registered". This error occurred because we didn't register FruitServices in a dependency injection container.
 
Let's register it first and try again!
Register Service
Open startup.cs class and register service for dependency injection in ConfigureServices method. You can register your own application services, using AddTransient method. FruitServices will be instantiated by the container and used to fulfill such requests.

    public void ConfigureServices(IServiceCollection services)  
    {  
        // Add framework services.  
        services.AddMvc();  
        services.AddTransient<FruitServices>();  
    }  

Run it!
Here it is! The sample displays the data from the service injected in View.

Injecting dependencies directly into MVC View can make things a bit easier. In this post, I have shown a simple View Injection sample to understand the use of Inject directive. View injection can be useful for populating UI elements, like selection list, radio buttons etc. This will increase code re-usability and keep your Controller clean by minimizing the amount of code required on Controllers.

This article will give you an understanding of the what and the why of Web API and will demonstrate a CRUD operation with a simple example using Entity Framework and consuming the created service into ASP.NET MVC application.

 
The flow of the article

    What is Web API
    Why Web API
    Real time example of WEBAPI
    Steps to Create table, Web API Service, and MVC application to consume the service.

        Create a table in SQL Server.
        Create Data Access Layer in Visual Studio to access the data and perform DB operation.
        Create a Web API project.
        Create MVC Application to consume Web API Service. Project created in step II, III, and IV belonging to one same solution
        Set Project Startup Order

    Output Screens
    Conclusion

Web API
    Web API provides service that can be consumed by a broad range of clients like mobile, tablet, desktop, etc.
    The response can be in any format, like XML, JSON (widely used), etc.
    It supports MVC features, like controller, action, routing, etc.
    Supports CRUD operation. CRUD stands for Create, Read, Update and Delete. It works on HTTP verbs like HttpPost to Create, HttpGet to Read, HttpPut to Update and HttpDelete to Delete.

Why Web API?

Without Web API, the server will have one application to handle the XML request and another application to handle the JSON request, i.e., for each request type, the server will have one application. But with Web API, the server can respond to any request type using a single application. Small end devices like mobile, tablet are capable of handling only the JSON data. So, the Web API has huge scope to give space in the real world.
 
A real-time example of WebAPI

    Weather forecasting
    Movie, Bus, Flight booking

There can be one service provider who offers the service and many consumers to avail this service.
 
Step 1 - Create a table in SQL Server
We will create a table to perform CRUD operation with Web API. The table script is given below.

    CREATE TABLE [dbo].[Product](  
        [ProductId] [int] PRIMARY KEY IDENTITY(1,1) NOT NULL,  
        [ProductName] [nvarchar](100) NULL,  
        [Quantity] [int] NULL,  
        [Price] [int] NULL)  

Step 2 - Create Class Library Project
    New Project -> Visual C# -> Windows -> Class Library Project and name it as DataAccessLayer.
    Right-click on DataAccessLayer project->Add->New Item->Data-> ADO.NET Entity Data Model and name it as ShowRoomEF.
    Choose EF designer from database in next step.
    Add the table created in step1 into Entity Framework.

Create a class called DAL.cs in this project to access the data from DB by Web API service. The code is given below.

DAL.cs
    public static class DAL  
    {  
        static ShowroomEntities DbContext;  
        static DAL()  
        {  
            DbContext = new ShowroomEntities();  
        }  
        public static List<Product> GetAllProducts()  
        {  
            return DbContext.Products.ToList();  
        }  
        public static Product GetProduct(int productId)  
        {  
            return DbContext.Products.Where(p => p.ProductId ==  productId).FirstOrDefault();  
        }  
        public static bool InsertProduct(Product productItem)  
        {  
            bool status;  
            try  
            {  
                DbContext.Products.Add(productItem);  
                DbContext.SaveChanges();  
                status = true;  
            }  
            catch (Exception)  
            {  
                status = false;  
            }  
            return status;  
        }  
        public static bool UpdateProduct(Product productItem)  
        {  
            bool status;  
            try  
            {  
                Product prodItem = DbContext.Products.Where(p => p.ProductId == productItem.ProductId).FirstOrDefault();  
                if (prodItem != null)  
                {  
                    prodItem.ProductName = productItem.ProductName;  
                    prodItem.Quantity = productItem.Quantity;  
                    prodItem.Price = productItem.Price;  
                    DbContext.SaveChanges();  
                }  
                status = true;  
            }  
            catch (Exception)  
            {  
                status = false;  
            }  
            return status;  
        }  
        public static bool DeleteProduct(int id)  
        {  
            bool status;  
            try  
            {  
                Product prodItem = DbContext.Products.Where(p => p.ProductId == id).FirstOrDefault();  
                if (prodItem != null)  
                {  
                    DbContext.Products.Remove(prodItem);  
                    DbContext.SaveChanges();  
                }  
                status = true;  
            }  
            catch (Exception)  
            {  
                status = false;  
            }  
            return status;  
        }  
    }  

Step 3 - Create Empty Web API Project
 
Navigate as given
Select New Project -> Visual C# -> Web -> ASP.NET Web Application and enter your application and solution name.
Select the empty template from options and check Web API checkbox and click OK.

The solution will be created as below.

    In App_Start -> WebApiConfig.cs file make sure routeTemplate as given below because by default, the route will not have {action}.

In WebApiConfig.cs

    public static void Register(HttpConfiguration config)  
           {  
               // Web API configuration and services  
      
               // Web API routes  
               config.MapHttpAttributeRoutes();  
      
               config.Routes.MapHttpRoute(  
                   name: "DefaultApi",  
                   routeTemplate: "api/{controller}/{action}/{id}",  
                   defaults: new { id = RouteParameter.Optional }  
               );  
     }

    Add Reference to DataAccessLayer project.
    Add the below DLL in references.

        EntityFramework
        SqlServer
        Net.Http
        Net.Http.Formatting

    Install Entity Framework from ‘NuGet Package Manager’.
    Create a Model class for the product as below.

Product.cs
    namespace WebApiService.Models  
    {  
        public class Product  
        {  
            public int ProductId { get; set; }  
            public string ProductName { get; set; }  
            public Nullable<int> Quantity { get; set; }  
            public Nullable<int> Price { get; set; }  
        }  
    }  

Copy the connection string from DataAccessLayer -> web.config and paste it in WebApiService -> web.config.
    <connectionStrings>  
        <add name="ShowroomEntities" connectionString="metadata=res://*/ShowRoomEF.csdl|res://*/ShowRoomEF.ssdl|res://*/ShowRoomEF.msl;provider=System.Data.SqlClient;provider connection string="data source=MYSYSTEM\SQLEXPRESS;initial catalog=Showroom;user id=sa;password=xxxxx;MultipleActiveResultSets=True;App=EntityFramework"" providerName="System.Data.EntityClient" />  
      </connectionStrings>  

Add Showroom Controller and make class to inherit from ApiController.
 
ShowroomController.cs

Showroom Controller takes care of Inserting, Retrieving, Updating and Deleting the data in the database. Request comes to this controller from the consuming application.
    public class ShowroomController: ApiController {  
        // GET: Showroom  
        [HttpGet]  
        public JsonResult < List < Models.Product >> GetAllProducts() {  
                EntityMapper < DataAccessLayer.Product, Models.Product > mapObj = new EntityMapper < DataAccessLayer.Product, Models.Product > ();  
                List < DataAccessLayer.Product > prodList = DAL.GetAllProducts();  
                List < Models.Product > products = new List < Models.Product > ();  
                var config = new MapperConfiguration(cfg => cfg.CreateMap < Product, Models.Product > ());  
                var mapper = new Mapper(config);  
                foreach(var item in prodList) {  
                    products.Add(mapper.Map < Models.Product > (item));  
                }  
                return Json < List < Models.Product >> (products);  
            }  
            [HttpGet]  
        public JsonResult < Models.Product > GetProduct(int id) {  
                EntityMapper < DataAccessLayer.Product, Models.Product > mapObj = new EntityMapper < DataAccessLayer.Product, Models.Product > ();  
                DataAccessLayer.Product dalProduct = DAL.GetProduct(id);  
                Models.Product products = new Models.Product();  
                var config = new MapperConfiguration(cfg => cfg.CreateMap < Product, Models.Product > ());  
                var mapper = new Mapper(config);  
                products = mapper.Map < Models.Product > (dalProduct);  
                return Json < Models.Product > (products);  
            }  
            [HttpPost]  
        public bool InsertProduct(Models.Product product) {  
                bool status = false;  
                if (ModelState.IsValid) {  
                    EntityMapper < Models.Product, DataAccessLayer.Product > mapObj = new EntityMapper < Models.Product, DataAccessLayer.Product > ();  
                    DataAccessLayer.Product productObj = new DataAccessLayer.Product();  
                    var config = new MapperConfiguration(cfg => cfg.CreateMap < Models.Product, Product > ());  
                    var mapper = new Mapper(config);  
                    productObj = mapper.Map < Product > (product);  
                    status = DAL.InsertProduct(productObj);  
                }  
                return status;  
            }  
            [HttpPut]  
        public bool UpdateProduct(Models.Product product) {  
                EntityMapper < Models.Product, DataAccessLayer.Product > mapObj = new EntityMapper < Models.Product, DataAccessLayer.Product > ();  
                DataAccessLayer.Product productObj = new DataAccessLayer.Product();  
                var config = new MapperConfiguration(cfg => cfg.CreateMap < Models.Product, Product > ());  
                var mapper = new Mapper(config);  
                productObj = mapper.Map < Product > (product);  
                var status = DAL.UpdateProduct(productObj);  
                return status;  
            }  
            [HttpDelete]  
        public bool DeleteProduct(int id) {  
            var status = DAL.DeleteProduct(id);  
            return status;  
        }  
    }  

Check your service
Execute your service created just now by running the below URL in the browser and change the port number accordingly.
http://localhost:52956/api/showroom/getallproducts
 
Service Output

Note
Attached WebApiServiceProvider.zip solution.
since solution size exceeds permitted one, have removed 'packages' folder content of 'WebApiServiceProvider' and kept in package_content_1.zip and package_content_2.zip.
 
Kindly don't forget to unzip package_content_1.zip and package_content_2.zip and keep their contents in 'WebApiServiceProvider\packages' folder. Also make changes to connection strings accordingly in both the solution.
 
Step 4 – Consuming Web Api Service In MVC Application
    Create Empty MVC project as below.

Create Product model class as created in WebApiService project.
Create ServiceRepository.cs in Repository folder to consume the web api service and create ServiceUrl as key and as a value in web.config (port number changes according to the server).
    <add key="ServiceUrl" value="http://localhost:52956/"></add>  

Add the below DLL in the references.
    Net
    Net.Http
    Net.Http.Formatting

ServiceRepository.cs
Service Repository is created to act as a reusable module for requesting, posting, updating and deleting data in WebAPI. This is used by any action method in the Controller which is created in next step and avoids duplication of this code.

public class ServiceRepository  
{  
       public HttpClient Client { get; set; }  
       public ServiceRepository()  
       {  
           Client = new HttpClient();  
           Client.BaseAddress = new Uri(ConfigurationManager.AppSettings["ServiceUrl"].ToString());  
       }  
       public HttpResponseMessage GetResponse(string url)  
       {  
           return Client.GetAsync(url).Result;  
       }  
       public HttpResponseMessage PutResponse(string url,object model)  
       {  
           return Client.PutAsJsonAsync(url, model).Result;  
       }  
       public HttpResponseMessage PostResponse(string url, object model)  
       {  
           return Client.PostAsJsonAsync(url,model).Result;  
       }  
       public HttpResponseMessage DeleteResponse(string url)  
       {  
           return Client.DeleteAsync(url).Result;  
       }  
}

Create a Controller to handle a request for different action method and navigate to the corresponding view.

ProductController.cs
Product Controller in MVC application is created to handle the request received from the user action and to serve the response accordingly. Code for product controller is given below.
public class ProductController : Controller  
{  
    // GET: Product  
    public ActionResult GetAllProducts()  
    {  
        try  
        {  
            ServiceRepository serviceObj = new ServiceRepository();  
            HttpResponseMessage response = serviceObj.GetResponse("api/showroom/getallproducts");  
            response.EnsureSuccessStatusCode();  
            List<Models.Product> products = response.Content.ReadAsAsync<List<Models.Product>>().Result;  
            ViewBag.Title = "All Products";  
            return View(products);  
        }  
        catch (Exception)  
        {  
            throw;  
        }  
    }  
    //[HttpGet]  
    public ActionResult EditProduct(int id)  
    {  
        ServiceRepository serviceObj = new ServiceRepository();  
        HttpResponseMessage response = serviceObj.GetResponse("api/showroom/GetProduct?id=" + id.ToString());  
        response.EnsureSuccessStatusCode();  
        Models.Product products = response.Content.ReadAsAsync<Models.Product>().Result;  
        ViewBag.Title = "All Products";  
        return View(products);  
    }  
    //[HttpPost]  
    public ActionResult Update(Models.Product product)  
    {  
        ServiceRepository serviceObj = new ServiceRepository();  
        HttpResponseMessage response = serviceObj.PutResponse("api/showroom/UpdateProduct", product);  
        response.EnsureSuccessStatusCode();  
        return RedirectToAction("GetAllProducts");  
    }  
    public ActionResult Details(int id)  
    {  
        ServiceRepository serviceObj = new ServiceRepository();  
        HttpResponseMessage response = serviceObj.GetResponse("api/showroom/GetProduct?id=" + id.ToString());  
        response.EnsureSuccessStatusCode();  
        Models.Product products = response.Content.ReadAsAsync<Models.Product>().Result;  
        ViewBag.Title = "All Products";  
        return View(products);  
    }  
    [HttpGet]  
    public ActionResult Create()  
    {  
        return View();  
    }  
    [HttpPost]  
    public ActionResult Create(Models.Product product)  
    {  
        ServiceRepository serviceObj = new ServiceRepository();  
        HttpResponseMessage response = serviceObj.PostResponse("api/showroom/InsertProduct", product);  
        response.EnsureSuccessStatusCode();  
        return RedirectToAction("GetAllProducts");  
    }  
    public ActionResult Delete(int id)  
    {  
        ServiceRepository serviceObj = new ServiceRepository();  
        HttpResponseMessage response = serviceObj.DeleteResponse("api/showroom/DeleteProduct?id=" + id.ToString());  
        response.EnsureSuccessStatusCode();  
        return RedirectToAction("GetAllProducts");  
    }  
}

Views are created in ConsumeWebApi MVC application to consume the service.

GetAllProducts.cshtml
.cshtml represents Views (UI) and this View displays all the products available which are received from API call in the corresponding method.

@model IEnumerable<ConsumeWebApi.Models.Product>  
 
@{  
    ViewBag.Title = "GetAllProducts";  
}  
 
<h2>GetAllProducts</h2>  
 
<p>  
    @Html.ActionLink("Create New", "Create")  
</p>  
<table class="table">  
    <tr>  
        <th>  
            @Html.DisplayNameFor(model => model.ProductName)  
        </th>  
        <th>  
            @Html.DisplayNameFor(model => model.Quantity)  
        </th>  
        <th>  
            @Html.DisplayNameFor(model => model.Price)  
        </th>  
        <th></th>  
    </tr>  
 
@foreach (var item in Model) {  
    <tr>  
        <td>  
            @Html.DisplayFor(modelItem => item.ProductName)  
        </td>  
        <td>  
            @Html.DisplayFor(modelItem => item.Quantity)  
        </td>  
        <td>  
            @Html.DisplayFor(modelItem => item.Price)  
        </td>  
        <td>  
            @Html.ActionLink("Edit", "EditProduct", new { id = item.ProductId, name= item.ProductName, quantity=item.Quantity, prod = item }) |  
            @Html.ActionLink("Details", "Details", new { id=item.ProductId }) |  
            @Html.ActionLink("Delete", "Delete", new { id=item.ProductId })  
        </td>  
    </tr>  
}  
 
</table>

Create.cshtml
This View allows the user to create a product and insert into the database through WebAPI call which is done in corresponding action method.
@model ConsumeWebApi.Models.Product  
 
@{  
    ViewBag.Title = "Create";  
}  
 
<h2>Create</h2>  
 
@using (Html.BeginForm())   
{  
    @Html.AntiForgeryToken()  
      
    <div class="form-horizontal">  
        <h4>Product</h4>  
        <hr />  
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })  
        <div class="form-group">  
            @Html.LabelFor(model => model.ProductName, htmlAttributes: new { @class = "control-label col-md-2" })  
            <div class="col-md-10">  
                @Html.EditorFor(model => model.ProductName, new { htmlAttributes = new { @class = "form-control" } })  
                @Html.ValidationMessageFor(model => model.ProductName, "", new { @class = "text-danger" })  
            </div>  
        </div>  
 
        <div class="form-group">  
            @Html.LabelFor(model => model.Quantity, htmlAttributes: new { @class = "control-label col-md-2" })  
            <div class="col-md-10">  
                @Html.EditorFor(model => model.Quantity, new { htmlAttributes = new { @class = "form-control" } })  
                @Html.ValidationMessageFor(model => model.Quantity, "", new { @class = "text-danger" })  
            </div>  
        </div>  
 
        <div class="form-group">  
            @Html.LabelFor(model => model.Price, htmlAttributes: new { @class = "control-label col-md-2" })  
            <div class="col-md-10">  
                @Html.EditorFor(model => model.Price, new { htmlAttributes = new { @class = "form-control" } })  
                @Html.ValidationMessageFor(model => model.Price, "", new { @class = "text-danger" })  
            </div>  
        </div>  
 
        <div class="form-group">  
            <div class="col-md-offset-2 col-md-10">  
                <input type="submit" value="Create" class="btn btn-default" />  
            </div>  
        </div>  
    </div>  
}  
 
<div>  
    @Html.ActionLink("Back to List", "GetAllProducts")  
</div>  

Details.cshtml
This View allows the user to see the particular product through WebAPI call which is done in the corresponding action method.
@model ConsumeWebApi.Models.Product  
 
@{  
    ViewBag.Title = "Detail";  
}  
 
<h2>Detail</h2>  
 
<div>  
    <h4>Product</h4>  
    <hr />  
    <dl class="dl-horizontal">  
        <dt>  
            @Html.DisplayNameFor(model => model.ProductName)  
        </dt>  
 
        <dd>  
            @Html.DisplayFor(model => model.ProductName)  
        </dd>  
 
        <dt>  
            @Html.DisplayNameFor(model => model.Quantity)  
        </dt>  
 
        <dd>  
            @Html.DisplayFor(model => model.Quantity)  
        </dd>  
 
        <dt>  
            @Html.DisplayNameFor(model => model.Price)  
        </dt>  
 
        <dd>  
            @Html.DisplayFor(model => model.Price)  
        </dd>  
 
    </dl>  
</div>  
<p>  
    @Html.ActionLink("Edit", "EditProduct", new { id = Model.ProductId }) |  
    @Html.ActionLink("Back to List", "GetAllProducts")  
</p>  

EditProduct.cshtml
This View allows the user to edit product and update database through WebAPI call which is done in the corresponding action method.
@model ConsumeWebApi.Models.Product  
 
@{  
    ViewBag.Title = "EditProduct";  
}  
 
<h2>EditProduct</h2>  
 
 
@using (Html.BeginForm("Update", "Product", FormMethod.Post))  
{  
    @Html.AntiForgeryToken()  
 
    <div class="form-horizontal">  
        <h4>Product</h4>  
        <hr />  
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })  
        @Html.HiddenFor(model => model.ProductId)  
 
        <div class="form-group">  
            @Html.LabelFor(model => model.ProductName, htmlAttributes: new { @class = "control-label col-md-2" })  
            <div class="col-md-10">  
                @Html.EditorFor(model => model.ProductName, new { htmlAttributes = new { @class = "form-control" } })  
                @Html.ValidationMessageFor(model => model.ProductName, "", new { @class = "text-danger" })  
            </div>  
        </div>  
 
        <div class="form-group">  
            @Html.LabelFor(model => model.Quantity, htmlAttributes: new { @class = "control-label col-md-2" })  
            <div class="col-md-10">  
                @Html.EditorFor(model => model.Quantity, new { htmlAttributes = new { @class = "form-control" } })  
                @Html.ValidationMessageFor(model => model.Quantity, "", new { @class = "text-danger" })  
            </div>  
        </div>  
 
        <div class="form-group">  
            @Html.LabelFor(model => model.Price, htmlAttributes: new { @class = "control-label col-md-2" })  
            <div class="col-md-10">  
                @Html.EditorFor(model => model.Price, new { htmlAttributes = new { @class = "form-control" } })  
                @Html.ValidationMessageFor(model => model.Price, "", new { @class = "text-danger" })  
            </div>  
        </div>  
 
 
        <div class="form-group"><div class="col-md-offset-2 col-md-10">  
                <input type="submit" value="Save" class="btn btn-default" />  
            </div>  
        </div>  
    </div>  
 
}  
 
<div>  
    @Html.ActionLink("Back to List", "GetAllProducts")  
</div>  

Step 5 – Set Project Startup Order

This step is necessary and has to be set up because this solution needs WebApiService application to keep running and serve the request. ConsumeWebAPI application will create a request to WebApiService and receive a response back.
So, in order to make two projects to keep up and running, this step is performed.
Whereas if WebApiService is hosted in IIS, then only one project which consumes the service can be started, i.e., MVC or postman.

Output Screens

    Get All Products View.

Create Product View.

Edit Product View.

Detailed View of a product.

Product table data in Product table of SQL Database.

Web API can be self-hosted (service and consuming application in the same solution) as discussed in this example or it can be deployed on IIS server. JSON is the widely used request type in services as it is supported by a wide range of client devices. Enjoy creating your own service.

In this blog, we will discuss about Layouts and what is the significance of _viewstart.cshtml in Razor views. The intention of this blog is to understand the way how _viewstart.cshtml works in MVC. The reason to write this blog is I faced an issue with _viewstart.cshtml,  when I was using HandleError attribute.

What is Layout?
We all know that layouts are like the master pages in Webforms. Simply, the common UI code, which can be used in many views can go into a common view called layout. Usually, we place all the layout pages in the shared folder.

How to use Layouts in MVC?
The following are the different ways to use the layouts:

Using Layout in the View.
    @{  
    ViewBag.Title = "Index";  
    Layout = "~/Views/Shared/_Layout.cshtml";  
    }  
If we declare the code above, given above in the Index.cshtml, this will be rendered along with the HTML content of the _Layout.cshtml. This is the way, we regularly follow.

Assigning Layout in Controller's Action method.

If we work with real the time Applications, we will come across the situations, like to use the different layouts , based on the action called.

For example, I am looking for the list of the students. At this point, Layout would be different for admin and a Teacher but, both of them use same Razor View. Here, we will assign the Layout at an Action level.

We can see assigning the Layout at Action Method in the following code snippet.
If logged in as an admin:
    public List < Student > GetStudentList() {  
        return View("StudentList", "~/Views/Shared/AdminLayout.cshtml");  
    }  
    If Logged in as Teacher: public List < Student > GetStudentList() {  
        return View("StudentList", "~/Views/Shared/TeacherLayout.cshtml");  
    } 

Declaring Layout at _Viewstart.cshtml.

_Viewstate.cshtml plays an important and a tricky role in Razor views. It was introduced in MVC 3 along with Razor views. _Viewstart.cshtml is used to place common UI logic across the Views in the folder, where it is located. This means, the views in a single folder which is having _Viewstart.cshtml will be rendered along with it.

For example: If we observe the views folder of an MVC project, we will see _Viewstart.cshtml in the folder.

Thus, the views in Home and OpenAccess will be rendered along with the UI in _Viewstart.cshtml. We need not to declare anything in the views. This will be done automatically by the framework.

Benefit
By doing so, we can change the layout at a single place only. Otherwise, we have to change the number of views.

Notes
    The inner layouts like a layout in Home/Index will be overriden by _Viewstart.cshtml.
    We can have n-number of _Viewstart.cshtml files in a project. But each should be placed in a folder. Alll the views in the folder will be effected with this.
    _Viewstart.cshtml will be called after the inner view.(Ex: Home/Index)

Finally My problem was
I used HandlerError attribute in a controller. If any exception is caught in the Action method, it should go to error.cshtml, but It was not called as error.cshtml view, placed in a folder, which has _Viewstart.cshtml. Thus, _Viewstart.cshtml will be called after the error.cshtml. _Viewstart.cshtml has the layout,  where I had a Null Reference exception. At last, I removed Layout from _Viewstart and able to see error.cshtml page.

Conclustion
In this blog, we have discussed about the different ways to place layouts in MVC and use of _Viewstart.cshtml. Finally, use _Viewstart.cshtml effectively.

Dynamic Chart displays live data to ASP.NET MVC projects through API and databases. Many javascript libraries have been used to implement charts, like Chart.js, CanvasJS, etc. However, I will be using CanvasJS in this article.

In this article, I will describe the following points:
    What is CanvasJS?
    Creating an ASP.NET MVC 6 Project
    Using CanvasJS in ASP.NET MVC 6 Project
    Inserting Live API Data in Chart
    Formatting Chart

Prerequisites:
    Visual Studio 2022 installed on your machine
    Basic knowledge of JavaScript

What is CanvasJS?
CanvasJS is a JavaScript library with rich UI and multiple functionalities. It allows us to implement charts in our ASP.NET MVC project. We can provide both static and dynamic data to render in charts. CanvasJS generates multiple types of charts, like Line Chart, Bar Chart, Area Chart, Donut Chart, and a lot more. To know more about CanvasJS, please refer here.

Creating an ASP.NET MVC Project
To create an ASP.NET MVC Project, please refer to my previous article, linked below:
    Creating an ASP.NET MVC 6 Project

Using CanvasJS in ASP.NET MVC Project
To implement the chart, you need to follow the steps given below.

First, you will add the CanvasJS JavaScript file link in the _Layout.cshtml file as given below:
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

Now, add the chart inside Home View using JavaScript as given below:
<script type="text/javascript">

window.onload = function () {
  var chart = new CanvasJS.Chart("chartContainer", {
    title:{
      text: "My First Chart in ASP.NET MVC"
    },
    data: [
    {
      // Change type to "doughnut", "line", "splineArea", etc.
      type: "column",
      dataPoints: [
        { label: "apple",  y: 10  },
        { label: "orange", y: 15  },
        { label: "banana", y: 25  },
        { label: "mango",  y: 30  },
        { label: "grape",  y: 28  }
      ]
    }
    ]
  });
  chart.render();
}
</script>

You need to create a <div> tag inside the <body> tag, having id chartContainer to render the the function given above.
<div id="chartContainer" style="height: 400px; width: 60%;"></div>

Markup
    Set the height and width according to your needs, as given in the above code.

Output

Inserting Live API Data in Chart
Above, we used static data to represent the chart. Now we will use live API data. We have created a demo sale API that contains data on monthly sales.

Formatting Chart
We can show our data in any form, like a line chart, area chart, etc. if we change the type to the line as given below:
data: [
    {
      // Change type to "doughnut", "line", "splineArea", etc.
      type: "line",
      dataPoints:
      @Html.Raw(ViewBag.Data)
      //[
      //  { label: "apple",  y: 10  },
      //  { label: "orange", y: 15  },
      //  { label: "banana", y: 25  },
      //  { label: "mango",  y: 30  },
      //  { label: "grape",  y: 28  }
      //]
    }
    ]

Output

This Article In a Nutshell:
    First, you need to create an ASP.NET MVC  project in Visual Studio 2022.
    Add the CanvasJs JavaScript file link in your View from here.
    Now, add the JavaScript code to your View.
    Map the API data with the Chart data points and store it in the ViewBag.
    Use ViewBag data inside JavaScript code.

Conclusion
In this way, you can add charts to your ASP.NET MVC project. The most important part is mapping the API data to the chart data points so that you can easily store that into ViewBag. Then, you can use it inside JavaScript code.