Skip to content

Installation

Jump to bottom
Francesco Abbruzzese edited this page Nov 20, 2016 · 2 revisions

  1. Create an Ap.net core Mvc 1.0.1 project and install the MvcControlsToolkit.ControlsCore Nuget package 1.1.4.

  2. Install the following Bower packages: jquery-validation-unobtrusive-extensions: >= 1.0.2 to handle multilanguage enhanced client validation, bootstrap-html5-fallback >= 1.0.2 to have bootstrap widget fallback of all Html5 inputs, and finally mvcct-controls >= 1.0.3 to have the needed client side JavaScript support for all advanced Mvc Controls Toolkit controls.

  3. Install the following npm packages in the same order as given below. Important: As a default Asp.net Core 1.0.1 Mvc project template do not contain a "package.json" file, so no npm folder appears next to the Bower folder. In order to create one, please right click on the project root folder and select "add new item" then select "package.json".

    1. cldr-data >= 29.0.1. It will install the culture database used by the globalization system. Installation might last a few minutes. Pls, don't worry this big cultures database is not be deployed when the web application is published. Neither it is added to source control if you add "node_modules" to the "gitignore" file.
    2. globalize >= 1.1.1. It installs all modules needed by the globalize library.
    3. mvcct-templates >= 1.1.2. This is an Mvc Controls toolkit specific package that will scaffold some file in your project.Installation might last a few minutes. After installation Mvc Controls Toolkit tag helpers, and namespaces will be added to the _ViewImports.cshtml view, new task will be added to your gulpfile.js (within two files under a "tasks" folder), an mvcct-enhancer options and startup file will be added in wwwroot/startupjs/startup.js (see below), and some utility PartialViews will be placed in the Shared folder to handle Globalization, Validation, and Html5 fallback scripts,

  4. If not already there a gulpfile.js file appears in the project root. Right click on the project gulpfile.js in order to show the task runner, then run the following tasks:

    1. Open tasks/globalize.tasks.js, and verify if the selected languages/cultures cover your needs, otherwise add more. Then run the move:gdata task that will copy the selected languages data under wwwroot/globalize.
    2. Verify if the globalize modules mentioned in the same file cover your needs, otherwise add more, and then run the min:globalize that minimze the selected modules and plaze the in the unique wwwroot/globalize/globalize.min file.
    3. Open wwwroot/startupjs/startup.js. This file contains the overall options module that should be used by all Javascrit modules handled by the mvcct-enhancer module. Here you may force the usage of a widget fallback for any html5 input type also if browser supports it. It is enough to uncomment the relative section of otpion object and to set force: true. Otherwise bootstrap widget fallback will be used just in case browser doesn't support the associated html5 input. In this file you may also change the widget options (for more information see the bootstrap-html5-fallback documentation). The mvcct-enahence module makes available both client validation and html5 input fallback also on ajax received or dynamically created content. For more information see the mvcct-enhancer documentation.

    Once you have finished with options, minimize the startup.js file by invoking the min:startup gulp task.

  5. Add the following code in the css area of you Layout page:

    @{ await Html.RenderPartialAsync("_FallbackCss"); }

    and the following code at the end of the body:

    @{ await Html.RenderPartialAsync("_GlobalizationScriptsPartial"); }
@{ await Html.RenderPartialAsync("_EnhancementFallbackPartial"); }
@RenderSection("scripts", required: false)
<script src="~/startupjs/startup.min.js"></script>

    Validation script may be added to a page by adding:

    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }

    in the srcipt area of the View:

    @section Scripts {
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
}

    Anyway an example layout page with the above code inserted in the right points is included in the Shared folder.

  6. In the Startup.cs file, in the ConfigureServices methos, just after the instruction: services.AddMvc();, place:

    services.AddMvcControlsToolkitControls();

    or

    services.AddMvcControlsToolkitControls(m => { m.CustomMessagesResourceType = typeof(ErrorMessages); });

    If you want to provide a resorce file containing custom messages for all validation attributes (see point 3) in the documentation section for more details

    Then in the Configure method just before the app.UseMvc(routes =>...... instruction, place:

    app.UseMvcControlsToolkit();

DONE! you have finished!

Please don't forget to configure application culture coherently with the languages specified in tasks/globalize.tasks.js. Otherwise if the request set a current that is not among the one specified there Javascript code will break!

I strongly suggest to test all above steps in the example provided with the distribution. Important:perform just steps 1-4, since startup class and Layout view are already configured. Plese notice that the example contains migrations, so go in the web project folder, in the package manager consolle, and run the command dotnet ef database update. Please refer to the explanations in live examples for a better understanding of all examples.

Clone this wiki locally