Add Essential Diagram to the Application (Razor)

Adding Essential Diagram to an application includes the following steps:

Adding Reference Assemblies

To add reference assemblies:

  1. On the Solution Explorer, right-click References folder, and then click Add Reference.

    NOTE

    The Add Reference dialog box appears where the Projects tab is highlighted by default. The assemblies for the MVC application are listed here.

  2. Select the following assemblies from .NET tab: Syncfusion.Core, Syncfusion.Diagram.Mvc, Syncfusion.Linq.Base, Syncfusion.Theme.Base and Syncfusion.Shared.Mvc.

  3. Click OK.

NOTE

The selected assemblies are added under the References folder.

Adding Scripts

To add scripts:

  1. On the Solution Explorer, double-click Shared__folder under the Views folder, and then double-click the _Layout.cshtml file.

    NOTE

    The _Layout.cshtml page appears.

  2. On the Solution Explorer, click the Scripts folder. A list of available scripts available is displayed.

  3. Import the following JavaScript files to the _Layout.cshtml page.

    • jquery-1.5.1.min.js
    • MicrosoftAjax.js
         <head>
    
             <title>@ViewBag.Title</title>
    
             <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    
             <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    
             <script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
    
         </head>

    NOTE

    Specify the correct *.js file name that is included in the Scripts folder.

Adding StyleManager and ScriptManager

Adding StyleManager

StyleManager is a new CSS resource manager that helps in registering CSS files, which enables minification, compression, and combination of CSS resources for ASP.NET MVC Web applications. The files in StyleManager resources are set to be combined, minified, and compressed (either gzip or deflate depending on your browser) before being sent to the browser. All these are done using a single HTTP request per resource set. Add the StyleManager extension method in the HEAD tag of the View pages (in most cases, it is reasonable to call it within the Site.Master page). Use the Register method to register Grid component.

  • javascript
  • @
    (Html.Syncfusion().StyleManager()
    
        .Register(component =>
    
            {
    
                component.Add(ComponentType. {
                    ComponentName
                });
    
            })) >

    Adding ScriptManager

    ScriptManager is a new script resource manager that helps in registering the JavaScript files. The ScriptManager registers only the Syncfusion.Mvc components script files. The files in ScriptManager resources are set to be combined, minified, and compressed (either gzip and deflate depending on your browser) before being sent to the browser. 

    The ScriptManager() extension method has improved performance over the RegisterStaticResource() method. Therefore, this method is recommended in registering the scripts. The ScriptManager() method should be placed after all the components on the page. Generally, you can use this method at the end of the master page.

  • html
  • <body>
    
        <div class="page">
    
            <div id="header">
    
                <div id="title">
    
                    <h1>
    
                        My Syncfusion Diagram MVC Application</h1>
    
                </div>
    
                <div id="menucontainer">
    
                    <ul id="menu">
    
                        <li>@Html.ActionLink("Through Model", "ThroughModel", "Diagram")</li>
    
                        <li>@Html.ActionLink("Through View", "ThroughView", "Diagram")</li>
    
                    </ul>
    
                </div>
    
            </div>
    
            <div id="main">
    
                @RenderBody()
    
                <div id="footer">
    
                </div>
    
            </div>
    
        </div>
    
        @{Html.Syncfusion().ScriptManager().Render();}
    
    </body>

    NOTE

    Add this ScriptManager() method at the end of the body tag. Do not add this at the top of the body tag.

    Adding Codes to the Web.config File

    To add codes to the Web.config file:

    1. On the Solution Explorer, double-click Web.config file. The Web.config page appears.

      NOTE

      There will be two Web.config files. Refer to the one in the root folder.

    2. Add the following assemblies in the Web.config page under tag: Syncfusion.Core, Syncfusion.Diagram.Mvc, Syncfusion.Linq.Base, and Syncfusion.Shared.Mvc.

           <compilation debug="true" targetFramework="4.0">
      
           <assemblies>
      
           <!-- Assemblies required for running the application -->
      
           <add assembly="System.Web.Abstractions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
      
           <add assembly="System.Web.Helpers, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
      
           <add assembly="System.Web.Routing, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
      
           <add assembly="System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
      
           <add assembly="System.Web.WebPages, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
      
      
      
           <!-- Assemlies for adding Diagram -->
      
           <add assembly="Syncfusion.Core, Version=x.x.x.x, Culture=neutral, PublicKeyToken=632609b4d040f6b4"/>
      
           <add assembly="Syncfusion.Linq.Base, Version= x.x.x.x, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89"/>
      
           <add assembly="Syncfusion.Shared.Mvc, Version= x.x.x.x, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89"/>
      
           <add assembly="Syncfusion.Diagram.Mvc, Version=x.x.x.x, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89"/>
      
      
      
           </assemblies>
      
           </compilation>

      NOTE

      X.X.X.X in the above code corresponds to the current version number of the Essential Studio.

    3. Add the Syncfusion.Mvc.Diagram, Syncfusion.Mvc.Shared, and Syncfusion.Mvc.Tools namespaces under the tag.

           <pages>
      
           <namespaces>        
      
           <!-- Namespaces required to run the application -->
      
           <add namespace="System.Web.Helpers" />
      
           <add namespace="System.Web.Mvc" />
      
           <add namespace="System.Web.Mvc.Ajax" />
      
           <add namespace="System.Web.Mvc.Html" />
      
           <add namespace="System.Web.Routing" />
      
           <add namespace="System.Web.WebPages"/>
      
      
      
           <!-- Namespaces used for Diagram -->
      
           <add namespace="Syncfusion.Mvc.Shared"/>
      
           <add namespace="Syncfusion.Mvc.Diagram"/>
      
           </namespaces>
      
           </pages>
    4. Register the handlers under and tags in Web.config file by using the following code.

           <!-- Following httpHandler should be added under system.web -->
      
           <httpHandlers>
      
           <add verb="GET,HEAD" path="MvcResourceHandler.axd" type="Syncfusion.Mvc.Shared.MvcResourceHandler, Syncfusion.Shared.Mvc, Version=x.x.x.x, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" validate="false"/>
      
           </httpHandlers>
      
      
           <!-- Following handlers has to be added under system.webServer -->
      
           <system.webServer>
      
           <validation validateIntegratedModeConfiguration="false"/>
      
           <modules runAllManagedModulesForAllRequests="true"/>
      
           <handlers>
      
           <remove name="MvcResourceHandler"/>
      
           <add verb="GET,HEAD" name="MvcResourceHandler" path="MvcResourceHandler.axd" type="Syncfusion.Mvc.Shared.MvcResourceHandler, Syncfusion.Shared.Mvc, Version=x.x.x.x, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89"/>
      
           </handlers>
      
           </system.webServer>

    NOTE

    • In VS2010, the and are registered inside the machine.config file. For more information, see_ [http://weblogs.asp.net/scottgu/archive/2009/08/25/clean-web-config-files-vs-2010-and-net-4-0-series.aspx](http://weblogs.asp.net/scottgu/archive/2009/08/25/clean-web-config-files-vs-2010-and-net-4-0-series.aspx)_. Add the and tags under and respectively.
    • X.X.X.X in the above code corresponds to the current version number of the Essential Studio.

    Adding Codes to the Web.config File in View (Views\Web.config)

    There will be two web.config files. Refer to the one in the Views folder. To add codes to the web.config file in View, add Syncfusion.Mvc.Diagram, Syncfusion.Mvc.Shared, and Syncfusion.Mvc.Tools namespaces under the tag.

  • xaml
  • <system.web.webPages.razor>
    
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
    
    <namespaces>
    
        …………..
    
        …………..
    
    <add namespace="Syncfusion.Mvc.Shared"/>
    
    <add namespace="Syncfusion.Mvc.Diagram"/>
    
    <add namespace="Syncfusion.Mvc.Tools"/>
    
    
    
    </namespaces>
    
    </pages>
    
    </system.web.webPages.razor>

    Creating Diagram Control

    Refer to Creating a Diagram Control.