Home » Jquery » javascript – How to create OrgChart JS using SQL Server database and ASP.NET c# ( Web Forms)

javascript – How to create OrgChart JS using SQL Server database and ASP.NET c# ( Web Forms)

Posted by: admin February 22, 2020 Leave a comment

Questions:

my project is Create an orgchart with orgchart.js (BALKANGRAPH)
I created a web forms and I added the file js, but in the side of file aspx.cs I don’t know how to link the nodes with my database.
i use WebMethod and Session object instead of MS SQL but i need to use MS SQL to read my database

this is my source code webform.aspx

    <form id="form1" runat="server">
        <asp:ScriptManager ID="scm" runat="server" EnablePageMethods="true" />
        <div id="tree">
        </div>
        </form>


        <script >
            var chart = new OrgChart(document.getElementById("tree"), {
                nodeBinding: {
                    field_0: "UO",
                    field_1:"Uo_Rattachement"
                },
                menu: {
                    pdf: { text: "Export PDF" },
                    png: { text: "Export PNG" },
                    svg: { text: "Export SVG" },
                    csv: { text: "Export CSV" }
                },
                nodeContextMenu: {
                    edit: { text: "Edit", icon: OrgChart.icon.edit(18, 18, '#039BE5') },
                    add: { text: "Add", icon: OrgChart.icon.add(18, 18, '#FF8304') }
                },


                nodeMenu: {
                    details: { text: "Details" },
                    edit: { text: "Edit" },
                    add: { text: "Add" },
                    remove: { text: "Remove" }
                },

            });
            chart.on('add', function (sender, n) {
                $.ajax({
                    type: 'POST',
                    url: '<%= ResolveUrl("~/WebForm1.aspx.cs/Add") %>',
                    data: JSON.stringify(n),
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json'
        });
    });
            chart.on('remove', function (sender, uo) {
                $.ajax({
                    type: 'POST',
                    url: '<%= ResolveUrl("~/WebForm1.aspx.cs/Remove") %>',
            data: JSON.stringify({ uo: uo }),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json'
        });
    });
            chart.on('update', function (sender, oldNode, newNode) {
                $.ajax({
                    type: 'POST',
                    url: '<%= ResolveUrl("~/WebForm1.aspx.cs/Update") %>',
            data: JSON.stringify({ oldNode: oldNode, newNode: newNode }),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json'
                });

            });

            chart.load(<%= Session["Nodes"] %>);

            });

</script>

and webform.aspx.cs here i need to show my data in format nodes

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            if (Session["Nodes"] == null)
            {
                SqlConnection conn = new SqlConnection("Data Source=OUMAIMA-PC\SQLEXPRESS;Initial Catalog=AGIRH;Integrated Security=True");
        DataTable dt = new DataTable();
        var jsonSerialization = new System.Web.Script.Serialization.JavaScriptSerializer();

        SqlCommand SelectCommand = new SqlCommand("select UO, UO_RATTACHEMENT, lib_reduit  from UNITE_ORG", conn);
        SqlDataReader myreader;
        conn.Open();
        myreader = SelectCommand.ExecuteReader();
        List<Node> list = new List<Node>();

        Session["Nodes"] = jsonSerialization.Serialize(list);
                // conn.Close();

            }

        }


    }

    public static void Add(string id, string pid)
    {
        var jsonSerialization = new System.Web.Script.Serialization.JavaScriptSerializer();
        var list = jsonSerialization.Deserialize<List<Node>>((string)HttpContext.Current.Session["Nodes"]);
        list.Add(new Node
        {
            uo = id,
            uo_rattachement = pid
        });
        HttpContext.Current.Session["Nodes"] = jsonSerialization.Serialize(list);
    }

    public static void Remove(string id)
    {
        var jsonSerialization = new System.Web.Script.Serialization.JavaScriptSerializer();
        var list = jsonSerialization.Deserialize<List<Node>>((string)HttpContext.Current.Session["Nodes"]);
        Node removeItem = null;
        foreach (var item in list)
        {
            if (item.uo == id)
            {
                removeItem = item;
                break;
            }
        }
        list.Remove(removeItem);
        HttpContext.Current.Session["Nodes"] = jsonSerialization.Serialize(list);
    }

    public static void Update(Node oldNode, Node newNode)
    {
        var jsonSerialization = new System.Web.Script.Serialization.JavaScriptSerializer();
        var list = jsonSerialization.Deserialize<List<Node>>((string)HttpContext.Current.Session["Nodes"]);
        foreach (var item in list)
        {
            if (item.uo == newNode.uo)
            {
                item.uo_rattachement = newNode.uo_rattachement;
                item.lib_reduit = newNode.lib_reduit;
                break;
            }
        }
        HttpContext.Current.Session["Nodes"] = jsonSerialization.Serialize(list);
    }

}

}

Node.cs

public class Node
{
    public string uo { get; set; }
    public string uo_rattachement { get; set; }
    public string lib_reduit { get; set; }
}
How to&Answer: