Example of Create , delete , Edit and View the data in Asp.net MVC Step by Step using Code First Approach

Dear Student ,

   If You want to create a Sign Up Form and Delete , Edit and View your all data in as a list format using Code First Approach. So Please Follow the Step by step Process...

Step 1 :

   Create your Model Class as per your requirements attributes but mention one things that Insert One primary key using [Key] keywords

Step 2 :

  Create one more class in Model For DbContext Class

Step 3:

Go to Controller Folder and Create a empty Controller

Step 4 :

 Create a Your own Action result For inserting the data ..

Step 5 :

 Go to Create action Method and right click add a view

@model Database_Connection.Models.Customers

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Customers</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.C_Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.C_Name)
            @Html.ValidationMessageFor(model => model.C_Name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.C_Address)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.C_Address)
            @Html.ValidationMessageFor(model => model.C_Address)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.C_Mobile_No)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.C_Mobile_No)
            @Html.ValidationMessageFor(model => model.C_Mobile_No)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.C_Email_Id)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.C_Email_Id)
            @Html.ValidationMessageFor(model => model.C_Email_Id)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Step 6 :

Create one more action method for View you Data as list view 

Step 7 :

Create a view for Index Action Result for View the data

@model IEnumerable<Database_Connection.Models.Customers>

@{

    ViewBag.Title = "Index";

}

<h2>Index</h2>

<p>

    @Html.ActionLink("Create New", "Create")

</p>

<table>

    <tr>

        <th>

            @Html.DisplayNameFor(model => model.C_Name)

        </th>

        <th>

            @Html.DisplayNameFor(model => model.C_Address)

        </th>

        <th>

            @Html.DisplayNameFor(model => model.C_Mobile_No)

        </th>

        <th>

            @Html.DisplayNameFor(model => model.C_Email_Id)

        </th>

        <th></th>

    </tr>

@foreach (var item in Model) {

    <tr>

        <td>

            @Html.DisplayFor(modelItem => item.C_Name)

        </td>

        <td>

            @Html.DisplayFor(modelItem => item.C_Address)

        </td>

        <td>

            @Html.DisplayFor(modelItem => item.C_Mobile_No)

        </td>

        <td>

            @Html.DisplayFor(modelItem => item.C_Email_Id)

        </td>

        <td>

            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |

            @Html.ActionLink("Details", "Details", new { id=item.Id }) |

            @Html.ActionLink("Delete", "Delete", new { id=item.Id })

        </td>

    </tr>

}

</table>

Step 8 :

Create one more action method for delete the data from database 

Step 9 :

  Create a view for delete the data from data base 

@model Database_Connection.Models.Customers

@{

    ViewBag.Title = "Delete";

}

<h2>Delete</h2>

<h3>Are you sure you want to delete this?</h3>

<fieldset>

    <legend>Customers</legend>

    <div class="display-label">

         @Html.DisplayNameFor(model => model.C_Name)

    </div>

    <div class="display-field">

        @Html.DisplayFor(model => model.C_Name)

    </div>

    <div class="display-label">

         @Html.DisplayNameFor(model => model.C_Address)

    </div>

    <div class="display-field">

        @Html.DisplayFor(model => model.C_Address)

    </div>

    <div class="display-label">

         @Html.DisplayNameFor(model => model.C_Mobile_No)

    </div>

    <div class="display-field">

        @Html.DisplayFor(model => model.C_Mobile_No)

    </div>

    <div class="display-label">

         @Html.DisplayNameFor(model => model.C_Email_Id)

    </div>

    <div class="display-field">

        @Html.DisplayFor(model => model.C_Email_Id)

    </div>

</fieldset>

@using (Html.BeginForm()) {

    <p>

        <input type="submit" value="Delete" /> |

        @Html.ActionLink("Back to List", "Index")

    </p>

}

Step 10:

Create one more Action method for Edit the information from Database 

Step 11 :

 Create a view form Editing the data from Database 

@model Database_Connection.Models.Customers

@{

    ViewBag.Title = "Edit";

}

<h2>Edit</h2>

@using (Html.BeginForm()) {

    @Html.ValidationSummary(true)

    <fieldset>

        <legend>Customers</legend>

        @Html.HiddenFor(model => model.Id)

        <div class="editor-label">

            @Html.LabelFor(model => model.C_Name)

        </div>

        <div class="editor-field">

            @Html.EditorFor(model => model.C_Name)

            @Html.ValidationMessageFor(model => model.C_Name)

        </div>

        <div class="editor-label">

            @Html.LabelFor(model => model.C_Address)

        </div>

        <div class="editor-field">

            @Html.EditorFor(model => model.C_Address)

            @Html.ValidationMessageFor(model => model.C_Address)

        </div>

        <div class="editor-label">

            @Html.LabelFor(model => model.C_Mobile_No)

        </div>

        <div class="editor-field">

            @Html.EditorFor(model => model.C_Mobile_No)

            @Html.ValidationMessageFor(model => model.C_Mobile_No)

        </div>

        <div class="editor-label">

            @Html.LabelFor(model => model.C_Email_Id)

        </div>

        <div class="editor-field">

            @Html.EditorFor(model => model.C_Email_Id)

            @Html.ValidationMessageFor(model => model.C_Email_Id)

        </div>

        <p>

            <input type="submit" value="Save" />

        </p>

    </fieldset>

}

<div>

    @Html.ActionLink("Back to List", "Index")

</div>

@section Scripts {

    @Scripts.Render("~/bundles/jqueryval")

}