Adding different page views

Next, you'll create a custom view that displays two cards, one with a simple Bootstrap form and another displaying an image, by completing the following steps:

  1. Add a new empty MVC Controller Class called FormsController.cs to the project's Controllers folder.
  2. The new controller class should already contain an Index action method.
  3. Next, add a new folder called Forms inside the Views folder.
  4. Add a new MVC View Page, called Index.cshtml, to the newly created Forms folder.
  5. Add the following markup to the view:
            <div class="row"> 
            <h1>Forms</h1> 
            <div class="col-md-3"> 
                <form> 
                    <div class="card card-success" style="max-width: 20rem;"> 
                        <div class="card-header"> 
                            First Panel with simple form 
                        </div> 
                        <div class="card-block"> 
                            <fieldset class="form-group"> 
                                <label for="fullName">Full name</label> 
                                <input type="text" class="form-control" 
                                id="fullName" placeholder="Your full name"> 
                            </fieldset> 
                            <fieldset class="form-group"> 
                                <label for="bio">Full name</label> 
                                <textarea class="form-control" id="bio" 
                                 rows="3"></textarea> 
                            </fieldset> 
                        </div> 
                        <div class="card-footer"> 
                            <button type="submit" class="btn btn-danger">
                        Save</button> 
                        </div> 
                    </div> 
                </form> 
            </div>  
            <div class="col-md-3"> 
                <div class="card card-primary" style="max-width: 20rem;"> 
                    <div class="card-header"> 
                        Second card 
                    </div> 
                    <div class="card-block"> 
                        <img src="http://placehold.it/265x150"/> 
                    </div>              
                </div> 
            </div> 
        </div>
  6. Finally, you need to change the left-hand side navigation menu to include a link to the view you've just added. To accomplish this, complete the following steps:
  7. Open the _Layout.cshtml file inside the ViewsShared folder.
  8. Find the following line of code inside the file:
            <li class="nav-item"><a class="nav-link" href="#">Reports</a></li>
  9. Replace the preceding line with the following:
            <li class="nav-item"><a class="nav-link" asp-controller="Forms"         
        asp-action="Index">Forms</a></li>
  10. In the preceding code, the asp-* Tag Helpers were used to specify the controller and action for the <a> element. When the user clicks on the Forms menu item, they will be shown the form view you created earlier.
    Adding different page views
..................Content has been hidden....................

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