Razor Syntax

Whenever we create a View with .cshtml extension, then View is called as Razor View. In Razor View, we can use C# and html together.

Now I will create a view and pass data dynamically to the view and use Razor syntax to display that data. I have created an action method CustomerDetails() in Home Controller and pass data to view using ViewBag.

ViewBag
ViewBag is used to pass data from Controller to View. ViewBag is a dynamic object. In action method, data is assigned to ViewBag and it is retrieved from ViewBag in View to display it on UI.

Below is the syntax for assigning data in ViewBag :

     public ActionResult CustomerDetails()
      {
            ViewBag.CustomerId = 90;
            ViewBag.CustomerName = "Anil Gupta";
            ViewBag.OrderAmount = 400000;
            return View();
        }

In above code, I have assigned CustomerId, CustomerName and OrderAmount in ViewBag. This action method will return a CustomerDetails View.
Below is the complete Controller code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCApplication.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult About()
        {
            return View();
        }
        public ActionResult Contact()
        {
            return View();
        }
        public ActionResult GetCustomerName(int customerid)
        {
            string customerName = string.Empty;
            var customers = new[] {
                new{ CustomerId=90,CustomerName="Ayush Kumar"},
                new{ CustomerId=91,CustomerName="Utkarsh Singh"},
                new{ CustomerId=92,CustomerName="Mohit Gupta"},
                new{ CustomerId=93,CustomerName="Akshat Kumar"}
            };

            foreach (var customer in customers)
            {
                if (customer.CustomerId == customerid)
                {
                    customerName = customer.CustomerName;
                }
            }
            //return new ContentResult() 
           { Content = customerName, ContentType = "text/plain" };
            return Content(customerName, "text/plain");
        }
       public ActionResult CustomerDetails()
        {
            ViewBag.CustomerId = 90;
            ViewBag.CustomerName = "Anil Gupta";
            ViewBag.OrderAmount = 400000;
            return View();
        }

    }
}

Now I will add CustomerDetails view. Right Click on CustomerDetails() action method and select Add View. Provide View name and click on Add. You can see my article First MVC Application to learn View creation.

HTML is copied from Index View in CustomerDetails view, you have already seen Index view in my article First MVC Application.

Below is the complete HTML of CustomerDetails view along with code for displaying ViewBag data in View:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.4.1.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
    <script src="~/Scripts/umd/popper.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
</head>
<body>
    <nav class="navbar navbar-expand-sm bg-info navbar-dark">
        <a class="navbar-brand" href="#">Logixn</a>
        <div class="col-8">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="/home/index">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/home/about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/home/contact">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="container-fluid">
        <div class="jumbotron">
            <table class="table" style="width:400px;">
                <tr>
                    <td>Customer Id</td>
                    <td>@ViewBag.CustomerId</td>
                </tr>
                <tr>
                    <td>Customer Name</td>
                    <td>@ViewBag.CustomerName</td>
                </tr>
                <tr>
                    <td>Order Amount </td>
                    <td>@ViewBag.OrderAmount</td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

In above view , please see code @ViewBag.CustomerId. In order to render data from ViewBag, I have used @ symbol.This @ symbol is part of razor syntax.
CustomerId property in view should be same as CustomerId property defined in action method while assigning to ViewBag. If there is any spelling mismatch then data will not be displayed.

Now start debugging and type below URL in browser address bar and press enter key (port 53204 will be different on your machine):
http://localhost:53204/Home/CustomerDetails

Below is the output:

Razor Code Blocks
When we need to write multiple lines of C# code in view then we have to use Razor code blocks. We can use multiple Razor code blocks at any place in view.

For example based on OrderAmount , you have to decide shipping charges. If OrderAmount is more that 200000 then shipping charges are not applicable.
For deciding shipping charges we have to use Razor code block in view:

@{ 
        decimal shippingCharges;
        if (ViewBag.OrderAmount > 200000)
        {
            shippingCharges = 0;
        }
        else
        {
            shippingCharges = 1000;
        }
    }
    <div class="container-fluid">
        <div class="jumbotron">
            <table class="table" style="width:400px;">
                <tr>
                    <td>Customer Id</td>
                    <td>@ViewBag.CustomerId</td>
                </tr>
                <tr>
                    <td>Customer Name</td>
                    <td>@ViewBag.CustomerName</td>
                </tr>
                <tr>
                    <td>Order Amount </td>
                    <td>@ViewBag.OrderAmount</td>
                </tr>
                <tr>
                    <td>Shipping Charges </td>
                    <td>@shippingCharges</td>
                </tr>
            </table>
        </div>
    </div>

Start debugging , below is the output:

Below is the complete code of CustomerDetails View :

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.4.1.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
    <script src="~/Scripts/umd/popper.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
</head>
<body>
    <nav class="navbar navbar-expand-sm bg-info navbar-dark">
        <a class="navbar-brand" href="#">Logixn</a>
        <div class="col-8">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="/home/index">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/home/about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/home/contact">Contact</a>
                </li>

            </ul>
        </div>

    </nav>
    @{ 
        decimal shippingCharges;
        if (ViewBag.OrderAmount > 200000)
        {
            shippingCharges = 0;
        }
        else
        {
            shippingCharges = 1000;
        }
    }
    <div class="container-fluid">
        <div class="jumbotron">
            <table class="table" style="width:400px;">
                <tr>
                    <td>Customer Id</td>
                    <td>@ViewBag.CustomerId</td>
                </tr>
                <tr>
                    <td>Customer Name</td>
                    <td>@ViewBag.CustomerName</td>
                </tr>
                <tr>
                    <td>Order Amount </td>
                    <td>@ViewBag.OrderAmount</td>
                </tr>
                <tr>
                    <td>Shipping Charges </td>
                    <td>@shippingCharges</td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>