Auto refreshing grid and being able to update part of data within the grid

Question

I have currently have a Gridview in which it lists a set of items with just the headings and 3 buttons like so:

The user can then click on the title and it will expand the row down to show everything in full:

Which is done by just some JavaScript and toggling between some divs within the Gridview row. The user can change click the buttons to update the database and change its status and also add some notes which are held in another Gridview within the row.

It is working in the fact that it does what it needs to, just not particuarly smoothly. The problem I have at the moment is that because of Postbacks it is refreshing the whole grid every time, losing its state so if they have a row expanded that will go back up again if they click any of the buttons or add a note. What I would like to know is if there is a way that I can do some interaction between the page so that it keeps its current views, but at the same time be able to update the database and reflect changes in the grid and if they have a row expanded to leave it that way. Another on the wish list would be so that if a new record is added, that it will automatically be added to the list. This is currently using ASP.Net web forms and I imagine I'm going to need to be going alot down some sort of JQuery route?

Any help or pointers will be much appreciated.

Edit - Some code

So I've started from the scratch and it so it will load the top contents wanted. What I thought would be the easiest way to be able to check that something is expanded or not is to save a flag to the db for that user and that task which I can call upon when I build the data which I do in my ASP.net code behind. I have got it saving the data and if I manually refresh the page it shows the changes, but for some reason I cant seem to get it so that it saves to the db and re-runs the load of the top tasks to show if something has been shown/hidden. The second function just doesn't seem to run?

HTML/JS

<script type="text/javascript">
        $(window).load(function ($) {
            loadTaskTops();
        });

function loadTaskTops() {
            $.ajax({
                type: "POST",
                url: "LoadAT.aspx/LoadTaskTop",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    $("#Content").empty();
                    $("#Content").append(r.d);
                }
            });
}
function expandDetails(requestID, userName) {
            expandDetails2(requestID, userName);
            loadTaskTops();
        }


        function expandDetails2(requestID, userName) {
            //alert('RequestID: ' + requestID + ' Username: ' + userName);
            $.ajax({
                type: 'POST',
                contentType: "application/json; charset=utf-8",
                url: 'LoadAT.aspx/markAsExpanded',
                data: "{'requestID':'" + requestID + "', 'userName':'" + userName + "'}",
                async: false,
                success: function (response) {
                    requestID.val('');
                    userName.val('');
                    alert("Record Has been Saved in Database");

                },
                error: function ()
                { console.log('there is some error'); }

            });
        }
    </script>

<div id="Content">
        </div>

It is saving the record to the database by running the expandDetails2, but it doesn't want to do anything after that. It doesnt show any success, or if I try and add .done() with an alert afterwards, still nothing. Thanks

Answer 1

This method is incorrect.

loadTaskTops()

I haven't tested this code, but I fixed it and added comments to help you understand, it may not work but it will get you on the right track. You should look at your console for errors, as well, as you might just be missing something small.

function loadTaskTops() {
        $.ajax({
            type: "POST",
            url: "LoadAT.aspx/LoadTaskTop",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            /*Error check for asp errors*/
            error: function (jqXHR, textStatus, errorThrown) {
                if (jqXHR.status == 500) {
                    alert('Internal error: ' + jqXHR.responseText);
                 } else {
                    alert('Unexpected error.');
                 }
            },
            success: function (data) {
                $("#Content").empty();
                /*You need to get your data out of the json this way */
                data[0].userName;
                /*You can't really do this cause you have a json
                $("#Content").append(data); */
                /*You can, however, do this*/
                $("#Content").append(data[0].userName);
            }
        });
}

I assume your console must be spitting out multiple errors on this method. Hopefully this fixes it up a little for ya.