查询字符串参数

Question

想法：

只有两列的自定义网格视图。我没有带有多列值的传统网格视图，而是在列中有两列具有多个值。下面是一个屏幕链接，显示结果很好。

既然网格视图工作正常并且它的值正在填充页面加载时应该填充，我将结合与网格视图关联的传统功能。例如;搜索，过滤，排序和分页。这些是我希望我的网格视图具有的四个主要功能。

问题：

到目前为止，搜索，过滤，排序和分页都可以正常工作;然而，它们都有一个共同的问题：我不能将这些特征结合起来。我希望能够，但是在将查询字符串添加到项目中并完全重构我的代码时，每个功能只能运行一次。

例如：如果我选择按新方式过滤，则按创建日期排序，我会点击“新建”，然后点击“创建日期”。当我点击“新建”时，查询字符串看起来像'view = new＆amp; sort = customer＆amp; dir = ASC＆amp; page = 1'。这是预期的，但是当我点击“创建日期”时，意外的结果是;查询字符串更改为'view = all＆amp; sort = creaon＆amp; dir = ASC＆amp; page = 1'。视图在不应该有的时候发生了变化。

对于所有测试用例，这个事实都是一样的。隐藏字段正在接收值，但由于在点击事件中分配了值，因此不会在帖子后面保留其值。我过去没有任何问题隐藏的字段这样做，所以我想知道我在这一点上做错了什么，我在看什么？另外，如果这不是解决这个问题的正确方法那么会是什么？

守则

现在我所能提供的只是这个特定问题的相关代码;搜索值由Session处理，其余值由隐藏字段处理。

分页元素是在后面的代码中的页面加载时创建的。

JavaScript的：

function setView(id, mode) {
    document.getElementById('PlaceHolderMainLower_PackageView_hfViewMode').setAttribute('Value', mode);
    setHref(id);
}

function setSort(id, mode) {
    document.getElementById('PlaceHolderMainLower_PackageView_hfSortMode').setAttribute('Value', mode);
    setHref(id);
}

function setPage(id, page) {
    document.getElementById('PlaceHolderMainLower_PackageView_hfPageIndex').setAttribute('Value', page);
    setHref(id);
}

function setHref(id) {
    var view = document.getElementById('PlaceHolderMainLower_PackageView_hfViewMode').value;
    var sort = document.getElementById('PlaceHolderMainLower_PackageView_hfSortMode').value;
    var dir = document.getElementById('PlaceHolderMainLower_PackageView_hfSortDirection').value;
    var page = document.getElementById('PlaceHolderMainLower_PackageView_hfPageIndex').value;

    document.getElementById(id).href = 'ActivePackages.aspx?' + 'view=' + view + '&sort=' + sort + '&dir=' + dir + '&page=' + page;
    __doPostBack();
}

CSS：

.viewLinks {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.viewLinks:hover {
    cursor: pointer;
}

HTML：

<asp:ScriptManager ID="scriptManager" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="upHiddenFields" runat="server" UpdateMode="Always" EnableViewState="true" ViewStateMode="Enabled" >
    <ContentTemplate>
        <asp:HiddenField ID="hfViewMode" runat="server" Value="all" EnableViewState="true" ViewStateMode="Enabled" />
        <asp:HiddenField ID="hfSortMode" runat="server" Value="customer" EnableViewState="true" ViewStateMode="Enabled" />
        <asp:HiddenField ID="hfSortDirection" runat="server" Value="ASC" EnableViewState="true" ViewStateMode="Enabled" />
        <asp:HiddenField ID="hfPageIndex" runat="server" Value="1" EnableViewState="true" ViewStateMode="Enabled" />
    </ContentTemplate>
</asp:UpdatePanel>

<div id="divViews" style="display: table; width: 100%; table-layout: fixed;">
                <span>View By Status:</span>
                <asp:LinkButton ID="lnkAll" runat="server" CssClass="viewLinks" Text="All" OnClientClick="setView(this.id, 'all');" />
                <asp:LinkButton ID="lnkNew" runat="server" CssClass="viewLinks" Text="New" OnClientClick="setView(this.id, 'new');" />
                <asp:LinkButton ID="lnkProgress" runat="server" CssClass="viewLinks" Text="In Progress" OnClientClick="setView(this.id, 'inProgress');" />
            </div>

            <div id="divViews" style="display: table; width: 100%; table-layout: fixed;">
                <span>Sort By:</span>
                <asp:LinkButton ID="lnkCustomer" runat="server" CssClass="viewLinks" Text="Customer" OnClientClick="setSort(this.id, 'customer');" />
                <asp:LinkButton ID="lnkType" runat="server" CssClass="viewLinks" Text="Type" OnClientClick="setSort(this.id, 'type');" />
                <asp:LinkButton ID="lnkCreatedOn" runat="server" CssClass="viewLinks" Text="Date Created" OnClientClick="setSort(this.id, 'creaon');" />
            </div>

C＃：

private const string pageLinkTemplateHTML = @"<a id=""pageLink{0}"" onclick=""setPage(this.id, {1});"" class=""viewLinks"">{2}</a>";
    private void BuildPaging() {
    divPages.InnerHtml = @"<table style=""width: 100%;""><tr><td style=""width: 100%"">";

    for (int i = 1; i <= Packages.Count / pageSize; i++)
        divPages.InnerHtml += string.Format(pageLinkTemplateHTML, i, i, i);

    divPages.InnerHtml += "</td></tr></table>";
}

Answer 1

正如我在评论中所说，您可以使用变量来存储您选择的状态。例如：

// do the same for your other variables
var view = 'all';
function setView(id, mode) {
    view = mode;
    setHref(id);
}

function setHref(id) {
    // now you don't need to read view, sort,
    // dir and page from DOM elements, they are already there
    document.getElementById(id).href = 'ActivePackages.aspx?' + 'view=' + view + '&sort=' + sort + '&dir=' + dir + '&page=' + page;
    __doPostBack();
}

// on page load, you read the querystring from the url, check for the values and put them back into variables
window.addEventListener('load', function(){
    var query_string = {};
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");
        // If first entry with this name
        if (typeof query_string[pair[0]] === "undefined") {
            query_string[pair[0]] = decodeURIComponent(pair[1]);
            // If second entry with this name
        } else if (typeof query_string[pair[0]] === "string") {
            query_string[pair[0]] = [query_string[pair[0]],decodeURIComponent(pair[1])];
            // If third or later entry with this name
        } else {
            query_string[pair[0]].push(decodeURIComponent(pair[1]));
        }
    }
    // do the same for your other parameters
    if(query_string.hasOwnProperty('view')){
        view = query_string.view;
    }
});