4

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. enter image description here

<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 : enter image description here

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 ?

0

1 Answer 1

8

.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);
})
2
  • Thank you very much for the help. Just one question out of curiosity ... then when to use .load (as it forces the call twice as you have pointed out) against .html(result) ? Mar 3, 2016 at 4:22
  • 1
    I'm not super familiar with the load function, so I can't really say when it would be optimal to use it. There is a link to the documents when you click load in the answer. The important part in this scenario to understand though is that the ajax call to url and load are both calling the action DisplayClickedView, that is why you were seeing it hit the break point twice.
    – rogerdeuce
    Mar 3, 2016 at 14:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.