Using Cassette.net, MVC 3, Razor, C#, relative locations, and shared layouts, how do you get references in the right order without modifying the original javascript files?
In the shared layout, I reference jQuery like this:
Bundles.Reference("~/Scripts/jquery-1.7.2.js");
Then in the view I add another reference:
Bundles.Reference("~/Scripts/myScript.js");
myScript depends on jQuery, yet Cassette references myScript in front of jQuery:
<script src="/_cassette/asset/Scripts/js/myScript.js?...
<script src="/_cassette/asset/Scripts/jquery-1.7.2.js?...
I find it odd that scripts referenced in child pages render before parent page scripts.
I see you can add notations to your scripts, e.g., /// <reference path="other.js" /> but I really don't want to modify javascript code to include this.
Update:
I added
Bundles.Reference("~/Scripts/jquery-1.7.2.js","head")
Bundles.Reference("~/Scripts/js/myScript.js","body")
which at least puts my script after the jQuery script using #Bundles.RenderScripts("head"); and #Bundles.RenderScripts("body"); within the appropriate tags. It seems to keep the scripts in the order added. I'd still like to know how to custom order these scripts with some type of Bundle.config or how to get parent pages to order scripts before child pages using Shared Layouts.
Use a bundle descriptor file. You can then force the file order.
Related
I am using file_get_contents to acquire html. From the html page I extract the css, and js. Right now I am using a very expensive function.
$css_elements = $doc->getElementsByTagName('link');
foreach ($css_elements as $css_element) {
$Jdocument->addStyleSheet($css_element->getAttribute('href'));
}
I would like to save the csss links to a file, and then read the file and add the links as a whole to the head tag of the HTML page.
I was wondering is Joomla has an in build function that allows for one to add unwrapped text to the head tag.
Thanx everyone!
I recommend using the Flexi Custom Code module to do this in Joomla:
http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-modules/15251
This module allows us to insert any code like php, javascript PHP, CSS and html at site modules positions. For example, It's can be used for simple code, simple function, embed code, adsense code, affiliation code and others copy and paste codes for Joomla site.
Main Features:
1. Available for PHP, HTML, JAVASCRIPT and CSS codes
2. Available to set the target of this module
3. Easy and flexible
I'm using the Kendo ASP.NET MVC wrappers. I noticed the wrappers are rendering the scripts to initialize the controls immediately after the control markup. Is there a way to configure to have the scripts render at the bottom? Before, with the Telerik ASP.NET MVC controls, you could have the script manager render all the initializations at the bottom. Is that possible?
In the 2013 Q1 release, they added support for deferred scripts. You can use it like so:
#(Html.Kendo().AutoCompleteFor(m => m)
.Filter(FilterType.Contains)
.MinLength(2)
.DataSource(config =>
{
config.Read(action, controller, routeValues);
config.ServerFiltering(true);
}).Deferred())
Note the Deferred() method in the end of the chain. Then, in your layout add the following anywhere in your markup:
<!-- ... -->
#Html.Kendo().DeferredScripts()
</body>
</html>
See
http://www.kendoui.com/forums/mvc/general-discussions/kendo-initialization-scripts-in-body-interfere-with-other-libraries.aspx for more information.
This would be a bit of a headache, but since the wrappers generate jQuery script couldn't you generate the wrapper in a partial view, grab the resulting script and inject it into a script tag at the bottom of your page? Of course, that would mean either duplicated code or a fair amount of code to generate the workaround in a reusable way, all so the scripts end up at the bottom of the page instead of the middle.
I'm assuming this is to help with performance (best practice generally being to put your CSS at the top and scripts at the bottom)?
I am sorry this is not possible and could not be work-arounded. The scripts of the Kendo Wrappers for MVC are always rendered after the html wrapper of the widget.
It is mentioned in the documentation.
EDIT: This is later on possible with the deferred scripts rendereding that jrummell exiplained.
I'm using ASP.NET MVC3 with razor engine.I want to apply css class on body tag according to page call.
I want to add class name in child page and it will affect on layout page which has body tag.
and don't want to use jquery because it execute after page render.
How can i do this?
While you may have full control of the HTML a solution was what was needed so here is one ;-)
In the _layout.cshtml page
<body class="#RenderSection("BodyClass", false)">
This will look for a section in all the child pages but says don't worry if it can't find one
Then in your child views just do this
#section BodyClass {productList}
Keep it on one line and then the outputted HTML will look fine, also you can then build up the class names as well.
#section BodyClass {productList generic}
This idea goes perfect with DOM-Ready page specific code, why not checkout
http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/
Or my extended version here
https://github.com/AaronLayton/H5BP-Core
My way lets you do page specific code, but allows you to keep all of the Javascript in separate pages so each page becomes easily manageable. The final step would be to concatenate and minify all the JS into 1 file ;-)
Aaron's answer above works great for MVC 3, but I found that MVC 4 chokes on the single line section statement:
#section BodyClass {productList}
Instead, you need to use:
#section BodyClass {#("productList")}
First of all jQuery's .ready function executes after the DOM is available so it's the optimal moment to start interaction with your page's elements. ( http://api.jquery.com/ready/ ) If you experience a behavior that results in styles 'flicker' you may wan't to apply display:none to body element, and removing it after you css class has been applied.
but if you really don't want to use jQuery you should consider either making a variable to hold your css class name as a part of a viewmodel your controller will be sending to Views, or going with ViewBag.CssClass that should be declared in each of your controller's actions (or in base controller's OnActionExecuting method.
Thing to consider here is understanding and following MVC pattern, where View and Business Logic should be separated. So in my opinion you should rather avoid involving controllers in view building process.
It's much easier to simply put the following in your main layout
<body class="#ViewBag.BodyClass">
Then in the content pages put:
#{
ViewBag.BodyClass = "myClass";
}
Problem solved!
I've got an editor template location in:
Areas/Posts/Views/Shared/EditorTemplates/Question.cshtml
I also have one in:
/Views/Shared/EditorTemplates/Question.cshtml
For both, the model is the same.
What i'm trying to do is within a View in the Posts area, call my editor template in the area, set some HTML and then bubble back up to the main shared editor template.
Here's the Posts EditorTemplate:
#model xxx.ViewModels.QuestionViewModel
#Html.Hidden("Id", (byte)Model.QuestionType)
#Html.EditorForModel()
But all it does it render out the hidden field, not the contents of the shared editor template.
If i get rid of the Posts editor template, the shared one is rendered properly.
I'm guessing MVC/Razor thinks this is recursive or something? Like im calling the same template?
Is there any way i can tell it to go to the shared one?
Essentially, i'm trying to re-use the HTML in the shared template, but inject some sneaky HTML of my own.
You can only have 1 template used at runtime for a given type. ASP.NET MVC first looks in areas shared templates folder and since it finds a corresponding template there it picks it up and it uses it. It then stops looking and the template you put in the main shared folder is never used. It's by design.
Is there any way i can tell it to go to the shared one?
Yes, you can explicitly specify the location of the template, but then it won't use the template in your areas folder:
#Html.EditorFor(x => x.Question, "~/Views/Shared/EditorTemplates/Question.cshtml")
As the HTML markup for the shared editor template was very simple (just rendered a checkbox and a label), i abstracted the markup into a custom HTML helper, then called this from both the shared template and my areas template.
~/Areas/Posts/Views/Shared/EditorTemplates/Question.cshtml:
#model xxx.ViewModels.QuestionViewModel
#Html.Hidden("Id", (byte)Model.QuestionType)
#Html.QuestionCheckBoxForModel()
#Html.QuestionLabelForModel()
~/Views/Shared/EditorTemplates/Question.cshtml:
#model xxx.ViewModels.QuestionViewModel
#Html.QuestionCheckBoxForModel()
#Html.QuestionLabelForModel()
I've read a couple of articles on using asp.net mvc3 razor (which I am fairly new to). I have a couple of .cshmtl pages which are like shared content (e.g. header). They are basically just html pages with one or two divs etc.
To embed this in my main page, do I just use #renderPage("page address"). Do I also need a call to #renderbody? Do I need to specify the/a page in the layout property?
Thanksa
I would put the common elements in a layout (or perhaps a partial view rendered by the base layout). In fact, that's what I did in an application I am now building and it works quite nicely. The one issue is whether or not you need View Model data populated by the controller and passed to that partial view. I did, so I used a base controller and populated the common elements in the view model (all of those also inherited from a base class that had the common properties) and used sections and then in the sections renderered the partial view or not, depending on the view's need.
You can create a Partial View for each of these and call:
#Html.Partial("ViewName")
Or you can use sections, or this article on sections might help too.
As you may or may not know, ASP.NET accepts HTML tagging.
So why not include your .aspx file with the HTML include tag?
Here's how:
<!-- #include virtual="path to file/include-file.html" -->
Ex:
<!--#include virtual="header.aspx"-->
I do this all of the time when writing an ASP.NET website.
Just place it wherever you want the code, from the included page, to show up.