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:
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
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 :(