I have a MVC 3 project and I enable the HTML 5 markup. For the HTML 5 part, it is running fine.
Now I created a partial view and copy and paste some code into it
The first line is
<div id="Header">
I want to use this partial view in my view which is html 4 markup.
The problem comes, the razor engine automatically convert my
<div id="Header">
into
<Header>
I don't want to use HTML 5 for this view but only HTML 4. What should I do?
If you change the div as follows, it won't get swapped out:
<div id="strap">
Which may solve your immediate problem.
why do you want to covert back to:
<div id="Header">
where is the way to go in the future?
If you worried about the compatibility with the older browser, you can simply implement modernizr-2.6.2.js. (which should come with the Visual Studio web projects)
This will make all the basic HTML5 works in older browser.
(tho haven't tested with browser older than IE6)
you could always use a class instead of an id
<div class="header">
this has the added advantage of not making your css (if any) for this element very specific, and also means that the ID cannot be reused.
you can still select your element using jQuery selector using it's class as the selector
$('.header')
question for you: Did you created the Html 4 partial view in Html 5 view? ; If your answer is yes, the problem you mentioned is occurring naturally. When MVC renders your page, he first renders the Html 5 part(the layout master page). As a result, Html5 type doc type will be chosen by default. After that when the Html 4 partial view is rendered, the engine renders it under a mark up support for Html 5.
if i want to summarize what i wanted to say:
<html>
//Html 4 partial view.
</html>
This will make a Html 5 markup view no matter what Html4 code you wrote in that partial view. If i am wrong, let me know. I will learn from my mistakes. thanks.
Can you please use Transitional doctype on the top of your partial view page. Because HTML engine understand the page according to doctype.
Related
I'm having problems the default Html.ValidationSummary() in MVC 3.
As default it adds this code:
<ul>
<li style="display:none"></li>
</ul>
And that empty <ul> causes space I would like to get rid of.
Is there some way to work around this problem? Make it toggle some div around it or similar?
how about conditionally showing ValidationSummary
if(!ViewData.ModelState.IsValid)
{
#Html.ValidationSummary()
}
important if you do this you won't be able to use client-side javascript validation (as the div wont be present)
You can create your own validation summary, for example, like here: Custom ValidationSummary template Asp.net MVC 3
I'm working on an ASP.NET MVC 3 application. I primarily come from a ASP.NET WebForms background. I am working on an application with a complicated layout scheme. Because of this, i was hoping to have all of my layout code in, well, _Layout.cshtml. My challenge is, there is custom javascript logic associated with each page. I've found that if this JavaScript is included in the middle of my page, it doesn't work. So what I wanted to do was move it elsewhere. But in order to do this, I need something similar to the ASP.NET WebForms PlaceHolder control. Ideally, I would like to be able to do something like this:
<body>
<div id="myLayout" style="background-color:Gray; height:100%;">
<div id="myContent" style="background-color:Silver;">
#RenderBody()
</div>
<div id="myFooter" style="background-color:Silver;">
Footer
</div>
</div>
#RenderScript()
</body>
Is there a way for me to do this? Or am I going to have to write every page individually?
Thank you!
Here's what i do, in each of your views create a section like this, put any html you want in it
Any View:
#section Scripts
{
<script src="#Url.Content("~/Scripts/myscript.js")" type="text/javascript"></script>
<!-- Styles, more scripts, etc -->
}
Then back in your _Layout.cshtml you can render the section anywhere you want, the second parameter says if the page requires a Scripts section or not.
_Layout.cshtml: (anywhere you want)
<head>
#RenderSection("Scripts", false)
</head>
I want to create a reusable ajax control in MVC .NET using RAZOR.
my example is a simple ajax text box and list where the user filters the list by typing in the text box. on the first call i would render both the text box and the list using my razor view. on subsequent AJAX calls i would want to ONLY render the (now filtered) list.
idea 1: use #if statement to conditionally render code.
problem: razor does not seem to like conditionally written html. for example it errors when a <div> tag is not followed by a closing </div>.
idea 2: use #section tokens to create portions of my control and then call RenderSection within the same file as needed.
problem: razor does not allow RenderSection to call sections in the same page
i know i can conditionally render html as strings, but i wanted to take advantage of the legibility of the razor markup and keep with development protocols.
You should be able to output <div> tags in a Razor block without the corresponding </div> tag by surrounding it with <text>. The reason is that Razor uses the closing tag to know when to drag back into code-parsing mode:
#if (myCondition)
{
<text>
<div>
</text>
}
As for the Section stuff, you might be able to achieve what you want using Templated Razor Delegates, like this:
#{
Func<dynamic, object> b = #<strong>#item</strong>;
}
// ...
<span>This sentence is #b("In Bold").</span>
See Phil Haack's blog for a little more on this.
Just wanted to add a class="myClass" in body tag. Is there any html helper or something else can do this in MVC3 view page? Please advise, thanks.
This is very similar to Aaron's solution, but doesn't have the weight of a section (which at least in my mind, are for larger blocks of content than a single string). The simplest way is to pass a variable with the ViewBag.
In your layout, just print out the class for the body tag, plus any other page specific variables (page title, extra css/js scripts, etc...)
_Layout.cshtml:
<html>
<title>#ViewBag.Title</title>#* Can easily add in per page titles too *#
<body class="#ViewBag.BodyClass">
#RenderBody()
</body>
</html>
Then, variables set in your view get passed upwards to the layout:
Index.cshtml:
#model MyViewModel
#{
ViewBag.Title = "This page title!";
ViewBag.BodyClass = "...";
}
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 ;-)
I have a strange result happening when loading a Partial View using jQuery Ajax into the DOM, but only when viewing the result using IE8.
The Partial View in question (for example purposes only) looks like this;
<aside>Example test</aside>
When the result comes back from the Ajax call it appears to look exactly as above. However when viewing the DOM using the developer tools in IE8 the result looks like this;
<aisde/>
Example test
</aside/>
As a result the element is not recognised and the text does not sit within it. Also the style sheet class for 'aside' is not being applied. This only happens in IE8 as far as I can see.
Any one got any suggestions, other than do not use custom tags?
Thanks in advance
You need to make sure the DOM recognizes HTML5 elements. Essentially you will have to do:
document.createElement('aisde');
Have a look at this link. Without creating the element older IE browsers will not see or style the elements.
The common practice around these issues is to load a html5 fix javascript file within a conditional comment block. The script does a createElement on all new html5 node types.
<!--[if lte IE 8]>
<script src="html5.js" type="text/javascript"></script>
<![endif]-->