In MVC coding you need to access and use elements properties for the text editing updation and displaying information.

For this we need either one of the thing

1  The Id of the element

2 The name of the element

Id and name is used to access the element by which the properties can be accessed and change by the programmer.

It is better to create the dynamic Id or name for the element that will make things dynamic in your programming.

@model IEnumerable<MVC_Demo.Models.EmployeeModel>

@{
    ViewBag.Title = "Index";
}
@{ var i = 1;}
@using (Html.BeginForm("RegisterEmployeeDetails", "Register", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()

<h2>Index</h2>




<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.EmpId)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.FirstName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.MiddleName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.LastName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.PhoneNo)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Address)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.msg)
        </th>
        <th></th>
    </tr>
   
@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.EmpId,new { id="lbl"+i})
            @Html.TextBoxFor(modelItem => item.EmpId,"", new {id="txt"+i,style="display:none;"})
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.FirstName, new { id = "lbl"+i })
            @Html.TextBoxFor(modelItem => item.FirstName,"", new { id = "txt"+i, style = "display:none;" })
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.MiddleName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.LastName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.PhoneNo)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Address)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.msg)
        </td>
        <td>
            @*<a href="javascript:void(0);" id=i onclick="Edit(this);">Edit</a>*@
            @Html.ActionLink("Edit", "","", new { id=i, onclick="Edit(this);" }) |
            @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
        </td>
    </tr>
    i = i + 1;
}

</table>

}


<script>
    function Edit(i)
    {
        var a = i.id;
        $("#lbl" + a).hide();
        $("#txt" + a).show();
    }
</script>

For this, we need to make the loop for generating the dynamic Id for the element.