Razor With Angular Cocktail

Use Angular JS code inside Razor view in MVC.

Hi guys, have you ever tried mixing Angular JS with Razor? You may not need it? Ok but you may get benefits from it. Let’s take a look.

In this listing we have MVC view written in Razor with HTML tags and here we may add Angular dressing to it.

@model IEnumerable<EmployeeRepository.Models.Department>

@{
    ViewBag.Title = "Index";
}
<script src="~/APPSCRIPTS/angular.min.js"></script>
<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

<div ng-app="NGapp" ng-controller="NGcontroller">
    <script>
        var app = angular.module("NGapp", []);
        app.controller("NGcontroller", function ($scope) {

            $scope.depts = [];


            @foreach(var element in Model)
            {
                <text> $scope.depts.push({ id: '@element.DepartmentID',name: '@element.DepartmentName'});  </text>
            }

        });

    </script>
    Search Departments: <input type="text" ng-model="searchDepartment" /><br />
    <br />
    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.DepartmentName)
            </th>
            <th></th>
        </tr>
        <tr ng-repeat="dept in depts | filter:searchDepartment">
            <td>{{dept.name}}</td>
            <td>
                <a href="@HttpContext.Current.Request.RequestContext.RouteData.Values["controller"].ToString()/Edit/{{dept.id}}">Edit</a> |
                <a data-ng-href="@Url.Action("Details", "Department")/{{dept.id}}" >Details </a> |
                <a data-ng-href="@Url.Action("Delete", "Department")/{{dept.id}}">Delete </a>
            </td>
        </tr>

    </table>


    <hr />
    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.DepartmentName)
            </th>
            <th></th>
        </tr>

        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.DepartmentName)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.DepartmentID }) |
                    @Html.ActionLink("Details", "Details", new { id = item.DepartmentID }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.DepartmentID })
                </td>
            </tr>
        }

    </table>

</div>

The first highlighted block: 

@foreach(var element in Model)
            {
                <text> $scope.depts.push({ id: '@element.DepartmentID',name: '@element.DepartmentName'});  </text>
            }

        });

Using foreach clause of Razor we iterate through Model (the list of departments), in each iteration we use push method to add department id and name to Angular array object.

 

And we use HTML text input used as a filter using ng-model="searchDepartment". 

Search Departments: <input type="text" ng-model="searchDepartment" /><br />

And last we have this piece of code to add links and list departments exactly as Razor does.

<tr ng-repeat="dept in depts | filter:searchDepartment">
    <td>{{dept.name}}</td>
    <td>
        <a href="@HttpContext.Current.Request.RequestContext.RouteData.Values["controller"].ToString()/Edit/{{dept.id}}">Edit</a> |
        <a data-ng-href="@Url.Action("Details", "Department")/{{dept.id}}" >Details </a> |
        <a data-ng-href="@Url.Action("Delete", "Department")/{{dept.id}}">Delete </a>

Using ng-repeat with filter expression to list department names and then a column for the action links, notice here, we use two different kinds of getting the controller name.

@HttpContext.Current.Request.RequestContext.RouteData.Values["controller"].ToString()/Edit/{{dept.id}}">Edit

This is a way to get the controller name and below is another one.

<a data-ng-href="@Url.Action("Details", "Department")/{{dept.id}}" >Details

I see the second one is pretty easier and of course; it is up to you.

 

Note - Using this way; Angular with Razor you may avoid what is so-called (circular reference exception) if you have master-details relationship scaffolded by MVC, you may have employees in each department, so keep attention if you use a reference to (department.employees) in your code. In this view you don’t need to have a reference to a list of employees inside the department, but by using department ID , you may get another view display this list of employees or even another Angular array to load this list.