Bootstrap & MVC

E

envo

Expert Member
Joined
Jan 14, 2014
Messages
3,265
Reaction score
437
I was wondering, I have my _Layout.cshtml done and set. The problem I have with it, is if I add a component on a page that uses a JavaScript and/or CSS file specific to that, I have to modify the _Layout.cshtml and include it for all other pages as well (which I don't want).

I'm not using the "bundleconfig" from MS as I don't feel comfortable with it (haven't spent much time to learn that specifically or if it could help me in this scenario)

How would you approach this?

I was thinking about a piece of JavaScript I wrote yonks ago which loads scripts on demand, so you don't need to specify them on the main page, but how do you do that for stylesheets? And is this idea still viable?

Thanks for any advice in the matter
 
envo said:
I was wondering, I have my _Layout.cshtml done and set. The problem I have with it, is if I add a component on a page that uses a JavaScript and/or CSS file specific to that, I have to modify the _Layout.cshtml and include it for all other pages as well (which I don't want).

I'm not using the "bundleconfig" from MS as I don't feel comfortable with it (haven't spent much time to learn that specifically or if it could help me in this scenario)

How would you approach this?

I was thinking about a piece of JavaScript I wrote yonks ago which loads scripts on demand, so you don't need to specify them on the main page, but how do you do that for stylesheets? And is this idea still viable?

Thanks for any advice in the matter
Click to expand...

how is this different to jquery's $.getScript(); ?

Other than that, I am not really sure what your question is, it's not clear to me.
 
_kabal_ said:
how is this different to jquery's $.getScript(); ?

Other than that, I am not really sure what your question is, it's not clear to me.
Click to expand...

Yea, I wrote that stuff pre-jQuery days

The question is: How do I add new pages with specific js/css only for that page and not have to add it to the _Layout page each time

sp4ceman said:
That problem is sort of exactly what bundles solve.

What I did was have my base js in my layout. Then define other bundles on a per area or per page basis and include each script bundle as required
Click to expand...

Could you perhaps share some code? As I said, haven't really looked at bundles. The MVC 5 project is written in a "plugin" way using MEF/Reflection. Haven't bothered checking if bundle configs will load the stuff correctly yet. Again. Total noob with that regard.
 
Code: 
@section Scripts {

  @Scripts.Render("~/facd")
  
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" />
<script>
  jQuery(document).ready(function () {
    UIGeneral.init();
  });
</script>

}
@section AccountSearchCSS{
  @Styles.Render("~/AccountSearchCSS")
}

in _layout

Code: 
  @if (IsSectionDefined("AccountSearchCSS"))
  {
    @RenderSection("AccountSearchCSS", required: false)
  }


Near bottom

Code: 
 @RenderSection("Scripts", required: false)
 
_kabal_ said:
how is this different to jquery's $.getScript(); ?

Other than that, I am not really sure what your question is, it's not clear to me.
Click to expand...

Jquery $.getscript is not ideal. You should rather be using AMD.
 
envo said:
I was wondering, I have my _Layout.cshtml done and set. The problem I have with it, is if I add a component on a page that uses a JavaScript and/or CSS file specific to that, I have to modify the _Layout.cshtml and include it for all other pages as well (which I don't want).

I'm not using the "bundleconfig" from MS as I don't feel comfortable with it (haven't spent much time to learn that specifically or if it could help me in this scenario)

How would you approach this?

I was thinking about a piece of JavaScript I wrote yonks ago which loads scripts on demand, so you don't need to specify them on the main page, but how do you do that for stylesheets? And is this idea still viable?

Thanks for any advice in the matter
Click to expand...

You knock it but you dont even understand it? Okay.
 
semaphore said:
Jquery $.getscript is not ideal. You should rather be using AMD.
Click to expand...

well obviously... I was more asking why, I assumed, he reinvented the wheel, as I doubt he wrote a commonjs or requirejs competitor :p


anyway, so these are free .net MVC lessons for me, why on earth do you need special conditions to load javacipt/css into specific pages/views??

why cant you just say in your dog view, you want to use the bark.js module/script include, and in your cat view, you want to use the meow.js module/script include?
 
_kabal_ said:
well obviously... I was more asking why, I assumed, he reinvented the wheel, as I doubt he wrote a commonjs or requirejs competitor :p


anyway, so these are free .net MVC lessons for me, why on earth do you need special conditions to load javacipt/css into specific pages/views??

why cant you just say in your dog view, you want to use the bark.js module/script include, and in your cat view, you want to use the meow.js module/script include?
Click to expand...

No idea why he wants to do it. Lol.
 
You don't need the special conditions, that was a bonus lesson... first just check how a section works.

If you add this to your layout, it outputs a section name "MyScripts" at that position in the html output:
@RenderSection("MyScripts", required: false)

In your dog page you define that section if you like:
@section MyScripts { <script>alert('woof');</script> }
 
Alternatively if you dont want to use Bundler, you can use GulpJs. I'm currently using it as an alternative to bundler optimization.
 
GoB said:
You don't need the special conditions, that was a bonus lesson... first just check how a section works.

If you add this to your layout, it outputs a section name "MyScripts" at that position in the html output:
@RenderSection("MyScripts", required: false)

In your dog page you define that section if you like:
@section MyScripts { <script>alert('woof');</script> }
Click to expand...

Ahh ok, that reads clearer and makes sense, similar to how you would do a tiles layout, and how I would expect it to work. That is my confusion with the OPs question, it already does what he wants
 
semaphore said:
You knock it but you dont even understand it? Okay.
Click to expand...

I didn't knock it? I said I wasn't comfortable with it, as in, I don't know how to use it properly or how to implement it. Thought I made it clear I haven't spent much time learning it specifically to apply to a specific scenario or not, hence the question.

I must say dude, even though I find you funny 99% of the time as you reply to people, your attitude kind of sucks.
 
_kabal_ said:
well obviously... I was more asking why, I assumed, he reinvented the wheel, as I doubt he wrote a commonjs or requirejs competitor :p


anyway, so these are free .net MVC lessons for me, why on earth do you need special conditions to load javacipt/css into specific pages/views??

why cant you just say in your dog view, you want to use the bark.js module/script include, and in your cat view, you want to use the meow.js module/script include?
Click to expand...

This was before the days of jQuery or any kind of real JavaScript framework BTW

Some of the JavaScript and CSS I'm using in the bootstrap theme I have is dependant on each other and/or loads in specific ways. So I can't just stick the JS or CSS in the RenderBody() part, it has to go in the header/footer of _Layout. If I don't, then I get errors about jQuery not being loaded yet etc
 
semaphore said:
Code: 
@section Scripts {

  @Scripts.Render("~/facd")
  
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" />
<script>
  jQuery(document).ready(function () {
    UIGeneral.init();
  });
</script>

}
@section AccountSearchCSS{
  @Styles.Render("~/AccountSearchCSS")
}

in _layout

Code: 
  @if (IsSectionDefined("AccountSearchCSS"))
  {
    @RenderSection("AccountSearchCSS", required: false)
  }


Near bottom

Code: 
 @RenderSection("Scripts", required: false)
Click to expand...

Thanks for taking the time to post this
 
semaphore said:
Np. It can start to grow nasty looking fast. Hence me switching to gulp.
Click to expand...

This is enough for me to solve the immediate problem and I doubt we'd need anything more than this. The application is simple enough for now. When I look at BundleConfig some more, I'll have a look at gulp too and push to implement that instead if we go there

Thanks again
 
envo said:
This is enough for me to solve the immediate problem and I doubt we'd need anything more than this. The application is simple enough for now. When I look at BundleConfig some more, I'll have a look at gulp too and push to implement that instead if we go there

Thanks again
Click to expand...


Code: 
var gulp = require('gulp'),
    gutil = require('gulp-util'),
    uglify = require('gulp-uglify'),
    jshint = require('gulp-jshint'),
    concat = require('gulp-concat'),
    jshintreporter = require('jshint-stylish'),
    minifycss = require('gulp-minify-css'),
    size = require('gulp-size'),
    clean = require('gulp-clean'),
    rename = require('gulp-rename');


var paths = {
    appjsmin: {
        src: './app/**/*.js',
        dest: './app/dist/'
    },
    libjsmin: {
        src: './assets/scripts/*.js',
        dest: './lib/scripts'
    }
};

gulp.task('app-minify', function() {
    gulp.src(paths.appjsmin.src)
        .pipe(uglify())
        .pipe(concat('app.js'))
        .pipe(size())
        .pipe(gulp.dest(paths.appjsmin.dest))
});

gulp.task('app-js-hint', function() {
    gulp.src(paths.appjsmin.src)
        .pipe(jshint())
        .pipe(jshint.reporter(jshintreporter));

});

gulp.task('build', ['app-minify']);
gulp.task('jslint', ['app-js-hint']);
[

Basic gulp task file.
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X