گرفتن متن و مقدار Node در TreeView با استفاده از جاوا اسکریپت در ASP.NET
باسلام در این مقاله توضیح خواهیم داد که چگونه مرجع node را انتخاب همراه با ویژگی Text و Value آن ازTreeView client side با استفاده از جاوا اسکریپت را دریافت کنید.
برای شروع از TreeView ساده و یک دکمه در صفحه ASPX اضافه میکنیم .
<div>
<asp:TreeView ID="TreeView1" runat="server">
<SelectedNodeStyle ForeColor="Black" />
</asp:TreeView>
</div>
<asp:Button ID="Button1" runat="server" Text="GetSelectedNode" OnClientClick="return GetSelectedNode();" />
در بالا یک روش جاوا اسکریپت در رویداد OnClientClick ایجاد میکنیم که بعدا توضیح خواهیم داد .
حالا با استفاده از snippet کد ساده، TreeView را با لیستی از میوه ها پر می کنیم.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
TreeView1.Nodes.Add(new TreeNode("Mango", "Fruit1"));
TreeView1.Nodes.Add(new TreeNode("Apple", "Fruit2"));
TreeView1.Nodes.Add(new TreeNode("Pineapple", "Fruit3"));
TreeView1.Nodes.Add(new TreeNode("Orange", "Fruit4"));
TreeView1.Nodes.Add(new TreeNode("Grapes", "Fruit5"));
}
}
در اینجا اسکریپت مرجع node انتخابی TreeView را دریافت و همچنین بخشی از متن و مقدار آن را استخراج می کند.
<script type="text/javascript">
function GetSelectedNode() {
var treeViewData = window["<%=TreeView1.ClientID%>" + "_Data"];
if (treeViewData.selectedNodeID.value != "") {
var selectedNode = document.getElementById(treeViewData.selectedNodeID.value);
var value = selectedNode.href.substring(selectedNode.href.indexOf(",") + 3, selectedNode.href.length - 2);
var text = selectedNode.innerHTML;
alert("Text: " + text + "\r\n" + "Value: " + value);
} else {
alert("No node selected.")
}
return false;
}
</script>
اسکریپت فوق به دنبال شی TreeView Data است که node انتخابی کنترل TreeView را ذخیره می کند. در تصویر زیر کار این اسکریپت را شرح می دهد
