مشكلة في البرنامج النصي والعرض الجزئي

مرحبًا

أحاول إنشاء عرض من:

التفاصيل الرئيسية باستخدام ASP.NET MVC[^]

وكان كل شيء يسير على ما يرام حتى بدأت في تنفيذ جزء Ajax من الحل

وحدة التحكم الخاصة بي تعمل بشكل جيد حيث أتلقى المعرف والعرض الجزئي مع ظهور تفاصيل الموظف ولكن من المفترض أن تظهر في الغوص المسمى “EmployeeDetails” بدلاً من ذلك أقوم بإعادة التوجيه إلى الموظف/تفاصيل الموظف/المعرف

لقد لاحظت على Firebug في وحدة التحكم أنني تلقيت تحذيرًا:

[12:09:17.597] Use of getPreventDefault() is deprecated.  Use defaultPrevented instead. @ http://localhost/Scripts/jquery-2.0.3.js:4923

هل يرى أحد أي أخطاء قد ارتكبتها، فأنا أبحث في الكود ولكن لا شيء؛/

يجب أن يظهر العرض الجزئي في نفس الصفحة كأحد الحلول ولكن ليس فقط يعيد توجيهي إلى صفحة جديدة دون تطبيق أي نمط CSS كعرض جزئي فقط

<section id="EmployeemasterList" class="float-left">
    <table>
        @foreach (var item in Model.Employee)
        {
        <tr>
            <td>
                <div>
                    <h1>@item.FullName</h1>
                    <ul>
                        <li>@item.Shift.Name</li>
                        <li>@item.City</li>
                        <li>@Html.ActionLink("Details", "EmployeeDetails",
                        new { id = item.EmployeeID },
                        new { @class = "employee-details"})</li>
                    </ul>
                </div>
            </td>
        </tr>
        }
   </table>   
</section>

<div id="EmployeeDetails"></div>


@section scripts {
    <script>
    $(function () {
        $('.employee-details').on('click', function (e) {
            $.get($(this).prop('href'), function (response) {
                $('#EmployeeDetails').html(respnse)
            });
            e.defaultPrevented();
        });


    });
</script>
    }

وهذا هو الجزء من وحدة التحكم الذي أستخدمه في حالة وجود خطأ هنا

public ActionResult EmployeeDetails(int? id = null)
     {
         Employee employee = db.Employees.Find(id);
         if (employee == null)
         {
             return HttpNotFound();
         }
         return PartialView("_EmployeeDetails", employee);
     }

هذه هي بداية العرض الجزئي ونهايته، كما أقوم بإضافة البرنامج النصي في النهاية في حالة تغيير شيء ما ولكن النتيجة به أو بدونه هي نفس العرض الذي أقوم بإنشائه بواسطة نظام السقالات كعرض جزئي

@model NEMS.Models.Employee

<div>
    <h4>Employee</h4>
	<hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.Gender.Name)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Gender.Name)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Shift.Name)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Shift.Name)
        </dd>

       
...

        <dt>
            @Html.DisplayNameFor(model => model.Photo)
        </dt>

        <dd>
            <img width="150" height="150" src="@Url.Action("GetImage", "Employee", new { Model.EmployeeID })" />
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.ImageMimeType)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.ImageMimeType)
        </dd>

    </dl>
</div>

@section scripts {
    <script>
        $(function () {
            $('.employee-details').on('click', function (e) {
                $.post($(this).prop('href'), function (response) {
                    $('#EmployeeDetails').html(respnse)
                });
                e.defaultPrevented();
            });


        });
    </script>
}

أخذت نصيحة Sampath Lokuge وقرأت بعض المقالات حول تنفيذ Part View باستخدام Ajax

قمت بتغيير الكود :

@model NEMS_Project.Models.EmployeeMasterDetailesModel

@{
    ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-2.0.3.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>


<h2>Employee</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

<section id="EmployeemasterList" class="float-left">
    <table>
        @foreach (var item in Model.Employee)
        {
        <tr>
            <td>
                <div>
                    <h1>@item.FullName</h1>
                    <ul>
                        <li>@item.Shift.Name</li>
                        <li>@item.City</li>
                        <li>@Ajax.ActionLink("Details", "EmployeeDetails", new { id = item.EmployeeID}, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "EmployeeDetiles" })</li>
                   </ul>
                </div>
            </td>
        </tr>
        }
   </table>
</section>

<div id="EmployeeDetails"></div>

@section scripts {
    <script type="text/javascript">
        $.ajax({
            url: 'Employee/EmployeeDetails',
            contentType: 'application/html; charset=utf-8',
            type: 'GET',
            datatype: 'html'
        })
        .success(function (result) {
            $('#EmployeeDetails').html(result);
        })
        .error(function(xhr, status){
            alert(status);
        })
       
    </script>
}

الآن عند تحميل الفهرس أتلقى نافذة تنبيه بها خطأ بعد ذلك لم يحدث شيء؛/

أعتقد أنني أحاول كل شيء ولم أحصل على أي فائدة من ذلك 🙁