如何访问服务器上的 Jquery TreeView？

Posted 2023-04-13

【中文标题】如何访问服务器上的 Jquery TreeView？

【英文标题】：How access Jquery TreeView on the server?

【发布时间】：2010-10-19 16:36:42

【问题描述】：

如何在表单提交时访问 .aspx 文件中的 Jquery Treeview？ 另外，我可以即时将节点添加到 Jquery Treeview 吗？ （在客户端）

我正在使用 asp.net 网络表单，c#

编辑： 有人在其中一个问题中提到了以下内容： “在提交表单时，有人将不得不在客户端编写代码来收集数据并通过 Ajax 将其发送到服务器方法”

这是怎么做到的？？？？？？

【参考方案1】：

嗯，我想我找到了你想要的。看看here。

简而言之，您必须在服务器端定义一个 WebMethod，然后您可以使用 jQuery 轻松访问它。一个出色的工作示例在上面的链接下，在这里我将对其进行修改以展示如何传递参数。所以...

在您的页面代码隐藏 *.cs:

// We'll use this class to communicate
public class Dog

    public string Name  get; set; 
    public string Color  get; set; 


// This is your page, in my case Default.aspx
public partial class _Default : System.Web.UI.Page

    [WebMethod]
    public static string ProcessData(Dog myDog)
    
        return "Your " + myDog.Color + " dog's name is " + myDog.Name + "!";
    

然后在你的 *.aspx 上：

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="json2.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function() 
        $("#btnProcess").click(function() 
            // This is what we want to send to the server
            var dogItem =
            
                 Color: $("#txtColor").val(),
                 Name: $("#txtName").val()
            ;

            // And this is how it should be sent - in serialized way
            var dogItemSerialized = JSON.stringify(dogItem);

            $.ajax(
                type: "POST",
                url: "Default.aspx/ProcessData",
                data: "'myDog':" + dogItemSerialized + "",    
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(msg) 
                    $("#result").text(msg.d);
                
            );
        );
    );

</script>
Color: <input id="txtColor" type="text" /><br />
Name: <input id="txtName" type="text" /><br />
<input id="btnProcess" type="button" value="Click Me" />
<div id="result"></div>

所以在这里你填写文本框，然后你的数据被发送到服务器，服务器将其理解为 Dog 对象。注意参数传递，因为这是最令人困惑的部分。您应该以 JSON 格式传递它们，这有点“过于冗长”。所以我在这里使用 json2.js 脚本，它有助于将常用的 javascript 对象转换为 JSON 序列化字符串（JSON.stringify() 方法）。它是可用的here。但它仍然相当难看 =) 我传递名为“myDog”的参数很重要，它的值是序列化的 dogItem。因为这正是服务器期望得到的（例如，我无法更改参数名称，这不起作用：

data: "'someAnotherArgumentName':" + dogItemSerialized + ""

最后一件事。请注意以下行：

success: function(msg) 
            $("#result").text(msg.d);
         

如果您使用的是 3.5 之前的 ASP.NET（例如，ASP.NET 2.0），那么您只需编写 $("#result").text(msg ) 而不是 msg.d。由于某种原因，只有 ASP.NET 3.5 封装了“d”成员下的所有数据...

无论如何，在上面的文章中，您可以找到有用的链接（在文章内部和 cmets 中），因此您可以阅读有关参数、“msg.d”等的更多信息。

我希望这会有所帮助！

【参考方案2】：

由于 jQuery Treeview 是一个客户端组件，您无法从服务器端访问它。因此，为了将任何数据从树传递到服务器，您必须编写客户端 javascript 代码（实际上是 jQuery 代码）。与动态添加节点到树视图相同：仅使用客户端 jQuery 代码。请记住，您在服务器端的 C# 不知道您的 TreeView。

jQuery 和 ASP.NET WebForms 之间的集成是相当有问题的并且“不是那么自然”，因为 ASP.NET 是建立在不同的概念之上的......所以如果你正在使用 ASP.NET WebForms，我建议你改用服务器端组件（它可以是 Microsoft 自己的 ASP:TreeView 或其他面向 WebForms 的第三方组件）。或者，您可以尝试新的 ASP.NET MVC 框架 - 它建立在更常见的（用于其他 Web 开发平台）概念之上，并且它与 jQuery 之间的集成非常简单（实际上 jQuery 甚至附带了它）。

不要误会我的意思...我并不是说 jQuery 和 ASP.NET WebForms 之间的集成是完全不可能的。有可能的。但是你需要做“不那么漂亮”的事情，并为每一个简单的操作而努力。如果您仍然想使用 jQuery，那么只将它用于客户端动画...

更新：至于这句话——“在提交表单时，有人将不得不在客户端编写代码来收集数据并通过 Ajax 将其发送到服务器方法”——这正是我所说的关于。在客户端，您在提交表单时调用 javascript 方法（例如，通过在“提交”按钮上设置 onclick='mymethod();'）。这段代码完成了它需要做的事情，然后......它应该使用 jQuery nice 语法执行 AJAX 调用。但这不适用于 ASP.NET WebForms，正如我之前解释的那样。好吧，您可以阅读有关 Microsoft AJAX 客户端库的信息（此处为：http://msdn.microsoft.com/en-us/magazine/cc163300.aspx），也许这会有所帮助。但我仍然认为这种整合不会简单明了。将 jQuery 用于动画，将 ASP.NET 服务器端组件用于所有其他内容！

【讨论】：

感谢 Dmitry，我没有坚持使用 jQuery 树视图。我只需要一个纯客户端的树视图。我所需要的只是客户端的树视图，然后保存按钮将触发一个回调，该回调将收集树视图数据并将其发送到服务器。

当然我可以实现自己的树视图，但在这个时代我不应该这样做。

据我了解，只要我可以在客户端访问树，我应该可以使用MS回调（我的页面将实现System.Web.UI.ICallbackEventHandler接口）来消费树并将数据传递给服务器，JSON 格式。我意识到使用 Jquery ajax 不适用于 .net

好吧，如果你的树视图应该在客户端，那么也许你确实想使用 jQuery，因为它更好用更简单。但是您理解正确：您将无法使用它的 ajax 功能。您将需要 MS AJAX 客户端库（我不太熟悉它 =()

所以本质上，要将树信息发送到服务器方法，我需要使用 ASP.NET AJAX 库吗？