I am having a problem where I try to render a <table> inside of parent container, but MVC3 Razor always renders the outside of the container tag. This causes problems when trying to control the outside parent container via Javascript.
Razor Example:
<span id="mySpan">
#Html.Action("Table1", "GetMyTable")
</span>
HTML that is output:
<span id="mySpan"></span>
<table>
<thead><tr><th>Header</th></tr></thead>
<tbody>
<tr><td>Foo</td></tr>
<tr><td>Bar</td></tr>
</tbody>
</table>
No matter which parent container I try to stick the table into, a div, span, p, the table always renders OUTSIDE the container's tags! Can anyone explain what I am doing wrong? How should I code the Razor syntax to properly add the table inside those tags?
as you are viewing the output in Firebug, what is happening is you are seeing an "effective" view of the html, after the browser engine has parsed it.
in HTML5, many tags do not need to be explicitly closed. If you include a tag "inside" another that is invalid (like a table inside a span), the browser assumes what you are doing is using an unclosed span tag, so it automatically closes it for you before starting the table tag.
The easiest fix here would be either not to "wrap" the table, or wrap it with something that HTML5 considers valid, such as a section tag.
Another option would be going back to XHTML1.1, where a table is valid inside a div (but not inside a span). Also, XHTML requires explicit closing tags, so this behavior would not show up there. (the same thing for XHTML5, though it's still invalid to wrap a table with a div in XHTML5)
Viewing the raw source would reveal that Razor is not axtually changing anything here; it is the browser. It is good to see this, though; so you know what the browser is expecting and how it's handling what you are sending it.
Related
SOLVED. Update - I was mistaken in my original assumption. See my answer below.
I have an app where I initialise inline ckeditors on various contenteditable divs.
I am well aware that CKEditor needs to add
<p><br><p>
to the markup of an empty editor to prevent content collapse, however I have a specific situation where contenteditable div that contains ONLY this html:
<h2>This is a heading</h2>
Has its markup modified to this:
<p><br></p><h2>This is a heading</h2><p><br></p>
When I call
CKEDITOR.inline(element, config);
Where element is the contenteditable div
I am using 4.4.1
This only happens when the markup in the contenteditable div is purely a heading. If there is also a paragraph in the markup this does not happen.
It appears that CKEditor is ignoring the heading when determining whether or not it needs to add content to an empty editor.
To be clear everything else works as I would expect, just this very specific issue.
Any ideas how to fix this?
Ok I figured out this was not ckeditor at all but some of my own code that was adding the tags.
I had some script which was checking whether the innerHtml of the element was a p tag, and if not, it was wrapping the whole thing in p tags.
The reason this was not more obvious is because the p tags were empty and hence collapsed. Only when calling CKEDITOR.inline(element, config) on the element did CKEditor do its thing and fillEmptyBlocks, which created the height of the p tags. This seemed then that they only appeared when the editor was instantiated.
In fact they were there already.
Actually the question is in the subj...
Is it possible to make handlebars template framework, to recognize templates within a div tag and not in script tag?
For example I would like to create template with this markup:
<style>
div.text-x-handlebars {display:none;}
</style>
<div class="text-x-handlebars-template">
<h2>I'm template</h2>
<p>{{welcomeMessage}}</p>
</div>
Yes you can put your templates in <div>s rather than <script>s, for example:
http://jsfiddle.net/ambiguous/RucqP/
However, doing so is fraught with danger. If you put your template inside a <div> then the browser will interpret it as HTML before you've filled it in; so, if your template's HTML isn't valid until after it has been filled in, the browser may attempt to correct it and make a mess of things. Also, if you have id attributes in your templates, then you will end up with duplicate ids (one in the template <div> and a repeat in the filled in template that you put in the DOM) and that will cause all sorts of strange and interesting bugs. The browser will also try to download any images inside the templates in a <div>, this may or may not be a problem (if might even be desirable but probably not desirable if the image uses a template variable in its src attribute).
Basically, you can do it but you shouldn't, you should put your templates in <script id="..." type="text/x-handlebars-template"> elements instead.
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.
I'm trying to use the extend keyword to add a comment-box (a view placed under default/comment_box.html) across several of my views, by:
...
<hr/>
{{extend "default/comment_box.html"}}
<span id="master">
...
But, when this executes, all the part of the view after the extend statement is not being rendered and all I'm getting is:
...
<hr/>
<!--Content from the Comment-Box-->
As you can see, the part after the extend statement, i.e. <span id="master"> has gone missing. The Web2Py examples seem to be doing it the same way. Am I missing something here? Why is it truncating abruptly after the extend statement?
I think you want:
{{include 'default/comment_box.html'}}
If you use {{extend 'default/comment_box.html'}}, the comment_box.html view must contain an {{include}} directive somewhere, in which case, the content of the extending view gets included in place of that {{include}} directive. On the other hand, if you simply want to include the contents of comment_box.html within your view, you need to use {{include 'default/comment_box.html'}}.
See here for more on extend and include.
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.