Razor 页面中的表单操作标记帮助程序不会重定向我

Question

我正在尝试做一个搜索框。当我按下搜索按钮时，没有任何反应。我想重定向到 /Search&searchTerm=il。另外如何获取输入框中输入的内容并将其添加到 asp-route-searchTerm 中？

<div class="input-group col-4">
  <input class="form-control py-2" type="search" placeholder="Search books and authors">
  <span class="input-group-append">
    <button asp-page="/Search" asp-route-searchTerm="il" class="btn btn-outline-secondary" type="button">
      <i class="fa fa-search"></i>
    </button>
  </span>
</div>

Answer 1

另一个例子是正确的，但其余的技术是错误的 剃刀页面：

HTML

<form sp-page="./Index" method="get">
                <div class="form-actions no-color">
                    <p>
                        <input type="text" name="SearchString" value="@Model.CurrentFilter" placeholder="Add search term" class="form-control" />
                        <button type="submit" value="Search" class="btn btn-primary btn-round">
                            <i class="material-icons">search</i>
                            Search
                        </button> |
                        <a asp-page="./Index">Back to full List</a>
                    </p>
                </div>
            </form>

代码背后：

声明持有财产

public string CurrentFilter { get; set; }

你的 OnGetAsync

public async Task<IActionResult> OnGetAsync(string searchString)
    {
        if (!string.IsNullOrEmpty(searchString)) { CurrentFilter = searchString; }

注意表单标签是：

注意 OnGet 接受一个字符串（查询字符串参数称为 searchString ）

请注意，文本字段有一个名称参数。

额外的属性 CurrentFilter 可以被记住和模型绑定。因此分页、排序等也可以在该 URL 中

Answer 2

据我记忆，.NET Core 中的form 标签默认有method = "POST"。

我知道你想要做的是一个 GET 请求。

尝试通过 GET 更改 POST。

<form method="GET">

</form>

你的按钮标签如下：

<button asp-action="Search" asp-controller="YourController" class="btn btn-outline-secondary" type="button">
      <i class="fa fa-search"></i>
    </button>

其中，“Search”是您的操作的名称，“YourController”是您的控制器的名称。

在 YourController.cs 中进行搜索操作：

public IActionResult Search(string SearchTerm)
{
    var model = new ModelClass();
    //Your search logic
    return View(model); 
}

您的搜索结果页面可能命名为 Search.cshtml，应该收到一个 ModelClass 的模型，例如（在 Search.cshtml 的顶部）：

@model YourProject.Models.ModelClass

也许您的模型应该具有以下属性：

public class ModelClass
{
    public string Name {get;set;}
    //more properties
}

另外，我不想听起来粗鲁，但你应该再次快速浏览一下 MVC 模式设计。

祝你好运。