在 Razor 页面中编辑元素的类列表-解网

问：

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

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

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

C# HTML ASP.NET-CORE 剃刀页

@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= "other name";

然后在它们各自的处理程序方法中，添加ViewData["ActivePage"] = "other name";

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

0赞 Yiyi You 3/3/2022 #2

这是一个工作演示，可以在没有 js 的情况下将活动类添加到选定的按钮： 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();
        }
            
           
        }

按钮 .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" [email protected][i].Id />
        <input hidden name="buttons[@i].Content" [email protected][i].Content />
        <input hidden name="buttons[@i].IsActive" [email protected][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>

结果：

0赞 Xinran Shen 3/3/2022 #3

我使用jquery/js在这里写了一个简单的演示，以显示单击按钮时，按钮将添加类并显示差异并从前一个中删除活动类activeBold borders

<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>
}

上一个：使用可变参数模板初始化静态数组

下一个：在DOS-BOX程序集中直接从磁盘读取

在 Razor 页面中编辑元素的类列表

Edit class list of element in Razor Page

评论