Я собрал пример, который делает то, что вы хотите, я надеюсь. Он открывает клиентское всплывающее окно jQuery, используя SimpleModal (само всплывающее окно все еще нуждается в некоторой работе). Когда откроется всплывающее окно, отобразятся текстовое поле и кнопка отправки. При отправке метод страницы ASP.NET вызывается через Ajax. Метод 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; }
}
Метод страницы очень прост. Он получает идентификатор узла, чтобы вы знали, что нужно обновить в базе данных, значение из текстового поля и идентификатор элемента пользовательского интерфейса, который нужно обновить после возврата. Метод возвращает экземпляр класса MethodResult, который содержит идентификатор элемента пользовательского интерфейса для обновления и фактический результат (случайное число).
Далее у нас есть файл 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>