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!
Related
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 use an HTML helper that returns an IDisposable to create a specific DIV structure that I need very often in my application. The constructor of this class creates the open divs while the Dispose method created to closing Divs. Now I need to secure my application and I would like this structure not to be created in some condition but I also need that every kind of HTML that this produced between using and the end if its scope is also not rendered.
First thing I did was to replace the TextWriter found int he ViewContext with dummy :
_helper.ViewContext.Writer = new StringWriter(new StringBuilder());
Its working for each piece of code that directly uses the ViewContext Writer to render HTML but not for the others (raw HTML and other helper)
So the question is : How can we prevent a Asp.net view to render HTML within the scope of a using block ?
I am afraid that currently there's no way of preventing the contents of a using block to be rendered. That was not the original intent of this block anyway. If you want to prevent something from being rendered you might consider using an if statement instead.
I have no example code for you, and this idea is pretty hackish but may work if you have a zillion of these things you need to secure and don't have time to add condition logic.
What if you used the app's Response.Filter to strip out html? Then in your constructor and dispose methods, if the user isn't authorized to see the content, output some easy to find elements that you could either regex replace or use Html Agility Pack to parse/modify the DOM before the stream is sent to the browser.
I want to put login module in to modal popup. But when I use class="modal" whole page gets loaded in to modal. Can you show me the way to put only module.
This stands also for displaying articles in modal.
here is the link with problem
I do this fairly often and there are two tricks that can help make this work better. First you will likely want to add tmpl=component to your url. This causes Joomla to only display the article instead of the entire template (as long as your template supports this, most do).
This should do pretty well. If you want to get even more selective, you can do one of two things:
Add CSS to hide pieces
.modal-body .other-selector {
display:none;
}
Use Javascript to select only the piece that you want
$('#myModal').on('show', function () {
// selects a piece of the current modal body and sets it as the only content of the modal
$('#myModal .modal-body').html($('#myModal .modal-body').find('.other-selector).html());
})
The way you can only display the component is to add an extra parameter tmpl=component in the url.If you'll see the component.php inside your template folder that has mainly <jdoc:include type="component" /> with no module position.So it'll load only component.
I did not try for module but you can try similar for module.So you can try it by just giving the position of the module in whole template like create a new page called modules.php in your template folder and put the module position inside this page.And you call it in a similar way just like component like tmpl=modules
I hope this will work.
It was problem with my templates component.php file. I just added inside and now it works fine. Thanks guys
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'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.