Adding a FileExplorer to a pre-existing solution

[Michael Crook]

There has got to be a simpler solution for this...

I am trying to add a FileExplorer to my pre-existing solution, I've added the binaries from the 4.5.0: 

• Syncfusion.EJ.Dll
• Syncfusion.Core.dll
  
• Syncfusion.Linq.Base.dll
  

and from /mvc/

• Syncfusion.EJ.MVC.dll
  

then I have added: 

@Html.EJ().FileExplorer("fileExplorer").FileTypes("*.png, *.gif, *.jpg, *.jpeg, *.docx, *.xlsx").Path("~/").AjaxAction(@Url.Content("FileActionEndpoint")).Width("900px").Height("400px")

into my view as well as added an action to the controller rendering this view of:

public ActionResult FileActionEndpoint(FileExplorerParams args)

        {

            switch (args.ActionType)

            {

                case "Read":

                    //return Json(opeartion.Read(args.Path, args.ExtensionsAllow));

                case "CreateFolder":

                    //return Json(opeartion.CreateFolder(args.Path, args.Name));

                case "Paste":

                    //return Json(opeartion.Paste(args.LocationFrom, args.LocationTo, args.Names, args.Action, args.CommonFiles));

                case "Remove":

                    //return Json(opeartion.Remove(args.Names, args.Path));

                case "Rename":

                    //return Json(opeartion.Rename(args.Path, args.Name, args.NewName, args.CommonFiles));

                case "GetDetails":

                    //return Json(opeartion.GetDetails(args.Path, args.Names));

                case "Download":

                    //opeartion.Download(args.Path, args.Names);

                    break;

                case "Upload":

                    //opeartion.Upload(args.FileUpload, args.Path);

                    break;

            }

            return Json("");

        }

When I open the page I don't see any components?? All I see if I view the source is a div with the id fileExplorer.

I am assuming this is because I need to reference some css and some js, but there is nothing (to what I can find) referenced in the docs of what I need to include for the explorer to render! I could just blindly add every thing that is inside of the demo projects, but I don't think that I will need it all and I don't like pulling down source files into my web pages which I don't need to.

Is there any documentation out there on adding controls to existing sites and or can anyone explain what I'm missing!

[Balamurugan P]

Hi Michael,

Sorry for the inconvenience. Currently we are cleaning up the getting started documentation of ASP.NET MVC components so it is temporarily removed from our online help link. It will be published soon once the documentation review phase is completed. For your convenience we have attached the documentation that is in review phase. Please refer to the below documentation for getting started with ASP.NET MVC components.

Documentation link: EJMVC getting started documentation

Basic steps for adding EJMVC components in the MVC application:  

Adding References and Assemblies

After creating an MVC application, add the necessary DLLs to your application to render the EJMVC components. You can refer to the page No 147 (in the above attached documentation) to know about adding the DLLs from GAC location. In page No. 149 we have explained how to refer to the assemblies from installed location.  

After adding required DLLs, you have to register the assemblies in web.config in appropriate location as shown below:

<compilation debug="true" targetFramework="4.5">

      <assemblies>

<!--Syncfusion.Core dll is not needed. we have removed this dll in our latest version 13.2.0.34--> 

        <add assembly="Syncfusion.EJ, Version=13.3400.0.7, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89"/>

        <add assembly="Syncfusion.EJ.Mvc, Version=13.3400.0.7, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89"/>

      </assemblies>

    </compilation> 

 

 

 

 

 

 

 

 

 

 

Checking unobtrusivejavascript state in web.config file:

Ensure whether the Unobtrusive setting is enabled or not. By default it will be in enabled state. If UnobtrusiveJavaScript is set to true then please  add the script file ej.unobtrusive.min.js file in our application. If the value is set to false,  add EJ().ScriptManager().

<appSettings>

    <add key="ClientValidationEnabled" value="true"/>

    <add key="UnobtrusiveJavaScriptEnabled" value="false"/>
  </appSettings>

For more details about namespaces, please refer to the page No. 155 in the documentation.

Adding namespaces.

Please add the necessary namespaces in the web.config file as shown below. 

    <namespaces>    

        <add namespace="Syncfusion.JavaScript"/>

        <add namespace="Syncfusion.MVC.EJ"/>

         </namespaces>

 

 

 

 

For more details about namespaces, please refer page No. 155 in the documentation.

Adding Scripts and CSS reference.

To render the Syncfusion MVC controls, it is necessary to refer the required CSS and Script files into your application. Please refer from Page number 156 in documentation to know about the CSS and script reference.

Necessary theme file

·         Refer page No. 156 in document to include necessary themes

Adding the required JavaScript files into your application plays an important role, without which the Syncfusion controls cannot be created. It requires the following mandatory common script files (Refer page No. 158),

·         jquery-1.10.2.min.js

·         jquery.easing.1.3.min.js

·         jsrender.min.js

Apart from the above common scripts, it is also necessary to refer the ej.web.all.min.js file in your application, which contains all our ej components scripts in minified format. Instead of using ej.web.all.min.js script, if you want to use individual scripts, which is used to render file explorer component. Custom script generator will be helpful to you. Please refer below link to include only the needed widgets.

Link: http://help.syncfusion.com/js/include-only-the-needed-widgets

Using the helper to render the components.

After completing the above steps successfully, now you can render our components by using the Helper in your view page as well as added an action to the controller rendering this view.    

Run the application to see the component in action.

For you reference we have attached a File explorer sample (created with version 13.3.0.7) in the following location, please check it.

Sample Location: http://www.syncfusion.com/downloads/support/forum/120834/ze/FIleExplorerDemo838441234

Please refer to the following link to know about the important features available in each EJMVC component:

http://help.syncfusion.com/aspnetmvc

You can see the demo of all EJMVC components from the following link,

http://mvc.syncfusion.com/demos/web

 

Our EJMVC components are created as wrapper for the JavaScript components. So the API, and events will be the same in both JS and EJMVC components. You can refer the following API reference section present in our online JS help document to know about the list of API’s, methods and events supported by each components.

http://help.syncfusion.com/js/api/ejfileexplorer

Regards,

Balamurugan P