在razor的表单中添加参数

Question

我的视图中有这个表单，它引导我在控制器中执行一些操作。问题是我不知道如何将参数传递给操作方法。

<form class="full-search" asp-controller="Movies" asp-action="Search">
    <input type="search" name="searchmovie" placeholder="Search..." class="search-form">
    <select name="option" form="">
        <option name="option" value="category1">category 1</option>
        <option name="option" value="category2">category 2</option>
        <option name="option" value="category3">category 3</option>
    </select>
    <i class="fas fa-caret-down"></i>
    <input type="submit" name="" class="submit-full-search">
    <div class="search-btn-submit">
        <img src="~/img/search.svg">
    </div>
</form>

这是我的控制器：

[HttpGet("searchmoview/{option?}/{searchmovie}")]
public  IActionResult Search(string option, string searchmovie)
{
    //perform some search based on the filters
    return View("Search", data);
}

但是当我运行我的代码时，当我点击搜索时，网址看起来像这样：

https://localhost:33590/Information/Search

而不是这样：

https://localhost:44320/seachmovie/category1/{searchString}

知道如何传递参数吗？

Answer 1

长话短说 - 没有开箱即用的方式将表单值映射到路由。

将值传回您的 mvc 控制器的最佳方式是拥有一个视图模型。

创建一个搜索视图模型。

//View Model
public class SearchViewModel{
    public string Query {get;set;}
    public string Category {get;set;}
}

在您的控制器中，您需要将其传递给您的视图或局部视图。 在 .NET 中使用“ActionResult”，在 .Net Core 中使用“IActionResult”

//Controller
public class SearchController{
    [HttpGet]
    public ActionResult SearchBox(){
        return View();
    }


    [HttpPost]
    public ActionResult SearchBox(SearchViewModel model){
        //model is now populated with your values from your form.
        //ex: model.Query

        return View();
    }
}

为您的类别创建一个枚举，还有很多其他方法可以做到这一点，但这是最简单的。

//Enum
public enum Categories
{
    Category1,
    Category2    
}

现在在你的 Razor 视图中绑定你的视图模型，你就可以开始了。

//Razor View
@model SearchViewModel

@using (Html.BeginForm("SearchBox", "Search", FormMethod.Post))
{

    @Html.TextBoxFor(x => x.Query, new { @class = "search-form"})
    @Html.DropDownListFor(x => x.Catergory,
                    new SelectList(Enum.GetValues(typeof(Categories))),
                    "Select Category", new { @class= "example-class"})
    <i class="fas fa-caret-down"></i>

    <input type="submit" name="" class="submit-full-search">
    <div class="search-btn-submit">
        <img src="~/img/search.svg">
    </div>
}

如果您希望将表单值发布到您的 url，您可以将其更改为 FormMethod.Get

//Razor View
@model SearchViewModel

@using (Html.BeginForm("SearchBox", "Search", FormMethod.Get))
{

    @Html.TextBoxFor(x => x.Query, new { @class = "search-form"})
    @Html.DropDownListFor(x => x.Catergory,
                    new SelectList(Enum.GetValues(typeof(Categories))),
                    "Select Category", new { @class= "example-class"})
    <i class="fas fa-caret-down"></i>

    <input type="submit" name="" class="submit-full-search">
    <div class="search-btn-submit">
        <img src="~/img/search.svg">
    </div>
}

如果您将其更改为 get，您还必须更改您的控制器以在您的 get 方法中期待这些。您也可以只绑定模型，MVC 会自动为您将参数映射回模型。

public class SearchController{
    [HttpGet]
    public ActionResult SearchBox(SearchViewModel model){
        //if the model values are in the URL "model" will be populated, else it will be null.
        return View();
    }
}

Answer 2

你不能。事情不是这样运作的。默认情况下，表单将发送 POST 请求，在这种情况下，表单中的输入将作为请求正文的一部分（即不是 URL）发送。您可以将方法设置为 GET，但是输入值将作为 查询字符串 的一部分发送（即?foo=bar），而不是作为您的路径的一部分，正如您正在寻找的那样为。

远程实现您想要的唯一方法是使用 JavaScript 根据类别选择框更改等内容来操作表单的操作。您将绑定到该元素的 change 事件，然后以某种方式更改表单元素的 action 属性。