Adding a view for the home controller

You need to create a view for the home controller's Index action in order to test the template. Complete the following steps to accomplish this:

  1. Open the HomeController.cs file and, if the HomeController class does not already contain an Index action method, add it as shown here:
            public IActionResult Index() 
        { 
            return View(); 
        }
  2. Next, right-click on the ViewsHome folder and Add | New Item... from the context menu.
  3. Select MVC View Page from the list of project items, make sure the name is Index.cshtml, and click on Add:
    Adding a view for the home controller
  4. Open the newly created Index.cshtml file and change its markup to the following:
            <p class="hidden-md-up"> 
            <button type="button" class="btn btn-primary-outline btn-sm" 
             data-toggle="offcanvas"><i class="fa fa-chevron-left"></i>         
        Menu</button> 
        </p> 
        <h1 class="display-1 hidden-xs-down"> 
            Bootstrap 4 Dashboard 
        </h1> 
        <p class="lead">(with off-canvas sidebar, based on BS v4 alpha)</p> 
        <div class="row"> 
            <div class="col-md-3 col-sm-6"> 
                <div class="card card-inverse card-success"> 
                    <div class="card-block bg-success"> 
                        <div class="rotate"> 
                            <i class="fa fa-user fa-5x"></i> 
                        </div> 
                        <h6 class="text-uppercase">Users</h6> 
                        <h1 class="display-1">134</h1> 
                    </div> 
                </div> 
            </div> 
            <div class="col-md-3 col-sm-6"> 
                <div class="card card-inverse card-danger"> 
                    <div class="card-block bg-danger"> 
                        <div class="rotate"> 
                            <i class="fa fa-list fa-4x"></i> 
                        </div> 
                        <h6 class="text-uppercase">Posts</h6> 
                        <h1 class="display-1">87</h1> 
                    </div> 
                </div> 
            </div> 
            <div class="col-md-3 col-sm-6"> 
                <div class="card card-inverse card-info"> 
                    <div class="card-block bg-info"> 
                        <div class="rotate"> 
                            <i class="fa fa-twitter fa-5x"></i> 
                        </div> 
                        <h6 class="text-uppercase">Tweets</h6> 
                        <h1 class="display-1">125</h1> 
                    </div> 
                </div> 
            </div> 
            <div class="col-md-3 col-sm-6"> 
                <div class="card card-inverse card-warning"> 
                    <div class="card-block bg-warning"> 
                        <div class="rotate"> 
                            <i class="fa fa-share fa-5x"></i> 
                        </div> 
                        <h6 class="text-uppercase">Shares</h6> 
                        <h1 class="display-1">36</h1> 
                    </div> 
                </div> 
            </div> 
        </div>
  5. Run the project, and you should see the home view and layout in your browser:
    Adding a view for the home controller
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.141.199.56