运行ajax脚本后链接到页面（javascript锚？）

Question

I have a MVC web app that receives data from a database and displays it in a table for the user. The user goes through a series of dropdowns and buttons, each being populated using AJAX calls. Then a table is created and shown. As an example, here is one such section of code.

@Html.LabelFor(model => model.RootID)
@Html.DropDownListFor(model => model.RootID, Model.AvailableRoots)
<input type="button" id="RootsBtn" value="Go" />
<script language="javascript" type="text/javascript">
    $(function () {
        $("#RootsBtn").click(function () {
            var selectedItem = $('#RootID').val();
            $("#MiscTable").empty();
            $.ajax({
                cache: false,
                type: "GET",
                url: RootDirectory + "Home/GetTableData/",
                data: { "id": selectedItem },
                success: function (data) {
                    var myTable = $('#MiscTable');
                    $.ajax({
                        cache: false,
                        type: "GET",
                        url: RootDirectory + "Home/GetProperties/",
                        data: { "id": selectedItem },
                        success: function (data2) {
                            if (data2['IsAddAvailable'] == 'True' && data2['IsViewOnly'] == 'False' && data2['IsEnabled'] == 'True' &&
                                data2['IsViewOnly_User'] == 'False' && data2['IsEnabled_User'] == 'True') {
                                $('#Add' + data2['TableName']).show();
                            }

                            if (data.length > 0) {
                                var firstRecord = data[0];

                                var headerRow = $('<thead>');
                                for (var columnTitle in firstRecord) {
                                    headerRow.append($('<th>', { text: columnTitle }));
                                }
                                headerRow.append($('<th>', { text: " " }));

                                myTable.append(headerRow);

                                var record;
                                var dataRow;
                                for (var dataIndex = 0; dataIndex < data.length; dataIndex++) {
                                    record = data[dataIndex];
                                    dataRow = $('<tr>');
                                    for (var column in firstRecord) {
                                        dataRow.append($('<td>', { text: record[column] }));
                                    }
                                    var id = record['ID'];

                                    var showDelete = ((record['IsDeleteAvailable'] == 'True' || ((record['IsDeleteAvailable'] == null || record['IsDeleteAvailable'] == "") && data2['IsDeleteAvailable'] == 'True')) && data2['IsDeleteAvailable_User'] == 'True');
                                    var showEdit = ((record['IsEditAvailable'] == 'True' || ((record['IsEditAvailable'] == null || record['IsEditAvailable'] == "") && data2['IsEditAvailable'] == 'True')) && data2['IsEditAvailable_User'] == 'True');

                                    var str1 = RootDirectory + data2['TableName'] + "/Edit/" + id;
                                    var str2 = RootDirectory + data2['TableName'] + "/Details/" + id;
                                    var str3 = RootDirectory + data2['TableName'] + "/Delete/" + id;

                                    if (showDelete && showEdit && data2['IsViewOnly'] != 'True' && data2['IsViewOnly_User'] != 'True') {
                                        dataRow.append('<td><a href="' + str1 + '">Edit</a><br /><a href="' + str2 + '">Details</a><br /><a href="' + str3 + '">Delete</a></td>');
                                    }
                                    else if (!showDelete && showEdit && data2['IsViewOnly'] != 'True' && data2['IsViewOnly_User'] != 'True') {
                                        dataRow.append('<td><a href="' + str1 + '">Edit</a><br /><a href="' + str2 + '">Details</a></td>');
                                    }
                                    else if (showDelete && !showEdit && data2['IsViewOnly'] != 'True' && data2['IsViewOnly_User'] != 'True') {
                                        dataRow.append('<td><a href="' + str2 + '">Details</a><br /><a href="' + str3 + '">Delete</a></td>');
                                    }
                                    else {
                                        dataRow.append('<td><a href="' + str2 + '">Details</a></td>');
                                    }
                                    myTable.append(dataRow);
                                }
                            }
                        },
                        error: function (xhr, ajaxOptions, throwError) {
                            alert("Error");
                        }
                    });
                    $('#MiscTable').show();
                },
                error: function (xhr, ajaxOptions, throwError) {
                    alert("Error");
                    $('#MiscTable').hide();
                }
            });
        });
    });
</script>

Everything works right now to display whatever table has been chosen by the user in the dropdown list. When the user uses a link in the table (Edit, Details, Delete) they are taken to a new page to handle this action. When finished it takes them back to this main page. Unfortunately the state of their dropdowns and table were obviously not stored, so they have to go through the menus again to see their changes.

I have heard that there are anchors that can allow a page to go to a specific configuration of javascript/AJAX. I've tried to search for it but haven't been successful. What I am wanting is the ability for the user to search through my dropdowns and select table X. Then in table X they can say to edit item Y. When finished editing Y and clicking submit (or back to table to undo changes) rather than going back to the start of the main page, it should repopulate the dropdowns and go back to showing table X.

Maybe a link like /Home/Index/#X?

Is this possible and how would it be done?

Answer 1

You're talking about hash fragments. In a general sense, all this is doing is using the target as a dumping ground for data needed to render the page as it was, since the target portion of the URL is not sent to the server and doesn't cause a page refresh. On it's own this does nothing, but you could have JavaScript on page that parses this information out of the URL and does something meaningful with it.

So for your purposes you could go with something like:

`/path/to/page#select1=foo&select2=bar`

Then, you would need JS on that page that pulls out the fragment ( location.hash ) and parses out the name value pairs to finally use that to set the selects back to the state they were in previously and load whatever data needs to be loaded via AJAX.