时间戳

首页 > 解决方案 > ASP.NET MVC：从视图导航时如何将客户端浏览器上的 DOM Body 元素的 ID 发送到控制器

asp.net - ASP.NET MVC：从视图导航时如何将客户端浏览器上的 DOM Body 元素的 ID 发送到控制器

问题描述

我正在开发一个 ASP.NET MVC 应用程序（ASP.NET NOT ASP.NET Core）。

呈现视图时，用户可以单击页面上的某些按钮来折叠或显示与每个按钮关联的 div。div 会根据它是折叠还是显示来更改其类。我为此使用引导属性，它工作正常。

现在我在页面上有一个“保存”按钮。当用户单击此按钮时，我需要检索 div 的 id 和类，并将它们传递给控制器​​（在数组/集合/字典中）。

ASP.NET 中是否有一种方法/方法可以将客户端浏览器上 DOM 元素的属性（id、类等）发送到控制器？

谢谢

标签： asp.netasp.net-mvc

解决方案

根据@Gia Khang 提供的答案

为了避免 URL 长度超过最大限制的问题，我做了一些更改。

我没有使用 JS 将元素的类添加到数组中，而是将它们添加到字符串中：

函数保存（）{

    var cds = document.getElementsByClassName('chosendiv');
    // I use as string instead of an array
    var finder = "";

     if(cds != null){
        for(i = 0; i< cds.length; i++){
        finder = finder + "id=" + cds[i].getAttribute('id') + "class=" + cds[i].getAttribute('class') + "data-code=" +cds[i].getAttribute('data-code')

        }
     }
                                                                                                                                                      
                                                                                        
        // Send finder to Controller. You can use Ajax...
        // A simple ajax call:

        var myURL = "/{Controller}/{Action}"

        $.ajax({
            url: myURL,
            type: "POST",
            data: { ids:finder },                                                            
               success: function (response) {
                }
            })
    }

在控制器操作中，我添加了一个名为“ids”的参数（这必须与 post 请求中数据对象的标识符相同），并通过以下方法从 ids 字符串中提取 id、类和数据值我的 Models 类之一（抱歉，我使用的是 VB.NET 而不是 C#，将代码转换为 C# 需要很多时间。我使用 VB 中的 Split 方法多次拆分 ids 字符串：第一个通过使用“id=”作为定界符，然后通过第二个定界符“class=”等吐出结果数组中的每个元素。我将结果元素添加到集合中）

控制器动作如下所示：

    public class HomeController: Controller
    {
         public HomeController(){}
    
         [HttpPost]
         public void YourAction(string ids)
         {
              
            Models.myClass.splitStringMethod(ids)
Return View()
}


    }

推荐阅读