MyContactBook : Part 5 - Create Page for Show Contact Details

Steps :
Step-1: Add new action into your controller for Show Contact Details.

Here I have added "View" Action into "Home" Controller. Please write this following code for the Action

            public ActionResult View(int id)
            {
                // This action is for show contact details of a selected contact
                // Before that we have used ViewModel, now we will extend Contact Class for add Country & State Name field 
                Contact c = null;
                c = GetContact(id);
                return View(c);
            }
        
Step-2: Add a new class (partial) for add some additional fields to the Contact Model

Here I have added a folder Named "ExtendedClass" to the root and Added a partial class here for add 2 additional fields (CountryName, StateName) to the Contact Model. Write following code to the class.

Changed the namespace to Application Namespace of the class
            
            namespace MVCContactBook
            {
                public partial class Contact
                {
                    public string CountryName { get; set; }
                    public string StateName { get; set; }
                }
            }
        
Step-3: Add a function for Fetch Contact Details from database.

Here I have added a function for fetch Contact Details from database as We have to fetch this information multiple time. Write following code.

            
            namespace MVCContactBook
            {
                public partial class Contact
                {
                    public string CountryName { get; set; }
                    public string StateName { get; set; }
                }
            }
        
Step-4: Add view for the Action ("View" Action) & design the form for show contact details.
Html Code
            @model MVCContactBook.Contact
            @{
                ViewBag.Title = "View";
            }
            @* Here I will not use this generated templete, I will create a partial view for show contact details as we need to use this templete 
                multiple time *@

            @Html.Partial("_ContactDetails")
         

You can see here I have used a Partial View "_ContactDetails" for Reusable. So we have to create this partial view.

Step-5: Create a partial view for Show Contact Details

Here I have added a partial view named _ContactDetails into Shared Folder. Write this following code

Html Code of Partial View
            
            @model MVCContactBook.Contact
            @{
                ViewBag.Title = "Contact Details";
            }

            <h4>Contact Details</h4>
            @* I will modify this html for make make it responsive, it is optional *@
            <div class="row">
                <div class="col-sm-6">
                    <table class="table table-responsive">
                        <tr>
                            <td>@Html.DisplayNameFor(model => model.ContactPersonFname)</td>
                            <td>@Html.DisplayFor(model => model.ContactPersonFname)</td>
                        </tr>
                        @* In the same way I will add all *@
                        <tr>
                            <td>@Html.DisplayNameFor(model => model.ContactPersonLname)</td>
                            <td>@Html.DisplayFor(model => model.ContactPersonLname)</td>
                        </tr>
                        <tr>
                            <td>@Html.DisplayNameFor(model => model.ContactPersonLname)</td>
                            <td>@Html.DisplayFor(model => model.ContactPersonFname)</td>
                        </tr>
                        <tr>
                            <td>@Html.DisplayNameFor(model => model.ContactNo1)</td>
                            <td>@Html.DisplayFor(model => model.ContactNo1)</td>
                        </tr>
                        <tr>
                            <td>@Html.DisplayNameFor(model => model.ContactNo2)</td>
                            <td>@Html.DisplayFor(model => model.ContactNo2)</td>
                        </tr>
                        <tr>
                            <td>@Html.DisplayNameFor(model => model.ContactNo1)</td>
                            <td>@Html.DisplayFor(model => model.ContactNo1)</td>
                        </tr>
                        <tr>
                            <td>@Html.DisplayNameFor(model => model.EmailID)</td>
                            <td>@Html.DisplayFor(model => model.EmailID)</td>
                        </tr>
                        <tr>
                            <td>Country</td>
                            <td>@Html.DisplayFor(model => model.CountryName)</td>
                        </tr>
                        <tr>
                            <td>State</td>
                            <td>@Html.DisplayFor(model => model.StateName)</td>
                        </tr>
                        <tr>
                            <td>Address</td>
                            <td>@Html.DisplayFor(model => model.Address)</td>
                        </tr>
                    </table>
                </div>
                <div class="col-sm-6">
                    <div style="display:@(string.IsNullOrEmpty(Model.ImagePath)?"none":"block")">&nbsp;
                        <img src="/image/@Model.ImagePath" alt="image" style="width:100%; max-width:300px" />
                    </div>
                </div>
            </div>
        
Step-6: Run Application.
MyContactBook : Part 5 - Create Page for Show Contact Details
Posted By :