How To Open BootStrap Model when User Click On Edit Button?

Question

Database Field Name:

• empid int pk auto increment
• empname varchar(50)
• empsalary varchar(50)
• empage int 

I want to open a bootstrap model when user click on edit button then open the edit view see my console logs:

plzz help ?

I create an edit partial view see code

Code:

HomeController.cs

public class HomeController : Controller
    {
        empEntities _dbcontext = new empEntities();

        public ActionResult Index()
        {
           return View(_dbcontext.empls.ToList());
        }

        public ActionResult Edit(int empid)
        {
            var id = _dbcontext.empls.Find(empid);
            return View();
        }

        [HttpPost]
        public ActionResult Edit(empl empobj)
        {
            var recordfind = _dbcontext.empls.Find(empobj.empid);

            recordfind.empname = empobj.empname;
            recordfind.empsalary = empobj.empsalary;
            recordfind.empage = empobj.empage;

            _dbcontext.SaveChanges();
            return View();
        }
    }

Index.cshtml

@model IEnumerable<DatabasefirstApproach.empl>

<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />
<script src="~/scripts/jquery-3.4.1.min.js"></script>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.empname)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.empsalary)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.empage)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.empname)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.empsalary)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.empage)
            </td>
            <td>
                <button class="btn btn-primary " id="btn-edit-employ" data-id="@item.empid">Edit</button>

                @Html.ActionLink("Details", "Details", new { id = item.empid }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.empid })
            </td>
        </tr>
    }

</table>

<script>
        $(document).ready(function () {
            $('#btn-edit-employ').click(function () {
                debugger
                var empid = $('#btn-edit-employ').attr('data-id');
                var url = 'Home/Edit/' + empid;

                data: "{empname:'" + $("#item.empname").val() + "',empsalary:'" + $("#item.empsalary").val() + "',empage:'" + $("#item.empage").val() + "'}",
                function (data) {

                    $("#item.empname").val(empname);
                    $("#item.empsalary").val(empsalary);
                    $("item.empage").val(empage);
                }
                console.log("document loads 1");
            });
            console.log("document loads 2");
        });
</script>
//edit view is a partial view

Edit.cshtml

@model DatabasefirstApproach.empl

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div @*class="form-horizontal"*@ class="modal fade" id="mod-edit-emp">
        <h4>empl</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.empid)

        <div class="form-group">
            @Html.LabelFor(model => model.empname, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.empname, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.empname, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.empsalary, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.empsalary, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.empsalary, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.empage, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.empage, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.empage, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}

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

I want to open the BootStrap Model When the user click on the edit button??

 

My empid is fetch when I click on Edit Button but my Edit view is Not open??

 

Edit view is a partial view. empid is fetched when I click on edit button but my edit partial view is not open ??

 

see browser logs:

 

 

How to open edit view when click on the edit button?

 

plz help??