I've put together an example that does what you want, I hope. It opens a client-side jQuery popup using SimpleModal (the popup itself still needs some work). When the popup opens, a textbox and a submit button are shown. On submit, an ASP.NET page method is called via Ajax. The page method receives the posted data and returns a random number (to show that it works). The random number is then shown in the tree.
First the aspx.cs file (without imports) and the class that is used as the page method return type:
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; }
}
The page method is very simple. It receives the node id so you know what to update in the database, the value from the textbox and the id of the UI element to update after returning. The method returns an instance of the MethodResult class that contains the id of the UI element to update and the actual result (a random number).
Next we have the aspx file that has some more lines of code. It has a lot of comments so I hope everything is clear.
<%@ 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>