Question

我希望我的用户能够对页面内容进行排序，从而根据他们点击的内容显示部分视图。这是使用单选按钮的一个明显案例，因为一次只能选择一个。

但是我不知道如何只在一个单选按钮上调用动作方法。

这是我目前的实施没有radiobuttons

<a asp-action="Bookings" asp-controller="User" class="btn btn-primary" asp-route-sortOrder="All">Alle lektioner</a>
<a asp-action="Bookings" asp-controller="User" class="btn btn-primary" asp-route-sortOrder="Upcoming">Kommende lektioner</a>
<a asp-action="Bookings" asp-controller="User" class="btn btn-primary" asp-route-sortOrder="History">Historik</a>

使用bootstrap单选按钮这是我的模板，但是我无法在控制器中使用这些方法。我考虑过在输入上创建 onclick ，但我不确定是否可能，另外我不知道如何在onclick中使用asp-route-sortOrder

<div class="btn-group" data-toggle="buttons">
   <label class="btn btn-primary active">
     <input type="radio"id="option1" autocomplete="off" checked> All
   </label>
   <label class="btn btn-primary">
     <input type="radio" autocomplete="off"> Upcoming
  </label>
  <label class="btn btn-primary">
  <input type="radio" autocomplete="off"> History
  </label> 
</div>

如果可能，我更喜欢不使用javascript。

Answer 1

通过有条件地添加类名来突出显示指示当前路由（sortOrder）的链接可能更容易。有关如何执行此操作的一些示例，请参阅How to add “active” class to Html.ActionLink in ASP.NET MVC，但要回答您的问题，请从视图模型开始，以在视图中表示您想要的内容

public class BookingsVM
{
    public string SortOrder { get; set; } // to bind to the radio buttons
    public IEnumerable<Booking> Bookings { get; set; } // the collection of records to display in the view
}

然后控制器方法将是

[HttpGet]
public ActionResult Bookings(string sortOrder)
{
    var bookings = .... // your code to get Bookings based on the value of sortOrder
    BookingsVM model = new BookingsVM
    {
        SortOrder = sortOrder,
        Bookings = bookings
    }
    return View(model);
}

视图

@model BookingsVM
....
@using(Html.BeginForm("Bookings", "User", FormMethod.Get))
{
    <label>
        @Html.RadioButtonFor(m => m.SortOrder, "All", new { id = "" })
        <span>Alle lektioner</span>
    </label>
    <label>
        @Html.RadioButtonFor(m => m.SortOrder, "Upcoming", new { id = "" })
        <span>Kommende lektioner</span>
    </label>
    // .... ditto for History
    <input type="submit value="Sort" />
}
@foreach(var booking in Model.Bookings)
{
    // .... display results here
}

请注意，由于浏览器不了解您的路由定义，因此提交表单将生成一个../User/Bookings?sortOrder=All的网址（即使用查询字符串值）。如果你想要../User/Bookings/All，那么你需要使用一些javascipt来进行重定向。

作为旁注，您可能的值是＆＃34;所有＆＃34;，＆＃34;即将到来＆＃34;和＆＃34;历史＆＃34;建议您实际过滤结果（即使用.Where()子句）而不是对结果进行排序（使用.OrderBy()），以便更合适的属性名称可能是Filter而不是{{1 }}

Answer 2

有两种方法可以解决您的问题

将您的部分视图转换为View Components，然后加载它们通过JavaScript
将该视图设为布局 （NESTED LAYOUT） 然后加载根据所选选项将不同部分视为视图
- https://docs.microsoft.com/en-us/aspnet/core/mvc/views/layout
- Nested Layout Pages with Razor

如何使用asp.net-core w / o javascript中的单选按钮过滤我的部分视图？

2 个答案: