When debugging my MVC3 app in Visual Studio using IE9 I see lots of small "script block" entries for my page. My page relies heavily on AJAX, and some actions result in replacing sections of the DOM with partial views coming back from the server.
What I'm seeing is a growing list of these "script block" entries - should I be worried about this? Will this ultimately be a performance problem when the app is live?
Note: the script blocks are quite small bits of code - I've moved most of my significant javascript into their own .js files.
Mm, I thinks it's more of a personal style thing with modern browsers, but if nothing else, trying to contain all the script for a view in one block at the bottom of the page will make for easier debugging and your future self will thank you for it!
As a general rule of thumb I will only have script blocks in pages that need to use the document.ready or variables from my viewmodel. Otherwise, I would move all the functions into their own js file. It helps keep the views cleaner and the browser will load the page faster since it won't block loading the page when it hits as many script tags. Plus, it will make debugging easier since you can go straight to the js file instead of having to find the function within the HTML.
Related
i'm totally a beginner of jquery mobile, i'm wondering how does everybody build the UI?
by html markup or writing pure code?
if it's by html markup, then if i have a complex applicaiton , then i'm gonna have a very long html file with a lot of pages, how do you deal with that?
if with pure code, i don't find it easy to create widgets, the only i found it just to put the pure html code into a jquery object wrapper. it's not very object-oreinted, i want some simple ways like: var $aButton = new button( );
i had ios native app development experience, normally i write the ui with pure coding. i'm just wondering if there's way to build ui with pure code?
There's no official way to build the UI in pure code but no one stops you from writing your own "code generator".
Be warned:
Writing HTML is the easier way to do, because JQM will do all of the UI-manip.
I'm working on a UI generator for JQM which
will be released opensource. Still a lot to do but it already works more or less - see http://officejs.com
Check the erp5loader.js file which generates the whole app - there is only an empty index.html.
The factory section contains all methods necessary to generate JQM UI. The JSON files loaded show how to generate static and dynamic widgets as well as how to hook into navigation and global action bindings
Roll your own or wait until we are releasing ours :-)
Long story short:
We've had errors being logged concerning a JQuery/JQueryUI based system for some time. At it's core we're doing a pretty basic click link -> JQuery AJAX GET -> Open JQueryUI modal pattern.
The error we were getting appeared simple - "Object doesn't support property or method 'dialog'" - leading us to believe there was an error with JQueryUI. After expending a lot of time ruling out browser incompatibilities, bad code on JQuery's end, bad code on our end, angry code gods... we caught a lucky break. A 100% repro on one of the machines in the office.
Turns out the thing was riddled with adware - specifically [an older version of] easyinline - http://www.easyinline.com. When the user clicked any link a cascade of javascript files would be loaded, including reloading JQuery from Google's CDN.
For most links this isn't really a problem - they take you off the page anyway and everything reloads. But for our modals it meant that every modal link would stamp over our JQuery at the point the request was sent, resulting in the response trying to make use of the 'new' $ which would now be missing JQueryUI and any other plugins.
Initially we thought about making another global var ($$ or something) for 'our' JQuery and explicitly using that in our code instead of just $. The issue with that is that we were using a few other 3rd party tools which rely on $ and the adware-loaded $ is a different (older) version. So it's important that we preserve $ correctly.
Any ideas? I'm aware of JQuery's noConflict() method but after a cursory glance don't think it fits the bill.
Ultimately we've decided to re-establish our JQuery integrity when we receive any ajax responses (i.e. just before the open modal code is executed). All our ajax stuff is wrapped in our own handler so this was fairly easy to inject across the board.
Basically;
We have the original JQuery 'saved' - we've got it in-scope thanks to our handler but it could be easily put into a separate global (like $$) just after it is loaded. In our ajax response handler we've got a fairly straightforward check;
if (window.$ !== $$) {
window.$ = window.jquery = window.jQuery = $$;
}
This will reset the global jquery back to what it should be.
well this is just a work around and not a full fledged solution.
you can try multiple things here
1. if you have control over what the adware loads then just put in something like this if(!$) where they try to load the jquery
2. try loading your plugin at the end of the page
3.even if end of the page is not working. Try injecting the link(a script tag using document.write) to the plugins CDN in the Jquery document ready event. this would ensure that the plugins code would be loaded at the end when all the jquery is already loaded (not a preferred thing).
Ok so this is a little random but..
Using MVC 3 (with Razor view engine) with Knockout.js which uses jQuery Templating i've come across a little problem i'm sure is possible to solve.
In order to use jQuery-Tmpl you need to supply a template in
<script type="text/html">
...template elements go here...
</script>
Now the problem is that the razor view engine doesn't seem to generate HTML inside of these specific script tags. It handles standard html, (script type="text/javascript") fine but appears to just not do anything with the aforementioned script tag.
Does anyone know how to get around this issue i.e. how to use MVC 3 Razor with jQuery-Tmpl?
There is a pretty good solution in this blog post: http://www.wiredprairie.us/blog/index.php/archives/1204
This creates a "template" helper that emits the script start/end tags.
Otherwise, I have some ideas for putting templates in external files, which would be another way to avoid this issue. It involves storing the templates in .html files and injecting them into the page into script tags. There are certainly many ways that this could be accomplished though on the client or server side, just a few ideas.
A more general approach if you want to keep things in the document is using #Html.Raw to output html without affecting the edit-time syntax state.
For example:
#Html.Raw("<script type='text/x-dot-template' id='awesome_template'>")
<!-- insert some awesomeness here -->
#Html.Raw("</script>")
I happen to like the helper method suggested above a little better, but it has not always been something I was able to implement, so this is an alternative with its own benefits (namely clarity over ease of use and terseness)
Good day!
I'm looking for solution to combine, minimize and gzip CSS and JavaScript files. It seems they come in two forms:
In form of ASP.NET handler\module with processing files on the fly (with caching results)
In form of VS build tasks (to perform processing while building)
Generally I'm ok with either.
I've looked on a number of solutions (and I use ASP.NET handler from this article http://www.codeproject.com/KB/aspnet/httpcompression.aspx a lot), but maybe something "must have" came out and I've missed it.
Thanks in advance!
Here's my advice to you: use build tasks and HTTP cache the output.
In terms of build tasks, you'll want to check out your favorite JavaScript minifier (my favorite is Google Closure Minifier) that has a command line utility that you can just plug into your project file, MSBUILD file or NANT file. Same deal with CSS (I personally use Yahoo! YUI Compressor). If you're into using LESS, you can certainly combine this with the YUI compressor. To optimize images, I'd use optipng. There's directions on how these guys work on their individual sites.
Now, after you have these files all nice and optimized, you'll want to output them using a handler or controller action for MVC. To set the expiration so that subsequent requests will default to the file downloaded on the first request, you'll want this to run in your code:
Response.ExpiresAbsolute = DateTime.Now.AddYears(1);
More than likely you'll want a cache-buster strategy so that you can change the content files. You'd do this by passing a random parameter to your handler. There are a few different ways to go about this... just Google it.
Hope this helps.
I'm using the telerik mvc components for small-medium sites. It was simple to add and configure with NuGet.
Moth can (among other things) handle all your javascript / css requests on the fly. See Wiki: Javascript.
Best of all, it can also put all javascript at the bottom of the page, including parts you write in your partial views! Wiki: Inline script.
I have a ViewUserControl that will be used in some pages in my site, but not all.
This ViewUserControl requires a javascript file, so I would like to have the script reference added automatically to the head session of the pages that are using this ViewUserControl, is that possible?
I tried to add a content control to it, but looks like it is not allowed.
I could also add the script tag straight into the ViewUserControl's .ascx code, but then I will have the script reference added N times if I have N of such controls in a page.
Does anyone have any ideas?
In the code-behind of the ASCX, register your script reference (or block). I just answered a similar question explaining how to do this:
How to best control loading of multiple javascript files in ASP.NET?
With this technique, you can have the same control on the page multiple times, yet still include the script only once (and only on pages that actually include the control).