Telerik MVC controls not properly nesting inside parent divs when using Razor View Engine
Here's the situation: I'm using Telerik controls in an ASP.NET MVC project using the Raaor View engine. In my view, I have a layout similar to MS Office Outlook using a hierachy of div tags. I'm using css to control the placement of div tags. An abstracted version is below:
<body>
<div id="menuBar"> (Telerik menu here) </menubar>
<div id="leftpanel"> (Telerik calendar here)
</div>
<div id="main">
(Telerik grid here)
</div>
</body>
When I stubbed out my partial views, etc I used text, static html tables and list boxes to ensure my DOM tree was properly constructed. Putting the Telerik controls into my partial vi开发者_StackOverflow社区ews, when I inspect the DOM. the controls are all children of not the div tags I placed them inside.
<body>
<div id="TelerikGrid"></div>
<div id="TelerikButtons"></div>
<div id="TelerikPanels"></div>
<div id="menuBar"></menubar>
<div id="leftpanel"></div>
<div id="main">
</div>
</body>
There are no missing div tags, and if I replace the telerik control with the rendered output, the placement in the DOM is correct! The behavior leads me to think that the Telerik controls are rendered to the page out of order. I can adjust the positioning with css, but if I can keep these controls properly nested, then style attributes like width:100% will be a lot easier.
I don't believe there is a problem with the grid - I pasted the grid from an earlier MVC project that doesn't use Razor and it is correctly nested.
I've tried wrapping the telerik controls with div tags in the partialView and in the layout. The controls insists on being children of the <BODY>.
If I use the default aspx view engine, the controls are in the right place!
Any thoughts? Is this a bug using Telerik with Razor?
You are most probably calling Render() which is causing the problems with Razor. We have fixed that but the hotfix is not officially released yet. As a workaround don't call the Render() method. For additional reference you can check this code library entry which is sample MVC 3 / Razor project.
I don't know how are the Telerik controls implemented but there have been changes in the Razor view engine. Consider the following helpers:
public static class Extensions
{
public static void Test1(this HtmlHelper htmlHelper)
{
htmlHelper.ViewContext.Writer.Write("<h2>Hello</h2>");
}
public static void Test2(this HtmlHelper htmlHelper)
{
htmlHelper.ViewContext.HttpContext.Response.Write("<h2>Hello</h2>");
}
}
Test1 uses ViewContext.Writer while Test2 uses ViewContext.HttpContext.Response. And here's a sample usage:
<span>@{Html.Test1();}</span>
<span>@{Html.Test2();}</span>
Test1 will work perfectly fine while Test2 will mess up with the order and that would happen only in Razor. Notice that both helpers would work fine with the ASPX view engine:
<span><% Html.Test1(); %></span>
<span><% Html.Test2(); %></span>
So I suspect that Telerik controls might somehow be writing to the HttpContext.Response instead of using the ViewContext.Writer. Maybe Telerik guys will be able to tell you if this is the case but it looks like a bug.
加载中,请稍侯......
精彩评论