在最小化服务器-客户端行程的同时从弹出窗口更新 TreeView 节点
Posted
技术标签:
【中文标题】在最小化服务器-客户端行程的同时从弹出窗口更新 TreeView 节点【英文标题】：Update TreeView node from a pop up window while mimimizing server-client trips 【发布时间】：2010-10-18 16:37:03 【问题描述】：我发了几次，但没有人会给我一个我能用简单的英语理解的答案。我是 JSON/JQuery/Ajax/所有其他很酷的库或工具的新手，你可能会建议我，所以请记住这一点。
我正在使用 c# 和 asp.net 网络表单（我也有 ajax 工具包，但还没有使用它）。
这是我的场景：
我需要实现一个将使用 TreeView 控件的功能。
父页面将显示一个 TreeView，用户将能够单击该节点，这将触发一个弹出窗口，用户将在其中输入一些信息。
弹出窗口会将信息保存到数据库，将结果值返回给父窗口，并且父窗口应更新以反映更改。
据我了解，这很常见。
现在，我的问题是实现这一目标的最简单方法是什么，同时记住我必须尽量减少客户端和 Web 服务器之间的行程次数？
【问题讨论】：
【参考方案1】：我建议将jQuery 与jqModal 插件一起使用，而不是使用“弹出窗口”。
不管这应该是你在 javascript 中寻找的东西，
opener.document.[parent_form_ID].[parent_input_ID].value = [value to be passed to the parent];
可以在子窗口的save事件中加入上述代码，将用户输入的数据传回给父窗口。
【讨论】：
我想你误解了我的意思。我似乎很难理解我的观点。弹出窗口会将数据保存到 DATABASE - 这意味着它将使用 SERVER aspx 文件来执行此操作。存储过程将返回在保存记录时生成的 ID。 请记住，这是一个 SERVER 脚本。现在，我需要将此 id 传递给父页面上的 TREEVIEW。在您的示例中， value_to_be_passed 需要来自 SERVER aspx 页面。希望这很清楚，并感谢您的帮助。 您可以让孩子返回 ID 客户端，然后将其传递给父母，或者让孩子将 ID 存储在会话中以供父母使用。 会话解决方案在这里听起来更好。 我尽量远离它。检索到 ID 后，我将清除会话变量。我使用 jQuery 和 Ajax，这消除了在这里使用会话的需要。【参考方案2】：就个人而言，您可能想要做的只是在将值返回到父页面时触发异步回发以更新树视图。
本质上，将树视图放在一个UpdatePanel中，然后有一个隐藏的按钮来触发，并从JS调用它来强制更新。它将降低有效负载，并且很可能是您需要更新的最低限度。
【讨论】：
【参考方案3】：我希望我已经整理了一个可以满足您需求的示例。它使用SimpleModal 打开一个客户端jQuery 弹出窗口（弹出窗口本身还需要一些工作）。当弹出窗口打开时，会显示一个文本框和一个提交按钮。提交时，通过 Ajax 调用 ASP.NET 页面方法。 page 方法接收发布的数据并返回一个随机数（以表明它有效）。然后随机数显示在树中。
首先是aspx.cs 文件（没有导入）和用作页面方法返回类型的类：
public 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;
页面方法很简单。它接收节点 ID，因此您知道要在数据库中更新什么、来自文本框的值以及返回后要更新的 UI 元素的 ID。该方法返回一个 MethodResult 类的实例，其中包含要更新的 UI 元素的 id 和实际结果（一个随机数）。
接下来我们有aspx 文件，其中包含更多代码行。它有很多 cmets，所以我希望一切都清楚。
<%@ 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>
【讨论】：
以上是关于在最小化服务器-客户端行程的同时从弹出窗口更新 TreeView 节点的主要内容，如果未能解决你的问题，请参考以下文章