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）并解析出名称值对，最后使用它来将选择设置回原先的状态并加载任何内容数据需要通过AJAX加载。

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

1 个答案: