Click here to Skip to main content
15,068,929 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()
   
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
SebSCO 25-Dec-13 9:38am
   
Before adding .load at loading Page i receive

[14:33:37.087] The connection to ws://localhost:58102/e6f70cc282cf44a29502bd154a50355c/arterySignalR/connect?transport=webSockets&connectionToken=AQAAANCMnd8BFdERjHoAwE%2FCl%2BsBAAAAKgy42VeaVEiiX%2BggUFuSQQAAAAACAAAAAAAQZgAAAAEAACAAAAB452vVLL2uCJ72Zhc3Ne7zHo4O41cS42rQbvIp1KUmXgAAAAAOgAAAAAIAACAAAAC%2BVXPhPgg0%2FeQ6Se25i%2B5U11LRI1f1fjD2j44vPvSGyzAAAADgY%2BN2cBmRzj6dZpw3Vr6a42Gu%2BfrfhU2UT3kJEBRiG0yCUb%2F1kbEOHpMlPyYktkdAAAAA9HjWXegu4t8wPEL7ttYdA%2FAcX%2FhFL%2Bpa4Zc6FDXDIKJLzcwjwMSYqCWB08QTdPNt60eg4i2UpKK67uqmyL7meg%3D%3D&requestUrl=http%3A%2F%2Flocalhost%3A64171%2FEmployee%2FIndex&browserName=Firefox&tid=6 was interrupted while the page was loading. @ http://localhost:58102/e6f70cc282cf44a29502bd154a50355c/browserLink:62
[14:33:37.195] no element found @ http://localhost:58102/e6f70cc282cf44a29502bd154a50355c/arterySignalR/abort?transport=webSockets&connectionToken=AQAAANCMnd8BFdERjHoAwE%2FCl%2BsBAAAAKgy42VeaVEiiX%2BggUFuSQQAAAAACAAAAAAAQZgAAAAEAACAAAAB452vVLL2uCJ72Zhc3Ne7zHo4O41cS42rQbvIp1KUmXgAAAAAOgAAAAAIAACAAAAC%2BVXPhPgg0%2FeQ6Se25i%2B5U11LRI1f1fjD2j44vPvSGyzAAAADgY%2BN2cBmRzj6dZpw3Vr6a42Gu%2BfrfhU2UT3kJEBRiG0yCUb%2F1kbEOHpMlPyYktkdAAAAA9HjWXegu4t8wPEL7ttYdA%2FAcX%2FhFL%2Bpa4Zc6FDXDIKJLzcwjwMSYqCWB08QTdPNt60eg4i2UpKK67uqmyL7meg%3D%3D&requestUrl=http%3A%2F%2Flocalhost%3A64171%2FEmployee%2FIndex&browserName=Firefox:1
[14:33:37.824] Use of getPreventDefault() is deprecated. Use defaultPrevented instead. @ http://localhost:64171/Scripts/jquery-2.0.3.js:4923
SebSCO 25-Dec-13 9:39am
   
That's the error I'm getting at page load when i just use just Ajax response
Sampath Lokuge 25-Dec-13 9:44am
   
Can you put the '_EmployeeDetails' partial page's html code snippet ?
SebSCO 25-Dec-13 9:48am
   
sure

i will Update my question and add it
Sampath Lokuge 25-Dec-13 10:07am
   
Just for the test put a button (rather link inside the for loop) and try to retrieve the partial view (hard code the values for route) by using that button's click (use load method).Check whether is it working or not ?
SebSCO 25-Dec-13 10:03am
   
Disregarding if i resolve the issue or not thank you a lot for help and posting as i know it can be difficult as my language is in really low level and also I'm new to programing and its challenging for me but I getting some progress and I Learn a lot of new thinks
:)
SebSCO 25-Dec-13 10:55am
   
<input type="Button" name="Details/EmployeeDetails/1" value="EmployeeDetails" class="employee-details"/>

that will do ???
Sampath Lokuge 25-Dec-13 11:06am
   
Nope.Just check these links.http://www.c-sharpcorner.com/UploadFile/d551d3/how-to-load-partial-views-in-Asp-Net-mvc-using-jquery-ajax/
Sampath Lokuge 25-Dec-13 11:07am
   
http://stackoverflow.com/questions/14529936/using-ajax-for-partial-view-loading-in-net-mvc4
SebSCO 25-Dec-13 18:27pm
   
That's New in Firebug, I think something start working but not in right way :)

[23:21:00.358] Empty string passed to getElementById(). @ http://localhost:64171/Scripts/jquery.unobtrusive-ajax.min.js:5

but still looking how to fix the problem now
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>
   

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