Telerik Forums
This is a migrated thread and some comments may be shown as answers.

Issue with Telerik & MVC3 Razor: Content Appearing at the Top

6 Answers 862 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
andy
Top achievements
Rank 1
andy asked on 01 Dec 2010, 01:17 AM
smartur.zip
I am attempting to build a sample application, by converting parts of the Telerik Demo Website to Razor syntax. The issue is that the content appears out of order at the top.

By the way, I have had this issue even when using a single component such as Grid on ASP.Net MVC3.

I am attaching a screenshot and zip file of my entire project. Simply start the project to see the issue. Thanks.

Here is the HTML output of my index view on home controller:

<link type="text/css" href="/Content/telerik.examples.min.css" 
rel="stylesheet"/><BR><link type="text/css" 
href="/Content/telerik.common.css" rel="stylesheet"/><BR><link 
type="text/css" href="/Content/telerik.vista.css" 
rel="stylesheet"/><BR><link type="text/css" 
href="/Content/telerik.rtl.css" rel="stylesheet"/><BR><ul class="t-widget 
t-panelbar t-reset demos-navigation" id="navigation-controls"><li 
class="t-item t-state-default"><a class="t-link t-header" 
href="/home/firstlook"><span class="t-sprite 
tOverview"></span>Overview</a></li><li class="t-item 
t-state-default"><a class="t-link t-header" 
href="/calendar/firstlook"><span class="t-sprite 
tCalendar"></span>Calendar</a></li><li class="t-item 
t-state-default"><a class="t-link t-header" 
href="/combobox/firstlook"><span class="t-sprite 
tComboBox"></span>ComboBox</a></li><li class="t-item 
t-state-default"><a class="t-link t-header" 
href="/datepicker/firstlook"><span class="t-sprite 
tDatePicker"></span>DatePicker</a></li><li class="t-item 
t-state-default"><a class="t-link t-header" 
href="/editor/firstlook"><span class="t-sprite 
tEditor"></span>Editor</a></li><li class="t-item 
t-state-default"><a class="t-link t-header" 
href="/grid/firstlook"><span class="t-sprite 
tGrid"></span>Grid</a></li><li class="t-item 
t-state-default"><a class="t-link t-header" 
href="/menu/firstlook"><span class="t-sprite 
tMenu"></span>Menu</a></li><li class="t-item 
t-state-default"><a class="t-link t-header" 
href="/numerictextbox/firstlook"><span class="t-sprite 
tNumericTextBox"></span>NumericTextBox</a></li><li 
class="t-item t-state-default"><a class="t-link t-header" 
href="/panelbar/firstlook"><span class="t-sprite 
tPanelBar"></span>PanelBar</a></li><li class="t-item 
t-state-default"><a class="t-link t-header" 
href="/tabstrip/firstlook"><span class="t-sprite 
tTabStrip"></span>TabStrip</a></li><li class="t-item 
t-state-default"><a class="t-link t-header" 
href="/treeview/firstlook"><span class="t-sprite 
tTreeView"></span>TreeView</a></li><li class="t-item 
t-state-default"><a class="t-link t-header" 
href="/window/firstlook"><span class="t-sprite 
tWindow"></span>Window</a></li></ul><ul 
class="t-widget t-reset t-header t-menu" id="product-lines"><li 
class="t-item t-state-default" id="productAjaxSuite"><a class="t-link" 
href="<A 
aspnet-ajax?? demos.telerik.com 
http:>RadControls'>http://demos.telerik.com/aspnet-ajax">RadControls</A> 
for ASP.NET AJAX</a></li><li class="t-item t-state-default" 
id="productSlSuite"><a class="t-link" href="<A 
demos.telerik.com http: 
silverlight??>RadControls'>http://demos.telerik.com/silverlight">RadControls</A> 
for Silverlight</a></li><li class="t-item t-state-default" 
id="productWpfSuite"><a class="t-link" href="<A 
demos.telerik.com http: 
wpf??>RadControls'>http://demos.telerik.com/wpf">RadControls</A> for 
WPF</a></li><li class="t-item t-state-default" 
id="productORM"><a class="t-link" href="<A 
demos.telerik.com http: 
orm??>Telerik'>http://demos.telerik.com/orm">Telerik</A> OpenAccess 
ORM</a></li><li class="t-item t-state-default" 
id="productReporting"><a class="t-link" href="<A 
demos.telerik.com http: 
reporting??>Telerik'>http://demos.telerik.com/reporting">Telerik</A> 
Reporting</a></li><li class="t-item t-state-default" 
id="all-products"><a class="t-link" href="#product-lines-6">ALL 
PRODUCTS<span class="t-icon t-arrow-down"></span></a><ul 
class="t-group"><li class="t-item"><div class="t-content" 
id="product-lines-6">            
<BR><div class='column'><BR>    <strong>UI 
Components</strong><BR>    
<ul><BR>        <li><a 
class='ajax'></span>ASP.NET 
AJAX</a></li><BR>        
<li><a 
class='mvc'></span>ASP.NET 
MVC</a></li><BR>        
<li><a 
class='silverlight'></span>Silverlight</a></li><BR>        
class='winforms'></span>WinForms</a></li><BR>        
class='wpf'></span>WPF</a></li><BR>        
<li><a 
class='winphone'></span>Windows 
Phone</a></li><BR>    
</ul><BR>    <strong class='not-first-of-type 
linked'><a 
Tools</a></strong><BR>    
<ul><BR>        <li><a 
class='webuites'></span>WebUI Test 
Studio</a></li><BR>    
</ul><BR></div><BR><div class='column'><BR>    
<strong>Data</strong><BR>    
<ul><BR>        <li><a 
class='orm'></span>OpenAccess 
ORM</a></li><BR>        
<li><a 
class='reporting'></span>Reporting</a></li><BR>    
</ul><BR>    <strong 
class='not-first-of-type'>Developer 
Productivity</strong><BR>    
<ul><BR>        <li><a 
class='jc'></span>JustCode</a></li><BR>        
class='jm'></span>JustMock</a></li><BR>    
</ul><BR></div><BR><div class='last 
column'><BR>    <strong class='linked'><a 
Tools</a></strong><BR>    
<ul><BR>        <li><a 
class='tfs'></span>TeamPulse</a></li><BR>        
<li><a 
class='tfs'></span>Work Item 
Manager</a></li><BR>        
<li><a 
class='tfs'></span>Project 
Dashboard</a></li><BR>    
</ul><BR>    <strong class='not-first-of-type 
linked'><a href='http://www.sitefinity.com/'>Content 
Management</a></strong><BR>    
<ul><BR>        <li><a 
class='sitefinity'></span>Sitefinity .NET 
CMS</a></li><BR>    
</ul><BR></div><BR></div></li></ul></li></ul><script 
type="text/javascript" 
src="/Scripts/jquery-1.4.3.min.js"></script><BR><script 
type="text/javascript" 
src="/Scripts/telerik.examples.js"></script><BR><script 
type="text/javascript" 
src="/Scripts/telerik.common.min.js"></script><BR><script 
type="text/javascript" 
src="/Scripts/telerik.panelbar.min.js"></script><BR><script 
type="text/javascript" 
src="/Scripts/telerik.menu.min.js"></script><BR><script 
type="text/javascript"><BR>//<![CDATA[<BR>jQuery(document).ready(function(){<BR>jQuery('#navigation-controls').tPanelBar({expandMode:1});<BR>jQuery('#product-lines').tMenu({onLoad:productMenuLoad});});<BR>//]]><BR></script><!DOCTYPE 
html><BR><html><BR><head><BR>    <title>Home 
Page</title><BR>    <script 
src="/Scripts/jquery.unobtrusive-ajax.min.js" 
type="text/javascript"></script><BR>    <script 
src="/Scripts/jquery.validate.min.js" 
type="text/javascript"></script><BR>    <script 
src="/Scripts/jquery.validate.unobtrusive.min.js" 
type="text/javascript"></script><BR></head><BR><body><BR>    
<div id="page"><BR>        <h1 
id="title">

As you can see the code is being generated out of the order it is defined in the _Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
    <title>@View.Title</title>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    @{ Html.Telerik().StyleSheetRegistrar()
                      .DefaultGroup(group => group
                          .Add("telerik.examples.css")
                          .Add("telerik.common.css")
                          .Add("telerik." + Html.GetCurrentTheme() + ".css")
                          .Add("telerik.rtl.css")
                          .Combined(false)
                          .Compress(false)).Render();
                     }
    @{Html.Partial("Header"); }
</head>
<body>
    <div id="page">
        <h1 id="title">
            @{ Html.ActionLink("Telerik Extensions for ASP.NET MVC", "FirstLook", "Home");}
        </h1>
        <div id="main">
            @RenderBody();
        </div>
        @{ Html.Partial("Navigation");}
        @{ Html.Partial("Resources");}
        @{ Html.Partial("ProductLines");}
        @{ Html.Partial("Footer");}
    </div>
  
    @{ Html.Telerik().ScriptRegistrar()
                     .DefaultGroup(group => group
                         .Add("telerik.examples.js")
                         .Compress(false))
                     .Render();}
</body>
</html>

6 Answers, 1 is accepted

Sort by
0
a c
Top achievements
Rank 1
answered on 01 Dec 2010, 10:41 AM
see this razor demo: http://mvcdemo.chiplex.com
0
andy
Top achievements
Rank 1
answered on 01 Dec 2010, 10:14 PM
Do you know if it is possible to get the source code for the converted app http://mvcdemo.chiplex.com
0
Ian
Top achievements
Rank 1
answered on 13 Dec 2010, 08:48 PM
Yes, source code or a fix would be helpful. I'm having the same problem, and need to get it resolved as it is causing problems with IE (DOCTYPE needs to be the first thing in the document for it to properly handle it)
0
Mike Kidder
Top achievements
Rank 1
answered on 14 Dec 2010, 12:37 AM
There are no issues with using Telerik with MVC3 (I have tested with latest RC). I am not a Telerik employee, but I can certainly say that as quickly as the ASP.Net group has been releasing updates for MVC3 (we are to RC2 already, with the final promised in mid-January) it is a challenge to keep up the pace.   It's been less than a year since MVC2 was released!

I will convert the "_Layout.cshml" example shown above:

<!DOCTYPE html>
<html>
<head>
    <title>@View.Title</title>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    @( Html.Telerik().StyleSheetRegistrar()
                      .DefaultGroup(group => group
                          .Add("telerik.examples.css")
                          .Add("telerik.common.css")
                          .Add("telerik." + Html.GetCurrentTheme() + ".css")
                          .Add("telerik.rtl.css")
                          .Combined(false)
                          .Compress(false)))
 
    @Html.Partial("Header")
</head>
<body>
    <div id="page">
        <h1 id="title">
            @Html.ActionLink("Telerik Extensions for ASP.NET MVC", "FirstLook", "Home")
        </h1>
        <div id="main">
            @RenderBody()
        </div>
        @Html.Partial("Navigation")
        @Html.Partial("Resources")
        @Html.Partial("ProductLines")
        @Html.Partial("Footer")
    </div>
 
    @( Html.Telerik().ScriptRegistrar()
                     .DefaultGroup(group => group
                         .Add("telerik.examples.js")
                         .Compress(false)))
</body>
</html>

Take some time and look at the changes.  Two big takeaways when converting to Razor syntax:

1)  Use  @(   ....   )  when outputting html,  not  @{   ....  ;}
     - wrap the code for Telerik controls in parentheses, not brackets
     - using brackets, you're essentially telling Razor to execute a method. You won't get any output
2)  Remove the ".Render()" method for any Telerik controls.  Not used in Razor.

You will need to do the same thing for each partial that is listed in the sample.   Once done, all your content will be in its rightful place.   I downloaded the zip file above and verified the steps.  NOTE:  "View" becomes "ViewBag" in MVC3 RC2.

Hope the information helps!
0
rodri
Top achievements
Rank 1
answered on 21 Dec 2010, 04:59 PM
Hi @Mike Kidder

Could you tell me how to make telerik run with ASP.NET MVC 3 RC2? because I have not been able to. BTW, I have the Q3 version (v2010.3.1110.235)

I have followed the instruction manual but unfortunately it throws an exception. The compiler error tells me:

"'System.Web.Mvc.HtmlHelper<dynamic>' does not contain a definition for 'Telerik' and no extension method 'Telerik' accepting a first argument of type 'System.Web.Mvc.HtmlHelper<dynamic>' could be found (are you missing a using directive or an assembly reference?)"

I have made a reference on my project to the Telerik.Web.Mvc.dll assembly (which was located on the MVC 2 folder: Telerik\Extensions for ASP.NET MVC Q3 2010\Binaries\MVC2).

The web.config file has the line:
<add namespace="Telerik.Web.Mvc.UI" />

Any clue?

best regards
0
rodri
Top achievements
Rank 1
answered on 21 Dec 2010, 05:22 PM
I again

Answering myself, I didn't reallize that I had to paste the reference to the assembly <add namespace="Telerik.Web.Mvc.UI" /> on the inner web.config file, which by the way is inside the <system.web.webPages.razor> sectionGroup.

Best regards

Tags
General Discussions
Asked by
andy
Top achievements
Rank 1
Answers by
a c
Top achievements
Rank 1
andy
Top achievements
Rank 1
Ian
Top achievements
Rank 1
Mike Kidder
Top achievements
Rank 1
rodri
Top achievements
Rank 1
Share this question
or