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)
Related
I have created a custom XBL component that includes very little markup. It primarily consists of CSS, JavaScript and a <div>. The JavaScript then writes the markup to the DOM, inside the <div>. Its CSS specifies styles for a lot of specific element IDs. This works just fine in Form Runner, but not with the Server Side Embedding API.
The Server Side Embedding API appears to be rewriting the CSS file. It prefixes all the CSS selectors for specific IDs with o0. For example #MultiMousePosition-cwm is changed to #o0MultiMousePosition-cwm. This might work fine if the markup of the elements were included in the XBL component. Then it could be rewritten. But since the markup is generated by JavaScript after the page is loaded, this doesn't happen.
Is the rewrite of CSS and element IDs done in case the API is used to include multiple forms in the same page?
Is there a way to prevent the CSS from being rewritten? Or is there some other way to deal with this problem?
I tried to use <xxbl:global> but it looks like that won't work for CSS resources.
The JavaScript is a complex library created by another developer and rewriting it to avoid this issue would take a significant amount of work, if it is possible.
The rewrite of ids is done to prevent id conflicts in the resulting HTML page. That can include supporting multiple forms, but also possible conflicts with other content on the page.
Currently there is no way to disable rewriting. It wouldn't be hard to add as a configuration property, possibly on the XBL components (though some things would need to be rewritten on some not, which might make the configuration more difficult), or globally, for users who know for sure they won't have id conflicts.
I am getting ready to code a number of HTML helpers for UI elements in an ASP.NET MVC 3 project. I expect many of the helpers to depend on code that is located in external javascript libraries. These could be custom javascript libraries that I write, or they could reference 3rd party libraries like jQuery and jQueryUI. For example, I might write HTML.RichM.DataPicker(...) that would require the page to have jQuery and jQueryUI referenced and some code executed in the document ready function. Getting code into the document ready function is pretty straightforward I guess -- I could simply inject a new script block into the output with the contents of the function, even though that would mean I might have a page peppered with document ready functions all over.
The other part of this is making sure that the jQuery and jQuery UI libraries (in my example) are referenced and included. Is there an "MVC way" to add the code references to the view page or the layout/master if they are not already there, or must I instruct users of my HTML helpers that they need to add references manually for any required javascript files? Of course, I could just instruct them to include all possible external library references in the master or layout page, but that seems like overkill. In ASP.NET Web Forms, for example, I might have used RegisterClientStartupScript or RegisterStartupScript to do this from my custom control.
Thanks for any suggestions!
I think the easiest way is to include the dependant scripts in the header, that's maybe not what you want to do, but I think it's the easiest way.
I suggest you using a tool like SquishIt to bundle your JS files together, that way, you will not have to load like 20 js files, it will be more efficient and cleaner.
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.
So I know there are various ways of doing, however I'd like to know the "proper" way of including a specific CSS dynamically based on the page I am on. I could include all of them within the site master, however I'm wondering if I could simply include them ONLY when I need it, by either evaluating URL or passing a value through the controller for display flag, or just include it within the content page (outside of the head tags)... I'd like to keep it clean and link them all through my site master, but I'd like to be able to evaluate the page I'm on before I include that CSS..... thoughts??
No matter what its going to be something like this:
<% if( someCriteria ) { %>
<stylesheet type="text/css" href="mypath" />
<%} %>
You could wrap it in a helper or whatever but I don't think there can be a best practice or "cleaner" way of doing something this simple.
" I could include all of them within the site master, however I'm wondering if I could simply include them ONLY when I need it"
Another way to look at this is CSS files are cached by the browser so you may as well include it once and be done with. Your visitors may have a slightly longer initial load time but if you keep your CSS files small it will be barely noticeable. There is very little performance benefit by making it dynamic.
If you're using the Spark view engine, you can use the once attribute on your css include. I personally just put everything on the site master and let the browser handle caching.
http://sparkviewengine.com/documentation/expressions#Conditionalattributeonce
Good, bad, or indifferent, the thing I have been doing for years with master pages is include a ContentPlaceHolder in the <head> section of the master page. I can then inject page-specific CSS through that, instead of cluttering my master page with alot of processing logic. I am doing the same thing with my ASP.NET MVC solutions.
What I typically do is add a to the master in the to allow for pages to include things there. More often than not it is scripts rather than stylesheets, but it works for both.
I'd also vote for getting a Html helper in place to handle this so your developers don't need to care about exactly where the stylesheet is loaded from . . .
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).