编辑 Razor 页面中的 class 个元素列表

Question

我有一个 Razor 页面，在 HTML 中有一个按钮列表，我希望能够更改这些按钮上的 class 列表以突出显示当前选定的按钮。每个按钮如下所示：

<form asp-page-handler="Posts" method="post">
    <button href="posts" class="nav-link text-white active" aria-current="page">
        Posts
    </button>
</form>

单击它时，它将调用一个处理程序方法，我想向其中添加活动 class 并从前一个中删除活动 class。这在 javascript 中是微不足道的，也许在 c# 中是这样，但经过一个小时的搜索，我找不到方法来做到这一点。

Answer 1

下面的解决方案使用 jquery/js.

将 data-attribute 添加到所有 .nav-link 按钮。我用了 data-page.

<button data-page="posts href="posts" class="nav-link text-white" aria-current="page">
   Posts
</button>

在您的帖子页面获取处理程序中，将“帖子”分配给某个视图数据索引。

ViewData["ActivePage"] = "posts";

然后在layout.cshtml中添加这个脚本。

@section scripts {
   <script> 
      $(document).ready(function(){
         @if(ViewData["ActivePage"] != null)
         {
            <text>var activePage = "@ViewData["ActivePage"]";</text>
         }
         else
         {
            <text>var activePage = "";</text>
         }

         // loop through navlinks and assign/remove active class
         $(".nav-link").each(function(){
            var dataPage = $(this).data("page");

            if(dataPage == activePage){
               $(this).addClass("active");
            }
            else{
               $(this).removeClass("active");
            }
         });
      });
   </script>
}

对于其他按钮，您只需要分配唯一性即可data-page； data-page= "other name";

然后在各自的handler方法中，添加ViewData["ActivePage"] = "other name";

由于脚本将包含在布局中，因此它会为所有页面激活。

Answer 2

这是一个工作演示，无需 js 即可将活动 class 添加到所选按钮： cshtml.cs:

[BindProperty]
        public List<Button> buttons { get; set; }
 public void OnGet()
        {
            buttons = new List<Button> { new Button { Id = 1, Content = "button1" }, new Button { Id = 2, Content = "button2"}, new Button { Id = 3, Content = "button3" } };
public IActionResult OnPostPosts(int id)
        {
            buttons.ForEach(b => b.IsActive = false);
            buttons.Where(b => b.Id == id).ToList().ForEach(b => b.IsActive = true);
            //save data to database,add data to gridBind

            return Page();
        }
            
           
        }

Button.cs:

 public class Button {
        public int Id { get; set; }
        public string Content { get; set; }
        public bool IsActive { get; set; }


    }

查看：

<form method="post">
    @for (var i = 0; i < Model.buttons.Count; i++)
    {
        <input hidden name="buttons[@i].Id" value=@Model.buttons[i].Id />
        <input hidden name="buttons[@i].Content" value=@Model.buttons[i].Content />
        <input hidden name="buttons[@i].IsActive" value=@Model.buttons[i].IsActive />


    }
    @foreach (var item in Model.buttons)
    {
        <input  type="submit" asp-page-handler="Posts" asp-route-id="@item.Id" class="nav-link text-white @(item.IsActive ? "active" : "")" aria-current="page" value="@item.Content" />

    }

</form>

结果：

Answer 3

我用jquery/js在这里写了一个简单的demo来展示当点击按钮时，按钮会添加active class和Bold borders以显示差异并删除上一个

的活动 class

<form asp-page-handler="Index" method="post">
    <button href="posts" class="nav-link text-black " aria-current="page" id="btn_submit1">
        Posts
    </button>
</form>
<br />
<form asp-page-handler="Index" method="post">
    <button href="posts" class="nav-link text-black " aria-current="page" id="btn_submit2">
        Posts1
    </button>
</form>
<br />
<form asp-page-handler="Index" method="post">
    <button href="posts" class="nav-link text-black " aria-current="page" id="btn_submit3">
        Posts2
    </button>
</form>

//...............

@section Scripts{
    <head>      
    <style>           
          .active{
                border: solid;
            }
    </style>
</head>
    <script>
        $(function(){
            var data = localStorage.getItem("index");
            if(data!=null){
                $("#"+data).addClass('active');
            }
        })

        $("button").click(function () {     
        localStorage.setItem("index",  this.id );
    });
    </script>
}

编辑 Razor 页面中的 class 个元素列表

Edit class list of element in Razor Page

html

c#

asp.net-mvc

asp.net-core

razor-pages