Click here to Skip to main content
15,868,141 members
Please Sign up or sign in to vote.
5.00/5 (1 vote)
See more:
Hello

I'm trying to Create a View from :

Master-Details using ASP.NET MVC[^]

And everything was going well till i start doing Ajax part of the Solution

My controller is working OK as I receveing ID and the partial View with the details of the employee showing up but it suppose to show up in the dive called "EmployeeDetails" instead I'm redirect to Employee/EmployeeDetails/id

I notice on Firebug in console I get warning :

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


Any one see any mistakes I may done I'm Looking in the code but nothing ;/

the Partial View should show up in the same page as one the solution but no its just redirect me to new page without any css style apply as its just partial view



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




And that's The part of Controller I use in case its a mistake here

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



That's the start and end of the partial view i also add the script at end in case that change something but the result with it or without it is the same the view I generate by scaffolding system as partial view


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



I take Advice of Sampath Lokuge and i Read few Articles about implementing Part View using Ajax

I Change the 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>
}



Now on Loading of the Index I'm receiving and Alert Window with an Error after that nothing happening ;/

I think i try Everything and I'm getting no ware with that :(
Posted
Updated 17-Jul-21 15:51pm
v5

You must use ajax post with partial views here is as below.

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

    });
</script>
    }


UPDATE

Try with load method.

$('#EmployeeDetails').load("/EmployeeDetails/" + id, function () {

                                });


Check for more :.load()
 
Share this answer
 
v2
Comments
SebSCO 25-Dec-13 8:39am    
I have exactly the same script all ready still have the same result my partial view just open it up as new page ;/
Sampath Lokuge 25-Dec-13 9:00am    
Plz check my 'UPDATE' section.
SebSCO 25-Dec-13 9:22am    
[14:11:35.546] The connection to ws://localhost:58102/e6f70cc282cf44a29502bd154a50355c/arterySignalR/connect?transport=webSockets&connectionToken=AQAAANCMnd8BFdERjHoAwE%2FCl%2BsBAAAAKgy42VeaVEiiX%2BggUFuSQQAAAAACAAAAAAAQZgAAAAEAACAAAABr9L93%2FPX81dmqjUWJc9rE8qTp0zRBoTWdjX6iwu2u2QAAAAAOgAAAAAIAACAAAAAt3pV7y8CIddYQsrDx0j8kn0uOP5QXRj1yrEQv%2B1ChiDAAAAB6p8At4xoxWjzfWOXa%2Bzb7jbOxXIO%2FgEV3R06nW3EktiS1w0%2FWHgmAiaTOwgCCyPdAAAAAdI8Ab5RO%2FQEjB7PL1ohfYH%2BCqjbvNlevEDMPMn8M%2F5NVGjDkfTxZ1kCKyoBWFLL60fjI8Om4epOYmGkK%2BGOMOA%3D%3D&requestUrl=http%3A%2F%2Flocalhost%3A64171%2FEmployee%2FIndex&browserName=Firefox&tid=0 was interrupted while the page was loading. @ http://localhost:58102/e6f70cc282cf44a29502bd154a50355c/browserLink:62
[14:11:35.569] no element found @ http://localhost:58102/e6f70cc282cf44a29502bd154a50355c/arterySignalR/abort?transport=webSockets&connectionToken=AQAAANCMnd8BFdERjHoAwE%2FCl%2BsBAAAAKgy42VeaVEiiX%2BggUFuSQQAAAAACAAAAAAAQZgAAAAEAACAAAABr9L93%2FPX81dmqjUWJc9rE8qTp0zRBoTWdjX6iwu2u2QAAAAAOgAAAAAIAACAAAAAt3pV7y8CIddYQsrDx0j8kn0uOP5QXRj1yrEQv%2B1ChiDAAAAB6p8At4xoxWjzfWOXa%2Bzb7jbOxXIO%2FgEV3R06nW3EktiS1w0%2FWHgmAiaTOwgCCyPdAAAAAdI8Ab5RO%2FQEjB7PL1ohfYH%2BCqjbvNlevEDMPMn8M%2F5NVGjDkfTxZ1kCKyoBWFLL60fjI8Om4epOYmGkK%2BGOMOA%3D%3D&requestUrl=http%3A%2F%2Flocalhost%3A64171%2FEmployee%2FIndex&browserName=Firefox:1
[14:11:40.611] ReferenceError: id is not defined @ http://localhost:64171/Employee/Index:129
[14:11:40.707] Use of getPreventDefault() is deprecated. Use defaultPrevented instead. @ http://localhost:64171/Scripts/jquery-2.0.3.js:4923

that's what my firebug showing in console

i do few brake points in my code and run debug I pass thru them and don't know why but the Script part its not executed in it its like it will never do nothing

its more like id is past to controller then controller doing the request from db and passing the partial view with employee element but coz script is not executed or i have some stupid error there its just passing the view to new page not to div

I use the load method you posted but the result is just the same that's why i think its something wrong maybe with the bundles coz i don't have much experience its really hard to find issue for me ;/
Sampath Lokuge 25-Dec-13 9:29am    
Why these errors are coming ? ReferenceError: id is not defined @ http://localhost:64171/Employee/Index
SebSCO 25-Dec-13 9:33am    
That Error start Showing after I implemented Load script and now I'm looking why and how to sort it
Bahhhh All sorted :)

Solution was really Simple and Easy but i Read 2 books and 6 Articles to Learn all about andt the problem was even not there where i was looking at :P

The Article just make it harder then it was :) for me and i fallow it what lost me :P


OK


I use Ajax Helper That's how I Create it and The part of totaly NO NO NO NO !!
when U using Ajax helper it just Creating an Issue Also I change my Controller
From ActionResult to PartialViewResult but i think in both cases it will work fin now :)

and don't forget to add

<pre lang="xml">&lt;script src=&quot;~/Scripts/jquery-2.0.3.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;~/Scripts/jquery.unobtrusive-ajax.js&quot;&gt;&lt;/script&gt;</pre>

and make sure in its not mini files as Visual Studio have some restriction u can enable option what will allow u to use minis but right now I was not really looking for it


<pre>&lt;li>
@Ajax.ActionLink("Details", "EmployeeDetails",
new { id = item.EmployeeID } ,
new AjaxOptions(){

HttpMethod= "GET",
UpdateTargetId = "EmployeeDetails",
InsertionMode = InsertionMode.Replace,


})


&lt;/li></pre>
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900