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 child 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

Answer 1

fixed code

private void LoadTreeNodes()
{
    tvModules = new TreeNode
    {
        Children = new List<TreeNode>();
    };
    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();
                TN.Children = new List<TreeNode>();
                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.Children.Add(CN);
                }
                tvModules.Children.Add(TN);
            }
        }
    }
    catch (Exception ex)
    {
        throw ex;
    }
}

sample razor page (requires styling for button.collaspe):

<ul class="menu">
    @foreach (var node in tvModules.Children)
    {
        <li>
            <button class="collaspe" type="button">-</button>
            <input type="checkbox" name="checklist" value="@node.Value">
            @node.Text
            <ul>
                @foreach (var child in node.Children)
                {
                    <li>
                        <input type="checkbox" name="checklist" value="child.Value">
                        @child.Text
                    </li>
                }
            </ul>
        </li>
    }
</ul>
@section Scripts {
<script>
    $('ul.menu button.collaspe').click(function () {
        const open = this.innerText == "-";
        this.innerText = open ? "+" : "-";
        $(this).closest("li").find("ul")[open ? "hide" : "show"]("slow");
    });
</script>
}

Answer 2

Hello, this is Gulshan Negi

Well, converting code from ASP.NET Web Structures over completely to Razor punctuation in ASP.NET Center includes understanding the distinctions between the two systems, setting up an ASP.NET Center task, making Razor Pages, relocating markup and code-behind rationale, refreshing occasions taking care of, information restricting, route, and URLs, and completely testing and troubleshooting the changed over pages. The interaction might shift relying upon the intricacy of the application, and it's fitting to allude to true documentation and extra assets for direction.

Thanks

Answer 3

Build a tree in razor pages is a two step process.

first build a tree in memory from the database results as in the webform code. You can create formal nodes, or just use collections of collections.

the in razor page create a recursive function to render the node and its children as ul/li elements.

You can also get 3rd party tree views

Answer 4

to load the tree, you need a base node and use the Children (or ChildNodes whichever you used) collection to add.:

var tvModules = new TreeNode();

....
tvModules.Children.Add(TN);