Asp.Net 核心 Razor 页面：asp-使用同一页面输入值的路由

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

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

首先你在剃须刀视图中准备代码如下：

@{
   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.

Asp.Net 核心 Razor 页面：asp-使用同一页面输入值的路由

Asp.Net Core Razor Pages: asp-route to use value from input on same page

c#

asp.net-core

razor-pages