Asp.Net Core Razor Pages：asp-route 使用同一页面上的输入值

Question

从索引页面，是否可以从这样的输入中获取文本值：

<input id="inpSearchMembers" class="form-control small-text" placeholder="Search for a Member..." />

并将其输入asp-route-searchText 属性值，如下所示：

<a id="btnSearchMembers" class="btn btn-outline-primary small-text" asp-page="/Search" asp-route-searchText="~Value from InpSearchMember~" >Search</a>

所以属性asp-route-searchText 包含输入字段id="inpSearchMembers" 的文本，然后单击时发送回代码隐藏？

Answer 1

AnchorTagHelper 将使用asp-route-... 来渲染属性href一次 和静态 没有任何你想要的魔法绑定。例如，如果你有一个像/abc/{searchText} 这样的路由模式。在呈现为 HTML 之后，A 元素的 href 将呈现为类似于 /abc/whatever-from-asp-route-searchText。如果可能的话，我不会尝试在这种用例中通过路由数据发送价值。但是，如果必须，您需要在此处使用 javascript 将 searchText（最初呈现为 href 内的唯一标记）替换为来自的 dynamic 值单击访问链接之前的另一个input。

首先，您在 razor 视图中准备代码，如下所示：

@{
   var searchToken = Guid.NewGuid().ToString();
}
<a id="btnSearchMembers" class="btn btn-outline-primary small-text" 
   asp-page="/Search" asp-route-searchText="@searchToken">Search</a>

接下来，您为 javascript 部分编写代码，将搜索标记替换为来自其他输入的运行时（动态）值：

window.onload = function(){
    var searchLink = document.getElementById("btnSearchMembers");
    var originalHref = searchLink.href;
    searchLink.onclick = function(e){
       //get the value from the other input and replace the link's href 
       //before it's visited by the link click.
       var searchTextElement = document.getElementById("inpSearchMembers");
       e.target.href = originalHref.replace("@searchToken", searchTextElement.value);  
    };
}

当然上面的javascript代码应该写在同一个razor视图文件中，这样就可以访问到服务器变量searchToken。