So far, we have configured Angular and developed few components that are shared and related to the service request. We will have three controllers to show the home page, user features, and service request.

Add the MVC HomeController in the Controllers folder and add a default Index action method, as follows:

    public class HomeController : Controller 
    { 
        // GET: /<controller>/ 
        public IActionResult Index() 
        { 
            return View(); 
        } 
    }

In our Startup class, our default routing will be set to the home controller. Therefore, this is the main landing page for displaying single-page templates.

Then, in the Index.cshtml page, we will add our tenant-mgmt selector, as shown next:

    <tenant-mgmt><img src="~/images/loading.gif" /></tenant-mgmt>

This selector will render our Feature/Index partial view, which we will define next.

Add a FeatureController under the Controllers folder and add following action methods:

    public class FeatureController : Controller 
    { 
        public IActionResult Index() 
        { 
            return PartialView(); 
        } 

        public IActionResult Menu() 
        { 
            return PartialView(); 
        } 

    }

The following is index view snippet of the FeatureController contains the message selector and router-outlet to render the template:

    <div class="row"> 
      <div style="padding:10px 0px 0px 30px" > 
        <messages></messages> 
        <router-outlet></router-outlet> 
      </div> 
    </div>

Here is the Menu view of FeatureController, which shows tiles when the home page is accessed:

    <div class="row"> 
      <div class="col-md-7 col-sm-10 center-block floatnone"> 
        <div class="col-sm-3 categoryBox"> 
            <a [routerLink]="['/createServiceRequest']" 
              class="CreateServiceRequest"> 
                <span class="icon"> 
                    <i class='fa fa-CreateServiceRequest'></i> 
                </span> 
                <span class="name">Create ServiceRequest</span> 
            </a> 
        </div> 
        <div class="col-sm-3 categoryBox"> 
            <a href='#' class="ViewServiceRequest"> 
                <span class="icon"> 
                    <i class='fa fa-ViewServiceRequest'></i> 
                </span> 
                <span class="name">View ServiceRequests</span> 
            </a> 
        </div> 
        <div class="col-sm-3 categoryBox"> 
            <a href='#' class="AssignWorker"> 
                <span class="icon"> 
                    <i class='fa fa-AssignWorker'></i> 
                </span> 
                <span class="name">Assign Worker</span> 
            </a> 
        </div> 
        <div class="col-sm-3 categoryBox"> 
            <a href='#' class="WorkersManagement"> 
                <span class="icon"> 
                    <i class='fa fa-WorkersManagement'></i> 
                </span> 
                <span class="name">Workers Management</span> 
            </a> 
        </div> 

      </div> 
    </div>

Next, we will develop a Create ServiceRequest page and add TenantController.

The following is the code of TenantController:

    public class TenantController : Controller 
    { 
        public IActionResult Create() 
        { 
            return PartialView(); 
        } 

    }

Create .cshtml of TenantController as shown next:

    <div class="row"> 
      <div style="padding:5px 0px 0px 30px" 
        class="col-lg-12 col-md-12 col-sm-12"> 
          <div class="form-group"> 
            <h3>Enter Service Request:</h3> 
          </div> 
          <form (ngSubmit)="onSubmit(serviceForm)"
            #serviceForm="ngForm"> 
            <div class="form-group"> 
              <label for="name1">Enter Complaint:</label> 
              <textarea rows="8" cols="800" maxlength="200" 
                class="form-control" id="description" 
                name="description" ngModel></textarea> 
                @*<div *ngIf="formErrors.description"
                  class="smallthin"> 
                  {{ formErrors.description }} 
                </div>*@ 
            </div> 
            <div class="form-group"> 
              <button type="submit" style="float:left;" 
                class="btn btn-success" [disabled]="disable">
                <i class="fa fa-check"></i>
                Send Request</button> 
            </div> 
           </form> 
      </div> 
    </div>

When we click on the Create ServiceRequest tile, the following page will be displayed and will show a simple textbox to enter the complaint: