Hybrid View

  1. #1
    Sencha Premium Member
    Join Date
    Dec 2012
    Posts
    29
    Vote Rating
    2
    Dennis.Gearmesh is on a distinguished road

      1  

    Default How to use Ext JS 4.1.1 in .Net MVC 4 project using Visual Studio 2012

    How to use Ext JS 4.1.1 in .Net MVC 4 project using Visual Studio 2012


    It took me a while to figure this out since all of the links I could find were for older versions of Ext JS or older versions of .Net MVC. I wanted to post it here in case anyone else has problems figuring it out.
    1. Get the required Ext JS files
      • Download Ext JS, and extract the .zip file.
      • As of right now, you can get a free 30-day trial of Sencha Complete if you haven't purchased a license.
    2. Create the project in Visual Studio 2012
      • Open Visual Studio 2012 (I'm using Express 2012 for Web)
      • On the left, under "Start," choose "New Project..."
      • Under "Installed" -> "Templates" -> "Visual C#" -> "Web," select "ASP.NET MVC 4 Web Application"
      • Give the solution a name and a location.
      • Click "OK" to move to the next window.
      • For "View Engine" choose "Razor."
      • It doesn't matter if you create a unit test project.
      • Click "OK" to create the project.
    3. Add necessary files to the web project
      • Create a new folder in your web application. Call it "extjs"
      • In the Ext JS folder you extracted, find the folder called "resources". Copy the entire folder and paste it into the "extjs" folder inside your web project.
      • In the Ext JS folder you extracted, find the file called "ex-all.js". Copy that file and paste it into the "Scripts" folder inside your web project.
    4. Bundle the javascript file so your web project can use it.
      • In your web project, open the folder called "App_Start". Inside that folder, open the file called "BundleConfig.cs".
      • Inside "public static void RegisterBundles(BundleCollection bundles){}, add the following code:
        bundles.Add(new ScriptBundle("~/bundles/extjs").Include("~/Scripts/ext-all.js"));
    5. Bundle the .css file so your web project can use it.
      • In your web project, open the folder called "App_Start". Inside that folder, open the file called "BundleConfig.cs".
      • Inside "public static void RegisterBundles(BundleCollection bundles){}, add the following code:
        bundles.Add(new StyleBundle("~/Content/extjs").Include("~/extjs/resources/css/ext-all.css"));
    6. Render your bundles in the _Layout.cshtml file so that any view can use it.
      • Open "Views -> Shared -> _Layout.cshtml".
      • Add the following lines of code insice the <head></head> tag.
        • @Styles.Render("~/Content/extjs")
        • @Scripts.Render("~/bundles/extjs")
    7. Add a JavaScript reference so that you have intellisense support
      • Inside the "Scripts" folder, open the file called "_references.js".
      • Add the following code to the end of the document
        • /// <reference path="ext-all.js" />
    8. Test to be sure it's hooked up correctly.
      • Open "Views -> Home -> Index.cshtml."
      • At the very bottom of the file, type the following (notice that you should have intellisense working):
        • <script>Ext.onReady(function () { alert('hello') });</script>
      • Save your project and click the play button.
      • When the page loads, you should see an alert message that says "hello."

  2. #2
    Sencha User
    Join Date
    Oct 2007
    Location
    Orlando, FL
    Posts
    19
    Vote Rating
    0
    wadebee is on a distinguished road

      0  

    Default ExtJS Intellisense rocks

    ExtJS Intellisense rocks


    Step 7 was the key - thanks!

    I put the CDN dev reference (ext-all-dev.js) into Tools | Options | Text Editor | Javascript | Intellisense | References and now I have verbose ExtJS Intellisense everywhere. The ExtJS documenters did a great job and the Intellisense even includes code examples. Wonderful!

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    27
    Vote Rating
    0
    Link_ is on a distinguished road

      0  

    Default


    Hello Guys,


    I have a problem. I'm not able to do the work on extjs 4 in my asp.net mvc application 4.
    Simply nothing happens when I run my application, ie a blank page appears. By Firebug I found the following error:
    [COLOR=red !important]Uncaught SyntaxError: Unexpected identifier bundles/extjs?v=judcVaZnVQSTVXaPvtFF5liVbED9azajR9zxYgY6wTk1:848371[/COLOR]
    • [COLOR=red !important]Uncaught ReferenceError: Ext is not defined aplicacao:1[/COLOR]
    See the structure of my application in the attached file:
    app_folder.png

    My main application app.js
    Code:
    Ext.Loader.setConfig({
        enabled: true,
        disableCaching: true,
        paths: {
            'Ext': '../Scripts/ext411/src',
            //'Ext.ux':'../Scripts/ext411/src/ux',
            'APP': '../app'
        }
    });
    Ext.BLANK_IMAGE_URL = "../Scripts/ext411/resources/themes/images/default/tree/s.gif";
    Ext.application({
        name: 'APP',
        appFolder: '../app',
        controllers: [
            'Menu'
            ,'Custom'
            ,'Bank'
            ,'Person'       
        ],
        autoCreateViewport: true
    });
    BundleConfig.cs

    Code:
    using System.Web.Optimization;
    
    
    namespace Business.App_Start
    {
        public class BundleConfig
        {
            // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
            public static void RegisterBundles(BundleCollection bundles)
            {
                bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                            "~/Scripts/jquery-{version}.js"));
    
    
                bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                            "~/Scripts/jquery-ui-{version}.js"));
    
    
                bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                            "~/Scripts/jquery.unobtrusive*",
                            "~/Scripts/jquery.validate*"));
    
    
                // Use the development version of Modernizr to develop with and learn from. Then, when you're
                // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
                bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                            "~/Scripts/modernizr-*"));
    
    
                bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css", "~/Content/hti_styletoolbars.css"));
    
    
                bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                            "~/Content/themes/base/jquery.ui.core.css",
                            "~/Content/themes/base/jquery.ui.resizable.css",
                            "~/Content/themes/base/jquery.ui.selectable.css",
                            "~/Content/themes/base/jquery.ui.accordion.css",
                            "~/Content/themes/base/jquery.ui.autocomplete.css",
                            "~/Content/themes/base/jquery.ui.button.css",
                            "~/Content/themes/base/jquery.ui.dialog.css",
                            "~/Content/themes/base/jquery.ui.slider.css",
                            "~/Content/themes/base/jquery.ui.tabs.css",
                            "~/Content/themes/base/jquery.ui.datepicker.css",
                            "~/Content/themes/base/jquery.ui.progressbar.css",
                            "~/Content/themes/base/jquery.ui.theme.css"));
    
    
                // Bundles Extjs
                bundles.Add(new StyleBundle("~/Content/extjs411").Include("~/Scripts/ext411/resources/css/ext-all.css"));
                bundles.Add(new StyleBundle("~/Content/extjs411/ux/css").Include("~/Scripts/ext411/src/ux/alert.css"));
                bundles.Add(new ScriptBundle("~/bundles/extjs411").Include("~/Scripts/ext411/ext.js"));
                bundles.Add(new ScriptBundle("~/bundles/extjs411/locale").Include("~/Scripts/ext411/locale/ext-lang-pt_BR.js"));
                bundles.Add(new ScriptBundle("~/bundles/aplicacao").Include("~/app/app.js"));
            }
        }
    }
    _Layout.cshtml
    Code:
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>@ViewBag.Title - My ASP.NET MVC Application</title>
            <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
            <meta name="viewport" content="width=device-width" />
            @Styles.Render("~/Content/css")  
            @Scripts.Render("~/bundles/modernizr")
    
    
        </head>
        <body>
            <header>
                <div class="content-wrapper">
                    <div class="float-left">
                        <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
                    </div>
                    <div class="float-right">
                        <section id="login">
                            @Html.Partial("_LoginPartial")
                        </section>
                        <nav>
                            <ul id="menu">
                                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                                <li>@Html.ActionLink("About", "About", "Home")</li>
                                <li>@Html.ActionLink("Financial", "Index", "MenuPrincipal")</li>
                                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
            <div id="body">
                @RenderSection("featured", required: false)
                <section class="content-wrapper main-content clear-fix">
                    @RenderBody()
                </section>
            </div>
            <footer>
                <div class="content-wrapper">
                    <div class="float-left">
                        <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
                    </div>
                </div>
            </footer>
    
    
            @Scripts.Render("~/bundles/jquery")
            @RenderSection("scripts", required: false)
        </body>
    </html>
    My Index.cshtml MenuPrincipal
    Code:
    @{
        ViewBag.Title = "Business";
        Layout = null;
    }
    <head>
        <title>Business</title>
    </head>
    
    
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/extjs411")
    @Styles.Render("~/Content/extjs411/ux/css")
    
    
    @Scripts.Render("~/bundles/extjs411")
    @Scripts.Render("~/bundles/extjs411/pkgs")
    @Scripts.Render("~/bundles/extjs411/locale")
    
    
    @Scripts.Render("~/bundles/aplicacao")
    Please, any help will be appreciated


    hugs

  4. #4
    Sencha User
    Join Date
    Jan 2014
    Posts
    1
    Vote Rating
    0
    Friggin is on a distinguished road

      0  

    Default


    Thank you, worked like a charm!

  5. #5
    Sencha User
    Join Date
    Jun 2014
    Posts
    1
    Vote Rating
    0
    shobs is on a distinguished road

      0  

    Default ExtJs 5 in .Net MVC

    ExtJs 5 in .Net MVC


    Hi All
    Thank you for the detailed steps but however can someone help me out in integrating Ext Js 5 in .Net MVC using Visual studio .
    I haven't downloaded EXTJS 4 . I am new to EXTJS scripting and wish to start my application with EXTJS 5.

Thread Participants: 4

Tags for this Thread