Problème avec le script et la vue partielle

Bonjour

J’essaie de créer une vue à partir de :

Maître-Détails utilisant ASP.NET MVC[^]

Et tout se passait bien jusqu’à ce que je commence à faire partie de la solution Ajax.

Mon contrôleur fonctionne correctement car je reçois une pièce d’identité et une vue partielle avec les détails de l’employé qui apparaissent, mais il est censé apparaître dans la plongée appelée “EmployeeDetails” à la place, je suis redirigé vers Employee/EmployeeDetails/id.

Je remarque sur Firebug dans la console que je reçois un avertissement :

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

Quelqu’un voit des erreurs que j’ai pu faire. Je regarde dans le code mais rien ;/

la vue partielle devrait apparaître sur la même page que l’une des solutions, mais non, elle me redirige simplement vers une nouvelle page sans qu’aucun style CSS ne s’applique car c’est juste une vue partielle

<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>
    }

Et c’est la partie du contrôleur que j’utilise au cas où ce serait une erreur ici

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

C’est le début et la fin de la vue partielle. J’ajoute également le script à la fin au cas où cela changerait quelque chose mais le résultat avec ou sans est le même que la vue que je génère par le système d’échafaudage en tant que vue partielle.

@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>
}

Je prends les conseils de Sampath Lokuge et j’ai lu quelques articles sur la mise en œuvre de Part View à l’aide d’Ajax.

Je change le code :

@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>
}

Maintenant, lors du chargement de l’index que je reçois et de la fenêtre d’alerte avec une erreur, rien ne se passe après cela ;/

Je pense que j’ai tout essayé et je n’obtiens aucun logiciel avec ça 🙁