当前位置： 文江博客话题详情

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

发布于 2025-01-11 07:47:16 字数 405 浏览 0 评论 0原文

我有一个 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# 中是微不足道的，但经过一个小时的搜索，我找不到一种方法来做到这一点。

原文

I have a Razor Page and in the HTML there's a list of buttons and I want to be able to change the class list on those buttons to highlight the currently selected one. Each button looks like so:

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

When it is clicked it will call a handler method and I want to add the active class to it and remove the active class from the previous one. This would be trivial in javascript and maybe it is in c# but after an hour of searching, I can't find a way to do this.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

烟燃烟灭 2025-01-18 07:47:16

这是一个在没有 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();
        }
            
           
        }

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" [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>

结果：
输入图片此处描述

Here is a working demo to add the active class to selected button without 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();
        }
            
           
        }

Button.cs:

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


    }

View:

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

result:
enter image description here

回复 原文
涫野音 2025-01-18 07:47:16

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

  1. 将数据属性添加到所有 .nav-link 按钮。我使用数据页。
<button data-page="posts href="posts" class="nav-link text-white" aria-current="page">
   Posts
</button>
  1. 在您的帖子页面获取处理程序中，将“帖子”分配给某个视图数据索引。
ViewData["ActivePage"] = "posts";
  1. 然后在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= "other name";

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

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

The solution below uses jquery/js.

  1. Add data-attribute to all the .nav-link buttons. I used data-page.
<button data-page="posts href="posts" class="nav-link text-white" aria-current="page">
   Posts
</button>
  1. In your Posts page get handler, assign "posts" to a certain viewdata index.
ViewData["ActivePage"] = "posts";
  1. Then in the layout.cshtml, add this script.
@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>
}

For the other buttons, you just need to assign unique data-page; data-page= "other name";

Then in their respective handler methods, add ViewData["ActivePage"] = "other name";

Since the script will be included in layout, it would activate for all the pages.

回复 原文
遇见了你 2025-01-18 07:47:16

我使用 jquery/js 在这里编写一个简单的演示，以显示当单击按钮时，按钮将添加 active 类和 粗体边框 以显示差异并从中删除 active 类上一个

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

“输入图像描述这里"

I use jquery/js write a simple demo here to show when click on the button, button will add active class and Bold borders to show the difference and remove the active class from the previous one

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

enter image description here

回复 原文
~没有更多了~

关于作者

帥小哥

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

若能看破又如何

文章 0 评论 0

夢野间

文章 0 评论 0

doggiejohn

文章 0 评论 0

就此别过

文章 0 评论 0

初见终念

文章 0 评论 0

qq_rvKjBH

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文