C# 从弹出窗口更新TreeView节点，同时模拟服务器-客户端跳闸
我贴了好几次，但没有人会给我一个我能用通俗易懂的答案。我不熟悉JSON/JQuery/Ajax/所有其他很酷的lib或工具，请记住这一点 我将c#与asp.NETWeb表单一起使用（我也有ajax工具包，但还没有使用它） 以下是我的设想：C# 从弹出窗口更新TreeView节点，同时模拟服务器-客户端跳闸,c#,asp.net,jquery,webforms,treeview,C#,Asp.net,Jquery,Webforms,Treeview,我贴了好几次，但没有人会给我一个我能用通俗易懂的答案。我不熟悉JSON/JQuery/Ajax/所有其他很酷的lib或工具，请记住这一点 我将c#与asp.NETWeb表单一起使用（我也有ajax工具包，但还没有使用它） 以下是我的设想： 我需要实现一个使用TreeView控件的功能 父页面将显示一个树状视图，用户可以单击该节点，这将触发一个弹出窗口，用户将在其中输入一些信息 弹出窗口将信息保存到数据库中，将结果值返回到父窗口，父窗口应更新以反映更改 从我的理解来看，这是非常常见的情况 现在
- 我需要实现一个使用TreeView控件的功能
- 父页面将显示一个树状视图，用户可以单击该节点，这将触发一个弹出窗口，用户将在其中输入一些信息
- 弹出窗口将信息保存到数据库中，将结果值返回到父窗口，父窗口应更新以反映更改
opener.document.[parent_form_ID].[parent_input_ID].value = [value to be passed to the parent];
您可以将上述代码添加到子窗口的“保存”事件中，以将用户输入的数据传回父窗口。您个人可能需要做的只是在将值返回到父页面时触发异步回发以更新树视图
本质上，将树视图放在UpdatePanel中，然后触发一个隐藏按钮，并从JS调用它以强制更新。它将降低有效负载，并且很可能是您需要更新的最小值。我已经列出了一个示例，希望能够满足您的需要。它使用打开客户端jQuery弹出窗口（弹出窗口本身还需要一些工作）。当弹出窗口打开时，将显示一个文本框和一个提交按钮。提交时，通过Ajax调用ASP.NET页面方法。page方法接收已发布的数据并返回一个随机数（以表明它有效）。然后在树中显示随机数 首先是
aspx.cspublic partial class _Default : Page
{
[WebMethod]
public static MethodResult SaveData(string nodeId, string value,
string elementId)
{
return new MethodResult
{ ElementId = elementId, Result = new Random().Next(42) };
}
}
public class MethodResult
{
public string ElementId { get; set; }
public int Result { get; set; }
}
MethodResultaspx<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SO_736356._Default" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test</title>
<script type="text/javascript" src="Scripts/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="Scripts/jquery.simplemodal-1.2.3.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
// Select all a elements with an id that starts with 'treet' (all
// nodes in the tree have an id that starts with treet: treet0,
// treet1, ...). Add an onclick handler to all these elements.
$("a[id^='treet']").click(function() {
// In an asp:TreeView the href element of each node contains
// the node value so we parse the href element to obtain this
// value.
var href = $(this).attr("href");
$("#hiddenNodeId").val(href.substring(href.lastIndexOf("\\\\") + 2, href.indexOf("')")));
// We need to remember the id of the element we clicked on,
// otherwise we don't what element to update when the page
// method call returns.
$("#hiddenElementId").val($(this).attr("id"));
// Show the popup.
$("#popup").modal();
// Return false to cancel the onclick handler that was already
// on the a element (view source).
return false;
});
// The spanSubmit element is our postback link so when we click it
// we perform an AJAX call to the page method (Default.aspx/SaveData).
$("#spanSubmit").css("cursor", "hand").click(function() {
var nodeId = $("#hiddenNodeId").val();
var input = $("#txtInput").val();
var elementId = $("#hiddenElementId").val();
$.ajax({
type: "POST",
url: "Default.aspx/SaveData",
// The parameter names must match exactly.
data: "{nodeId: \"" + nodeId + "\", value: \"" +
input + "\", elementId: \"" + elementId + "\"}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(result) {
// The property result.d contains our result. We select
// the right element and set its text to another value.
$("#" + result.d.ElementId).text(
"Random number " + result.d.Result);
}
});
});
});
</script>
</head>
<body>
<form id="form" runat="server">
<div>
<%-- The actual tree, no fancy stuff here. --%>
<asp:TreeView ID="tree" runat="server">
<Nodes>
<asp:TreeNode Value="0" Text="Node_0" >
<asp:TreeNode Value="0_0" Text="Node_0_0">
<asp:TreeNode Value="0_0_0" Text="Node_0_0_0" />
<asp:TreeNode Value="0_0_1" Text="Node_0_0_1" />
</asp:TreeNode>
<asp:TreeNode Value="0_1" Text="Node_0_1">
<asp:TreeNode Value="0_1_0" Text="Node_0_1_0" />
</asp:TreeNode>
<asp:TreeNode Value="0_2" Text="Node_0_2">
<asp:TreeNode Value="0_2_0" Text="Node_0_2_0" />
</asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Value="1" Text="Node_1">
<asp:TreeNode Value="1_0" Text="Node_1_0">
<asp:TreeNode Value="1_0_0" Text="Node_1_0_0" />
<asp:TreeNode Value="1_0_1" Text="Node_1_0_1" />
</asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</div>
<%-- The popup with the hidden fields that are set when we click a node
and the textbox and submit button. --%>
<div id="popup" style="display: none;">
<input id="hiddenNodeId" type="hidden" />
<input id="hiddenElementId" type="hidden" />
<label id="lblInput" for="txtInput">Input:</label><input id="txtInput" type="text" />
<br />
<span id="spanSubmit">Save</span>
</div>
</form>
</body>
</html>
试验
$（文档）.ready（函数（）{
//选择id以“treet”（全部）开头的所有元素
//树中的节点的id以treet:treet0开头，
//将onclick处理程序添加到所有这些元素。
$（[id^='treet']）。单击（函数（）{
//在asp:TreeView中，查看每个节点的href元素包含
//节点值，因此我们解析href元素以获得该值
//价值观。
var href=$（this.attr（“href”）；
$（“#hiddenNodeId”）.val（href.substring（href.lastIndexOf（“\\\\”）+2，href.indexOf（“'）））；
//我们需要记住我们点击的元素的id，
//否则我们不知道当页面更新时更新什么元素
//方法调用返回。
$（“#hiddenElementId”）.val（$（this.attr（“id”））；
//显示弹出窗口。
$（“#弹出窗口”）.modal（）；
//返回false以取消已创建的onclick处理程序
//在a元素上（查看源）。
返回false；
});
//spanSubmit元素是我们的回发链接，因此当我们单击它时
//我们对page方法（Default.aspx/SaveData）执行AJAX调用。
$（“#spanSubmit”）.css（“光标”、“手”）。单击（函数（）{
var nodeId=$（“#hiddenodeId”）.val（）；
变量输入=$（“#txtInput”）.val（）；
var elementId=$（“#hiddenementid”）.val（）；
$.ajax({
类型：“POST”，
url:“Default.aspx/SaveData”，
//参数名称必须完全匹配。
数据：“{nodeId:\”+nodeId+“\”，值：\”+
输入+“\”，elementId:\“”+elementId+“\”}，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（结果）{
//属性result.d包含我们的结果。我们选择
//选择正确的元素并将其文本设置为另一个值。
$（“#”+result.d.ElementId）.text(
“随机数”+结果d.结果）；
}
});
});
});
输入：
拯救