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.
Related
The title of this question may seem a bit confusing, but here is what is happening to me.
First off, I am using Notes/Domino 8.5.3 with UP1.
I have an Xpage with a edit mode custom control inside of it. Within the custom control are various elements using digit.forms. I have tried to set the custom control to be rendered only on edit mode, but even when it is in read mode certain dojo elements are STILL being rendered. To test this I even have set it to rendered=false for the control.
<xc:ccEditDocument rendered="false"></xc:ccEditDocument>
When I compare the source of the XPage with the custom control as rendered=false VS source of the XPage with NO custom control at all the following differences are encountered:
<script type=”text/javascript” src=”/xsp/.ibmxspres/dojoroot-1.6.1/ibm/xsp/widget/layout/layers/xspClientDojoUI.js”></script>
<script type=”text/javascript”>dojo.require(’dijit.form.Form’)</script>
and
enctype=”multipart/form-data” dojoType=”dijit.form.Form”
This is actually causing a problem for me with IE8 and iFRAME rendering of a PDF (it of course works in all other real browsers).
Is there a way to TRULY have the custom control NOT render the dojo form elements?
Thanks!
UPDATE
jjtbsomhorst had the fix! It was to add a conditional on the loaded property of the custom control.
<xc:ccEditDocument rendered="#{javascript:document1.isEditable()}"
loaded="${javascript:document1.isEditable()}">
</xc:ccEditDocument>
Thanks!!
Use the loaded property and toggle the loading of the element using a viewscope variable. This viewscope var is populated using a url parameter. Because you change the url, and do a full refresh, the loaded property is revaluated. I think this should cause the dojo not to render at unless the dojotype is loaded
You need to set the rendered property of the dojo module in the custom control itself. This will determine then at runtime whether or not the module will be added to the list of resources to be rendered.
I’ve been dissecting the Orchard CMS rendering and view engine in an effort to understand how it’s put together. I have discovered that neither RenderBody nor RenderSection are ever called. It is my understanding that the Razor view engine requires a call to one or the other.
What is it that gets around the requirement that RenderBody or RenderSection have to be called or an exception is thrown by Razor?
Is it the fact that there’s a custom view engine (ThemeAwareViewEngine)? If so, how does it handle parsing Razor syntax to generate the content?
Thank you.
It's actually the other way around. Razor itself doesn't require that RenderBody be called it's the RazorViewEngine that has this requirement. There can definitely be another view engine that uses Razor that has a completely different way of working. Take a look at https://github.com/Antaris/RazorEngine or https://github.com/Buildstarted/RazorSharp I've also written a markdown view engine that uses razor for some simple layouts.
From reading the source it looks as if they've created a few custom view engines. Their RazorViewEngine replaces the base class for razor generated files with their own custom WebViewPage which has a method Display of which Zone is an alias for. This is what allows them to render child views in addition it seems as if there are several types of Zones within the LayoutAwareViewEngine such as DocumentZone, ContentZone and so forth.
So in the end they've done a lot of custom code.
I have a view in which I have a DIV which opens up as a JQuery dialog. This DIV has many elements including buttons and static text (No element inside this DIV is assigned any data from any model and it's not making use of any Razor syntax). Now I want to move this DIV to
another page so as the make it reusable. So that this DIV can be used in other views. What is the best way achieve this? Should I be using MVC user control?
Please Suggest
Thanks
Put the whole DIV in a partial view in your Views/Shared-folder in MVC (or another folder if you want to) . Let's assume you call this file '_DialogView.cshtml'. You can call this partial view from your normal page as a partial view, like this:
#Html.RenderPartial('_DialogView')
keep the page in a seperate htm. then use jquery.load('mypage.htm'). you can also use hash function in load as well jquery.load('main.htm#divname')
You can also use declarative helpers. See chapter "Reusing #helpers across multiple views" in ScottGu's blog here.
MyHelpers.cshtml
#helper GiveMeInput()
{
<input type="text" name"something"/>
}
Usage
#MyHelpers.GiveMeInput()
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!
So rather than spend time trying to make spans that are empty behave in IE 7, is there a quick way to make validation render inside of a div instead of a span?
If you are talking about the Html.ValidationMessageFor or Html.ValidationSummary helpers there is no easy way to modify the markup they are generating other than writing your own custom helpers. I showed some example here.