運行ajax腳本后鏈接到頁面（javascript錨？）

Question

我有一個MVC Web應用程序，該應用程序從數據庫接收數據並將其顯示在用戶表中。 用戶瀏覽一系列下拉菜單和按鈕，每個下拉菜單和按鈕都使用AJAX調用進行填充。 然后創建一個表並顯示。 例如，這是一個這樣的代碼部分。

@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>

現在一切正常，以顯示用戶在下拉列表中選擇的表。 當用戶使用表中的鏈接（“編輯”，“詳細信息”，“刪除”）時，會將他們帶到新頁面來處理此操作。 完成后，將其帶回到該主頁。 不幸的是，他們的下拉菜單和表格的狀態顯然沒有存儲，因此他們必須再次瀏覽菜單才能看到其更改。

我聽說有一些錨點可以使頁面轉到javascript / AJAX的特定配置。 我試圖搜索它，但是沒有成功。 我想要的是用戶能夠搜索我的下拉菜單並選擇表X。然后他們可以在表X中說編輯項目Y。完成編輯Y並單擊提交（或返回表以撤消更改），而不是返回首頁開始，它應該重新填充下拉菜單並返回到顯示表X。

也許像/ Home / Index /＃X這樣的鏈接？

這可能嗎，怎么辦？

Answer 1

您正在談論哈希片段。 在一般意義上，所有要做的就是使用目標作為轉儲頁面所需數據的轉儲場，因為URL的目標部分沒有發送到服務器並且不會導致頁面刷新。 它本身不能執行任何操作，但是您可以在頁面上使用JavaScript來從URL解析此信息並對其進行有意義的處理。

因此，出於您的目的，您可以使用類似以下的內容：

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

然后，您將需要該頁面上的JS來拉出片段（ location.hash ）並解析名稱值對，最后使用該JS將選擇集重新設置為之前的狀態，並加載需要加載的任何數據通過AJAX。