I just noticed a strange behaviour which I am not quite sure about . I am pretty new to jQuery and AJAX. So might just well be missing some basics.
In my MVC rzaor view there are some AJAX Action links which when clicked render a partial view containing the Student Details in the div #StudentDetails.
<div id="mainpage">
<h2>Registration Details</h2>
<ul>
@foreach(var item in Model)
{
<li>
@Ajax.ActionLink(item.Student.UserName, @*Text to be displayed *@
"GetUserDetails", @*Action Method Name*@
new { id = item.Student.StudentId },
new AjaxOptions
{
UpdateTargetId = "StudentDetails", @*DOM element ID to be updated *@
InsertionMode = InsertionMode.Replace,@*Replace the content of DOM element *@
HttpMethod = "GET" @*HTTP method *@,
OnComplete="RegisterClickHanders"
}
)
</li>
}
</ul>
<div id ="StudentDetails"></div>
<br />
<div id ="Add_Update_Details"></div>
</div>
After the view gets rendered with the details, Edit or Add buttons can be clicked and the appropriate partial views get rendered.
<script>
//Event Delegation
//$(function () {
//One can also use Event Delegation as stated above to handle dynamically added elements i.e. the elements
//that are added after the page is first loaded.
function RegisterClickHanders() {
var url = '@Url.Action("DisplayClickedView","Private")'; // Name of the action method you want to call and the name of the
//controller the action method resides
$('.editDetails').click(function () {
var btnvalue = $('.editDetails').attr("value");
var studentId = $('.editDetails').data("student-id");
$('#Add_Update_Details').load(url, { searchText: btnvalue, searchValue: studentId });
});
$('.addDetails').click(function () {
var btnvalue = $('.addDetails').attr("value");
$('#Add_Update_Details').load(url, { searchText: btnvalue });
});
}
</script>
In my controller when I put my breakpoints :
they get hit exactly once which is intended. But when I replace the ajax calls as :
$('.editDetails').click(function () {
var btnvalue = $('.editDetails').attr("value");
var studentId = $('.editDetails').data("student-id");
$.ajax({
type: 'POST',
url: url,
data: { searchText: btnvalue, searchValue: studentId },
success: function () {
$('#Add_Update_Details').load(url, { searchText: btnvalue, searchValue: studentId });
},
error: function (jqXHR, status, err) {//status is Error and the errorThrown is undefined
alert('Request Status : ' + jqXHR.status + ' has issued a status text of : ' + jqXHR.statusText);
}
});
});
$('.addDetails').click(function () {
var btnvalue = $('.addDetails').attr("value");
$.ajax({
type: 'POST',
url: url,
data: { searchText: btnvalue },
success: function () {
$('#Add_Update_Details').load(url, { searchText: btnvalue });
},
error: function (jqXHR, status, err) {//status is Error and the errorThrown is undefined
alert('Request Status : ' + jqXHR.status + ' has issued a status text of : ' + jqXHR.statusText);
}
});
});
The breakpoints in the controller get hit twice upon pressing any of the buttons . What am I missing ? Or is this intended ? Is AJAX call causing a performance hit ?
.load
and your ajax call are both calling your controller action.
You should return a PartialView
and write it to your empty div
like this:
$.ajax({
type: 'POST',
url: url,
data: { searchText: btnvalue, searchValue: studentId },
.success(function (result) {
$('#Add_Update_Details').html(result);
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With