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

Question

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

$('.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 将参数发送到操作。

Answer 1

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

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

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

Answer 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，您会丢失表单数据，这对您来说是一个不错的选择。

Answer 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 更新为正确的（我在本地服务器上运行）。

Answer 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>
} 

Answer 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 应该与您在合并页面上的选项中获得相同的值。