How to convert code from asp.net web forms to razor asp.net core page

Question

I need to fill tree view with parent child on razor asp.net core but I don't know how to fill tree view parent child

and child can select checkbox and can see related chid for every parent

my code with web form csharp

protected void Page_Load(object sender, EventArgs e)
{

if (!IsPostBack)
{
FillModuleName();
}
}
private void FillModuleName()
{
    string sql = "";
    clsDB obj = new clsDB(Session["g_ConnectionString"].ToString());
    DataSet ds = new DataSet();
    DataSet ds1 = new DataSet();
    int i = 0;
    try
    {
        sql = "select * from tblWebModule where parentmenucode='00'";
        ds = obj.ExecuteQuery(sql);
        if (ds.Tables[0].Rows.Count > 0)
        {
            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                TreeNode TN = new TreeNode();
                TN.Text = dr["MenuName"].ToString();
                TN.Value = dr["ChildMenuCode"].ToString();
                sql = "select * from tblWebModule where parentmenucode='" + dr["ChildMenuCode"].ToString() + "'";
                ds1 = obj.ExecuteQuery(sql);
                foreach (DataRow rw in ds1.Tables[0].Rows)
                {
                    TreeNode CN = new TreeNode();
                    CN.Text = rw["MenuName"].ToString();
                    CN.Value = rw["ChildMenuCode"].ToString();
                    TN.ChildNodes.Add(CN);
                }
                tvModules.Nodes.Add(TN);
            }
        }
    }
    catch (Exception ex)
    {

    }
}

on html tree view as below
    <tr>
                <td align="left" style="width: 100px; height: 24px">
                </td>
                <td align="left" style="width: 500px; height: 24px">
                    <asp:TreeView ID="tvModules" runat="server" ShowCheckBoxes="All" Font-Names="Verdana" Font-Size="Small" ImageSet="BulletedList">
                    </asp:TreeView>
                </td>
                <td align="left" style="width: 100px; height: 24px">
                </td>
            </tr>
            <tr>

so please How to organize this code on razor page model as below

page model

public void OnGet()

{

How to load tree view parent and child

}

on treeview.cs.html

{

layout

}

How to link page model with html to load tree view

<asp:TreeView ID="tvModules" runat="server" ShowCheckBoxes="All" Font-Names="Verdana" Font-Size="Small" ImageSet="BulletedList">
</asp:TreeView>

sample for result expected

Dennis J Gordon · Answer

Create a razor page and add the C# code from the web form to the C# page, add the html from the web form to the razor page.

ahmed salah · Answer

so please How to convert this function below to return list and if possible can you provide full function after return list of tree node private void LoadTreeNodes() { string sql = ""; DataSet ds = new DataSet(); DataSet ds1 = new DataSet(); int i = 0; try { sql = "select * from tblWebModule where parentmenucode='00'"; ds = obj.ExecuteQuery(sql); if (ds.Tables[0].Rows.Count > 0) { foreach (DataRow dr in ds.Tables[0].Rows) { TreeNode TN = new TreeNode(); TN.Text = dr["MenuName"].ToString(); TN.Value = dr["ChildMenuCode"].ToString(); sql = "select * from tblWebModule where parentmenucode='" + dr["ChildMenuCode"].ToString() + "'"; ds1 = obj.ExecuteQuery(sql); foreach (DataRow rw in ds1.Tables[0].Rows) { TreeNode CN = new TreeNode(); CN.Text = rw["MenuName"].ToString(); CN.Value = rw["ChildMenuCode"].ToString(); TN.ChildNodes.Add(CN); } tvModules.Nodes.Add(TN); } } } catch (Exception ex) { }

ahmed salah · Answer

thanks for support I try to load tree view on razor asp.net so i make the following steps : 1-create model class to load parent and children as below public class TreeNode { public string Text { get; set; } public string Value { get; set; } public List Children { get; set; } } 2-create list from tree node model for all lists parent with children public List TreeNodes { get; set; } 3-i will try to fill tree node when page load so i do as following public void OnGet() { // Load the tree view parent and child nodes here (you can use a similar logic as in your Web Forms code) TreeNodes = LoadTreeNodes(); } 4- so How to cast and change my code my function below LoadTreeNodes to return tree node so i can use it OnGet function() private void LoadTreeNodes() { string sql = ""; DataSet ds = new DataSet(); DataSet ds1 = new DataSet(); int i = 0; try { sql = "select * from tblWebModule where parentmenucode='00'"; ds = obj.ExecuteQuery(sql); if (ds.Tables[0].Rows.Count > 0) { foreach (DataRow dr in ds.Tables[0].Rows) { TreeNode TN = new TreeNode(); TN.Text = dr["MenuName"].ToString(); TN.Value = dr["ChildMenuCode"].ToString(); sql = "select * from tblWebModule where parentmenucode='" + dr["ChildMenuCode"].ToString() + "'"; ds1 = obj.ExecuteQuery(sql); foreach (DataRow rw in ds1.Tables[0].Rows) { TreeNode CN = new TreeNode(); CN.Text = rw["MenuName"].ToString(); CN.Value = rw["ChildMenuCode"].ToString(); TN.ChildNodes.Add(CN); } tvModules.Nodes.Add(TN); } } } catch (Exception ex) { } } so my issue now i cn't cast and convert function above to return tree node so How to do that

Mohamed Azarudeen Z · Answer

Hi ahmed To achieve a similar functionality in ASP.NET Core Razor Pages, you can use the standard HTML ul and li elements to create a tree-like structure, and then use JavaScript to handle the checkbox selections and visibility of child nodes. Here's a step-by-step guide on how to do this: Create a Razor Page Model ( TreeView.cshtml.cs ): using Microsoft.AspNetCore.Mvc.RazorPages; using System.Collections.Generic; namespace YourNamespace.Pages { public class TreeViewModel : PageModel { public class TreeNode { public string Text { get; set; } public string Value { get; set; } public List Children { get; set; } } public List TreeNodes { get; set; } public void OnGet() { // Load the tree view parent and child nodes here (you can use a similar logic as in your Web Forms code) TreeNodes = LoadTreeNodes(); } // Replace this method with your logic to load parent and child nodes private List LoadTreeNodes() { // Your logic to load the tree nodes // Example: var nodes = new List { new TreeNode { Text = "Parent 1", Value = "Parent1", Children = new List { new TreeNode { Text = "Child 1", Value = "Child1" }, new TreeNode { Text = "Child 2", Value = "Child2" } } }, new TreeNode { Text = "Parent 2", Value = "Parent2", Children = new List { new TreeNode { Text = "Child 3", Value = "Child3" } } } }; return nodes; } } } Create the Razor Page ( TreeView.cshtml ): @page @model YourNamespace.Pages.TreeViewModel Tree View @foreach (var parentNode in Model.TreeNodes) { @parentNode.Text @if (parentNode.Children != null && parentNode.Children.Count > 0) { @foreach (var childNode in parentNode.Children) { @childNode.Text } } } document.querySelectorAll('.parent-node').forEach(parentNode => { parentNode.addEventListener('change', function () { const parentId = this.id; const childNodes = document.querySelectorAll(`.child-node.parent-node-${parentId}`); childNodes.forEach(childNode => { childNode.style.display = this.checked ? 'list-item' : 'none'; }); }); });

How to convert code from asp.net web forms to razor asp.net core page

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (4)