Asp.net Core MVC Dealing with validation scripts as a seperate file

Question

I was in the process of adding javascript files to site.js and the page was recognizing the scripts however I struck a wrinkle when I tried to move the validation scripts to site.js.

Site.js appears above the validation scripts which are added to the page using

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

Rather than having the validation scripts for the page being on the page (or is this how most people do it) how do I add say add a validation.js page etc that I might add below the above entry.. further,

If I do add another page how do I minify it (add it to GULP) and add it in the production staging environment as well..

Janshair Khan · Accepted Answer · 2016-06-01 07:11:39Z

3

It is recommended that you should put the validation script rendering into a section as:

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

and then refer it in the _Layout.cshtml at the bottom of the body as:

    @RenderSection("scripts", required: false)

Then you will be able validate your forms and these JS files will appear only at that view in which you referred.

If I do add another page how do I minify it (add it to GULP) and add it in the production staging environment as well..

You will have to minify your JS files once for all of your Views (pages) and they will work.

edited Jun 1, 2016 at 7:11

answered Jun 1, 2016 at 7:07

Janshair Khan

2,6875 gold badges25 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

si2030 Over a year ago

I already have that in the bottom of my page. I am referring to custom validation scripts in this case a custom script for validating the Australian ATO number. Its currently at the bottom of the page that uses it however I think it should be in its own file. Its under these circumstances that I ask about where do I put this custom validation script.. sorry of the question was not clear.

Janshair Khan Over a year ago

If it is in the validation section, modify the order in which files get rendered in the section and check the developer tooling of the browser that which file got missed who made the validations failed. Putting them in another file is also an option. But it is recommended to put them in the same section.

Mo09890 · Accepted Answer · 2016-06-01 07:11:58Z

Ideally you'd like all scripts to be loaded at the end of the page as scripts can block the rendering of your page and make it appears slower to the user. The way we achieve this is by using sections in our layout file.

In your layout file you could add the following code:

@rendersection("scripts", required: false)

Then in your views you can add any specific scripts that they require:

@section scripts {
    @Scripts.Render("~/Scripts/Validation.js")
}

Scott Gu has a good blog post that will explain sections a bit more in depth

As for minification have you looked at using the built in bundling and minification tools that come with mvc nowadays? Here's another blog post this time by Rick Anderson that explains in all but essentially you can define different bundles which can be set to automatically bundle and minify the scripts for you. Defining a bundle is as simple as:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
             "~/Scripts/jquery-{version}.js"));

And outputing them to your page is the same as above except instead of the link to your source file you use the bundle link you defined. So outputting the above would be done like so:

@Scripts.Render("~/bundles/jquery")

Collectives™ on Stack Overflow

Asp.net Core MVC Dealing with validation scripts as a seperate file

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related