Introduction To Editing Application in MVC5

Introduction

In this article, I am introducing you to adding information in Edit, Details and Delete links. As I described in my earlier article of how to add a new property. So now in here you will learn to add information related to the property in an Edit link, Details link and Delete link.

In that context, we need to change some code in the following files:

• Edit.cshtml file
• Details.cshtml file
• Delete.cshtml file

Update in Edit link

As you can see in the following image that the new property named Grade that is present in the Index page, isn't present when the user clicks on the Edit link, because we didn't change the Edit.cshtml file.

Click on the Edit link.

So, let's start with the following procedure.

Step 1: Select the Edit.cshtml file from the Solution Explorer.

Step 2: Change your code with the following code. I have added some extra code in my previous code:

<h2>Edit</h2>
@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    <fieldset class="form-horizontal">
        <legend>Cricketer</legend>
        @Html.HiddenFor(model => model.ID)
        <div class="control-group">
            @Html.LabelFor(model => model.Name, new { @class = "control-label" })
                     <div class="controls">
                           @Html.EditorFor(model => model.Name)
                           @Html.ValidationMessageFor(model => model.Name, null, new { @class = "help-inline" })
                     </div>
              </div>
        <div class="control-group">
            @Html.LabelFor(model => model.ODI, new { @class = "control-label" })
                     <div class="controls">
                           @Html.EditorFor(model => model.ODI)
                           @Html.ValidationMessageFor(model => model.ODI, null, new { @class = "help-inline" })
                     </div>
              </div>
        <div class="control-group">
            @Html.LabelFor(model => model.Test, new { @class = "control-label" })
                     <div class="controls">
                           @Html.EditorFor(model => model.Test)
                           @Html.ValidationMessageFor(model => model.Test, null, new { @class = "help-inline" })
                     </div>
              </div>
        <div class="control-group">
            @Html.LabelFor(model => model.Grade, new {@class = "control-label" })
            <div class="controls">
                @Html.EditorFor(model=>model.Grade)
                @Html.ValidationMessageFor(model => model.Grade, null, new { @class="help-inline" })
            </div>
        </div>
        <div class="form-actions no-color">
            <input type="submit" value="Save" class="btn" />
        </div>
    </fieldset>
}

Step 3: Debug your application.

Step 4: Click on the Edit link.

You can now see that the Grade field is present on the Edit Page.

Update in Details link

As you can see in the following image, the new property named Grade in the Index page, isn't present when a user clicks on the Details link, because we didn't change the Details.cshtml file.

Click on the Details link.

So, let's start with the following procedure.

Step 1: Select the Details.cshtml file from the Solution Explorer.

Step 2: Change your code with the following code. I have added some extra code in my previous code:

<h2>Details</h2>
<fieldset>
       <legend>Cricketer</legend>
       <dl>
              <dt>
                     @Html.DisplayNameFor(model => model.Name)
              </dt>
              <dd>
                     @Html.DisplayFor(model => model.Name)
              </dd>
              <dt>
                     @Html.DisplayNameFor(model => model.ODI)
              </dt>
              <dd>
                     @Html.DisplayFor(model => model.ODI)
              </dd>
              <dt>
                     @Html.DisplayNameFor(model => model.Test)
              </dt>
              <dd>
                     @Html.DisplayFor(model => model.Test)
              </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Grade)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Grade)
        </dd>
       </dl>
</fieldset>

Step 3: Debug your application.

Step 4: Click on the Details link.

You can now see that the Grade field is present on the Details Page.

Update in Delete link

As you can see in the following image, the new property named Grade in the Index page, isn't present when a user clicks on the Delete link, because we didn't change the Delete.cshtml file.

Click on the Delete link.

So, let's start with the following procedure.

Step 1: Select the Delete.cshtml file from the Solution Explorer

Step 2: Change your code with the following code. I have added some extra code in my previous code:

<h3>Are you sure you want to delete this?</h3>
<fieldset>
    <legend>Cricketer</legend>
       <dl>
              <dt>
                     @Html.DisplayNameFor(model => model.Name)
              </dt>
              <dd>
                     @Html.DisplayFor(model => model.Name)
              </dd>
              <dt>
                     @Html.DisplayNameFor(model => model.ODI)
              </dt>
              <dd>
                     @Html.DisplayFor(model => model.ODI)
              </dd>
              <dt>
                     @Html.DisplayNameFor(model => model.Test)
              </dt>
              <dd>
                     @Html.DisplayFor(model => model.Test)
              </dd>
        <dt>
            @Html.DisplayNameFor(model=>model.Grade)
        </dt>
        <dd>
            @Html.DisplayFor(model=>model.Grade)
        </dd>
       </dl>
</fieldset>

Step 3: Debug your application.

Step 4: Click on the Delete link.

You can now see that the Grade field is present on the Delete Page.

Summary

This article will help you to add information in Edit, Details and Delete pages because the new property that has been added in the Create page is not present in the Edit, Details and Delete page. I didn't change the Edit.cshtml, Details.cshtml and Delete.cshtml files previously. Now, you have the complete updated ASP.NET MVC Application which will definitely help you.

Thanks for reading my article.