运行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。