在页面重新加载时删除查询字符串

Posted 2023-05-08

【中文标题】在页面重新加载时删除查询字符串

【英文标题】：Remove query string on page reload

【发布时间】：2018-01-30 17:27:25

【问题描述】：

我有一个超链接，我正在重定向到一个页面。

$('.lnkMerging').on("click", function () 

            var id = $(this).attr('data-id');

            window.location = '/Merging/Index/?workItemID=' + id;
        );

我在控制器页面中的操作是

public ActionResult Index(int? workItemID)
        
            MergingVM mergingVM = new MergingVM();
            mergingVM.SourceList = GetSourceDropdownList();
            mergingVM.WorkItem = (workItemID==null? 0: workItemID.Value) ;
            mergingVM.MergeActionSelectList = 
            GetMergeProcessActionDropdownList();
            PopulateDropDowns(mergingVM);
            return View(mergingVM);
        

所以当我点击超链接时，它会将我重定向到合并页面。 重定向到Merge页面后，下拉框填充id（在首页选中）并相应触发按钮点击。

我的问题当我重新加载合并页面时，下拉列表中的值不清楚。即，如果我已从主页重定向到合并页面，则下拉菜单具有一定的价值。但是当我刷新它时，所选值应该消失。我知道查询字符串仍然保留该值。但是有没有其他方法可以在 jquery 中不使用 windows.location.href 将参数发送到操作。

【问题讨论】：

您可以使用 Ajax 向您的操作发送参数。

【参考方案1】：

如果您使用超链接，那么您也可以尝试一下

$('.lnkMerging').on("click", function () 

        var id = $(this).attr('data-id');
        $(this).attr('href','/Merging/Index/?workItemID=' + id)
);

【参考方案2】：

为了清除查询字符串，您应该使用重定向到另一个视图。

    public ActionResult Index(int? workItemID)
    
        MergingVM mergingVM = new MergingVM();
        mergingVM.SourceList = GetSourceDropdownList();
        mergingVM.WorkItem = (workItemID == null ? 0 : workItemID.Value);
        mergingVM.MergeActionSelectList =
        GetMergeProcessActionDropdownList();
        PopulateDropDowns(mergingVM);

        //to send this model to the redirected one.
        TempData["model"] = mergingVM;

         return RedirectToAction("CleanIndex");
    

    public ActionResult CleanIndex()
    
        var model = (MergingVM)TempData["model"] ?? new MergingVM();
       // Do something

        return View("Index", model);
    

要找到方法的发送参数的替代方法，您首先需要了解模型绑定操作。

模型竞价搜索值：

表单数据 路线数据 查询字符串 文件 自定义（例如 cookie）

如果您的操作必须是 HttpGet，您会丢失表单数据，这对您来说是一个不错的选择。

【讨论】：

我仍然有同样的问题。我想要的是单击超链接后，应在下拉菜单中选择工作项。

刷新合并页面后，下拉菜单应该被清除。

@TinoJoseThannippara，我可以看看GetMergeProcessActionDropdownList 和PopulateDropDowns 中的内容吗？

@TinoJoseThannippara 如果动作不一定是httpGet 我认为你应该考虑POST 方法。

【参考方案3】：

如果我理解正确……以下内容对我有用。

如果 URL 附加了一个 ID，它会作为变量“param”记录到控制台。然后替换 URL（因此，如果您刷新页面，ID 将从 URL 中删除）。

$(document).ready(function() 

    var url = window.location.toString;
    var hostname = window.location.hostname;
    var pathname = window.location.pathname;
    var param = window.location.search;
    $('.lnkMerging').on("click", function () 

        var id = $(this).attr('data-id');         
        window.location = '/new-page.php?' + id;

    );
    if ( pathname == "/new-page.php" && param ) 
        console.log(param);
        window.history.pushState("string", "Title", "http://yourURL.com/new-page.php");
        //Do something with param...
    
);

这假设如果没有附加到 URL 的 ID，下拉菜单不会做任何事情。您还需要将 URL 更新为正确的（我在本地服务器上运行）。

【讨论】：

这是你想要的吗？

【参考方案4】：

我认为你应该在不想使用workItemID的地方使用POST。

我的意思是所有有链接的地方都应该使用这样的想法：

<form action="/Merging/Index" method="POST">
    <input type="hidden" name="workItemID" value="1" /> <-- your Id
    <input type="submit" value="Link to workItemID 1!" /> <-- your link
</form>

这样您将获得您的视图，但 URL 中没有 workItemID。但是您应该更改 css 以使您的 POST 链接看起来像 <a> 标签。

这是你的桌子：

@if (@Model.DataSetList[i].StateID == 43)

    <td>
        <form action="/Merging/Index" method="POST">
            <input type="hidden" name="workItemID" value="@Model.DataSetList[i].Workitem_ID" />
            <input class="lnkMerging" type="submit" value="Merging" />
        </form>
    </td>

else

    <td>
        <text style="color:darkgrey" contenteditable="false">Merging</text>
    </td>
 

【讨论】：

Id int 理解。这是我输入工作项 ID 作为参数的超链接。如何将其更改为您的。

@if (@Model.DataSetList[i].StateID == 43)

合并 else 合并

【参考方案5】：

您可以将参数保存在html5的本地存储api中，然后在索引页面的页面加载中使用这些参数。

$('.lnkMerging').on("click", function () 

    var id = $(this).attr('data-id');
    localStorage.setItem("workItemID",id);

    window.location = '/Merging/Index/;
);

在页面加载索引时，您可以使用 getItem 检索它 localStorage.getItem("workItemID"); 并根据您的要求使用它。

在合并页面的页面加载时，您必须像下面这样显式设置所选选项，然后从本地存储中删除该值。

$(document).ready(function()

if(localStorage.getItem("workItemID")!=null)
     $("#mydropdownlist").val(localStorage.getItem("workItemID"));
         localStorage.removeItem('workItemID');
    
);

确保在 var id = $(this).attr('data-id'); id 应该与您在合并页面上的选项中获得相同的值。

【讨论】：

这会在我单击超链接时删除选定的下拉列表，因为它会重新加载页面，即当我单击超链接时，它应该重定向到另一个合并页面并保留源。但是当刷新合并页面时，它应该清除合并页面中的下拉菜单

请查看我的更新答案，详细解释。