我已经举了一个例子来说明你的想法,我希望。它使用
SimpleModal
(弹出窗口本身仍然需要一些工作)。当弹出窗口打开时,将显示一个文本框和一个提交按钮。提交时,通过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
包含更多代码行的文件。它有很多评论,所以我希望一切都清楚。
<%@ 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>
