We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to save and load diagram from Database?

Platform: ASP.NET Web Forms |
Control: Diagram |
Published Date: December 17, 2014 |
Last Revised Date: May 30, 2019 |
.NET Framework: 4.5.1

Diagram can be saved and loaded back from database.

  1. Save method of diagram returns a serialized JSON object that contain the current state of the diagram.
  2. You can convert the JSON object into a string and it can be stored anywhere (file, database, etc...)
  3. This string can be converted back to JSON object and loaded using Load method.
  4. The same methodology can be used for both ASP.NET and ASP.NET MVC application.

The following section explains you on how to implement the above.

ASP.NET MVC

In ASP.NET MVC, save and load in database is performed using AJAX Post method. The following code illustrates how to save the diagram in database.

Save

CSHTML

     function save() {
        var diagram = null;
        var diagram = $("#diagram1").ejDiagram("instance");
        //returns diagram model’s json data
        var save = diagram.save();
        //convert JSON object to JSON string
        var Jsonstring = JSON.stringify(save);
        //pass JSON string to server via AJAX post
        $.ajax({
            url: "/Entity/save",
            type: "Post",
            dataType: "json",
            data: { "stringify": Jsonstring },
            success: function (Jsonstring) {
                alert("Success");
                return true;
            },
        });

The following HttpPost is executed when the jQuery AJAX call is made from client side. This method accepts the JSON string from client side and it is inserted in the database.

CONTROLLER

[HttpPost]
        public ActionResult save(string stringify)
        {
                NorthwindcontextsDiagramEntities entities = new NorthwindcontextsDiagramEntities();
                SaveDatabase SaveJSON = new SaveDatabase();
                SaveJSON.JSONString = stringify;
                SaveJSON.Name = "Sam";
                entities.SaveDatabases.Add(SaveJSON);
                entities.SaveChanges();
            return null;
        }

The following code illustrates how to load the diagram from the database.

Load

CSHTML

function load() {
        $.ajax({
            url: "/Entity/load",
            type: "Post",
            success: function (Jsonstring) {
                var diagram = null;
                var diagram = $("#diagram1").ejDiagram("instance");
                //convert JSON string to JSON object
                var loadDiagram = JSON.parse(Jsonstring);
                //load the diagram using saved json data
                diagram.load(loadDiagram);
            },
        });
    }

The following HttpPost is executed when the jQuery AJAX call is made from client side. This method retrieves the JSON string from the database and send to client side.

CONTROLLER

[HttpPost]
        String name,jsonstring;
        public ActionResult load()
        {
            NorthwindcontextsDiagramEntities entities = new NorthwindcontextsDiagramEntities();
            entities = SqlCE;
            List<SaveDatabase> loadJSON = entities.SaveDatabases.ToList<SaveDatabase>();
            foreach (SaveDatabase data in loadJSON)
            {
                jsonstring = data.JSONString;
                name = data.Name;
            }
            string loadcontent= jsonstring;
            return Content(loadcontent);
        }

 

Here is the sample of ASP.NET MVC

Sample:http://www.syncfusion.com/downloads/support/forum/121121/ze/saveloadsample1583379421

 

ASP.NET

In ASP.NET, save and load in database is performed using AJAX PageMethods. PageMethods is a new mechanism in ASP.NET applications where the server code can be bound to ASP.NET pages. It is an easy way to communicate asynchronously with the server using ASP.NET AJAX technologies. It is an alternate to calling the page that is reliable and carries a low risk. It is basically used to expose the web methods to the client script. 

Set EnablePageMethods=”true” in ScriptManger tag that allows to call a web page method directly from JavaScript.

ASPX

<asp:ScriptManager ID="ScriptManager1" runat="server"   EnablePageMethods="true"></asp:ScriptManager>

The following code illustrates how to save the diagram in database.

Save

ASPX

function save() {
            var diagram = null;
            var diagram = $("#Diagram1").ejDiagram("instance");
            //returns diagram model’s json data
            var saving = diagram.save();
            //convert JSON object to JSON string
            var stringify = String(JSON.stringify(saving));
            PageMethods.save(stringify);
        }

The following WebMethod is executed when the AJAX PageMethods call is made from client side. This method accepts the JSON string from client side and it is inserted in the database.

ASPX.CS

[WebMethod]
        public static void save(string stringify)
        {
            NorthWindDataContextDiagramEntities entities = new NorthWindDataContextDiagramEntities();
            SaveDatabase SaveJSON = new SaveDatabase();
            SaveJSON.JSONString = stringify;
            SaveJSON.Name = "Sam";
            entities.SaveDatabases.Add(SaveJSON);
            entities.SaveChanges();
        }

The following code illustrates how to load the diagram from the database.

ASPX

function load() {
            PageMethods.load(OnSuccess);
        }
        function OnSuccess(stringify) {
            var diagram = null;
            var diagram = $("#Diagram1").ejDiagram("instance");
            //convert JSON string to JSON object
            var loaddiagram = JSON.parse(stringify);
            //load the diagram using saved json data
            diagram.load(loaddiagram);
        }

The following HttpPost is executed when the AJAX PageMethods call is made from client side. This method retrieves the JSON string from the database and send to client side.

ASPX.CS

[WebMethod]
        String name,jsonstring;
        public static string load()
        {
            NorthWindDataContextDiagramEntities entities = new NorthWindDataContextDiagramEntities();
            entities = SqlCE;
            List<SaveDatabase> loadJSON = entities.SaveDatabases.ToList<SaveDatabase>();
            foreach (SaveDatabase data in loadJSON)
            {
                jsonstring = data.JSONString;
                name = data.Name;
            }
            string loadcontent = jsonstring;
            return loadcontent;
        }

 

Here is the sample of ASP.NET

Sample:http://www.syncfusion.com/downloads/support/directtrac/152798/ze/Iandbsample-1867133503

2X faster development

The ultimate ASP.NET Web Forms UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon