RadFileExplorer in MVC

[Doug Odegaard]

Can someone please confirm if the FileExplorer works in MVC?  I am getting the following error when I try to make this happen. Thanks in advance.

Server Error in '/' Application.

---

Control 'ctl00_MainContent_FileExplorer1_ctl00_MainContent_FileExplorer1_ajaxPanelPanel' of type 'OurUpdatePanel' must be placed inside a form tag with runat=server.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.Web.HttpException: Control 'ctl00_MainContent_FileExplorer1_ctl00_MainContent_FileExplorer1_ajaxPanelPanel' of type 'OurUpdatePanel' must be placed inside a form tag with runat=server.

Source Error:

Line 21: <th>Last Update</th> Line 22: </tr> Line 23: <%foreach (var listing in Model) { %> Line 24: <tr> Line 25: <td><%= Html.ActionLink(listing.ProviderId, "Details", new { id = listing.ProviderId })%></td>

Source File: d:\Development\Adaptyne\src\RealtyConnect.SiteAdminWeb\Views\Pages\Index.aspx    Line: 23

Stack Trace:

[HttpException (0x80004005): Control 'ctl00_MainContent_FileExplorer1_ctl00_MainContent_FileExplorer1_ajaxPanelPanel' of type 'OurUpdatePanel' must be placed inside a form tag with runat=server.] System.Web.UI.Page.VerifyRenderingInServerForm(Control control) +8689747 System.Web.UI.PageWrapper.System.Web.UI.IPage.VerifyRenderingInServerForm(Control control) +42 System.Web.UI.UpdatePanel.Render(HtmlTextWriter writer) +49 System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +27 System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +99 System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25 Telerik.Web.UI.PreControlToAjaxify.Render(HtmlTextWriter writer) +112 System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +27 System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +99 System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25 System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +134 System.Web.UI.Control.RenderChildren(HtmlTextWriter writer) +19 System.Web.UI.WebControls.WebControl.RenderContents(HtmlTextWriter writer) +10 Telerik.Web.UI.RadPane.RenderContents(HtmlTextWriter writer) +332 System.Web.UI.WebControls.WebControl.Render(HtmlTextWriter writer) +32 Telerik.Web.UI.RadWebControl.Render(HtmlTextWriter writer) +12 System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +27 System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +99 System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25 Telerik.Web.UI.RadSplitter.RenderContents(HtmlTextWriter writer) +169 System.Web.UI.WebControls.WebControl.Render(HtmlTextWriter writer) +32 Telerik.Web.UI.RadWebControl.Render(HtmlTextWriter writer) +12 System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +27 System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +99 System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25 System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +134 System.Web.UI.Control.RenderChildren(HtmlTextWriter writer) +19 Telerik.Web.UI.RadFileExplorer.RenderChildren(HtmlTextWriter writer) +48 System.Web.UI.WebControls.WebControl.RenderContents(HtmlTextWriter writer) +10 Telerik.Web.UI.RadWebControl.RenderContents(HtmlTextWriter writer) +4 System.Web.UI.WebControls.WebControl.Render(HtmlTextWriter writer) +32 Telerik.Web.UI.RadWebControl.Render(HtmlTextWriter writer) +12 System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +27 System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +99 System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25 ASP.views_pages_index_aspx.__RenderContent2(HtmlTextWriter __w, Control parameterContainer) in d:\Development\Adaptyne\src\RealtyConnect.SiteAdminWeb\Views\Pages\Index.aspx:23 System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +256 System.Web.UI.Control.RenderChildren(HtmlTextWriter writer) +19 System.Web.UI.Control.Render(HtmlTextWriter writer) +10 System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +27 System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +99 System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25 ASP.views_shared_site_master.__Render__control1(HtmlTextWriter __w, Control parameterContainer) in d:\Development\Adaptyne\src\RealtyConnect.SiteAdminWeb\Views\Shared\Site.Master:55 System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +256 System.Web.UI.Control.RenderChildren(HtmlTextWriter writer) +19 System.Web.UI.Control.Render(HtmlTextWriter writer) +10 System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +27 System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +99 System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25 System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +134 System.Web.UI.Control.RenderChildren(HtmlTextWriter writer) +19 System.Web.UI.Page.Render(HtmlTextWriter writer) +29 System.Web.Mvc.ViewPage.Render(HtmlTextWriter writer) +43 System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +27 System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +99 System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25 Telerik.Web.UI.RadAjaxControl.RenderPageInAjaxMode(HtmlTextWriter writer, Control page) +594 System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +256 System.Web.UI.Control.RenderChildren(HtmlTextWriter writer) +19 System.Web.UI.Page.Render(HtmlTextWriter writer) +29 System.Web.Mvc.ViewPage.Render(HtmlTextWriter writer) +43 System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +27 System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +99 System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25 System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1266

---

Version Information: Microsoft .NET Framework Version:2.0.50727.3074; ASP.NET Version:2.0.50727.3074

Here is my code page

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<List<PageInfo>>" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>Index</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <h2>Pages</h2>
    <p>
    <%= Html.ActionLink("Add a Page", "Create") %>
    </p>

    <% using (Html.BeginForm()) {%>
    <table>
        <tr>
            <th>Page</th>
            <th>Page Name</th>
            <th>Template</th>
            <th>Last Update</th>
        </tr>
    <%foreach (var listing in Model) { %>
        <tr>
            <td><%= Html.ActionLink(listing.ProviderId, "Details", new { id = listing.ProviderId })%></td>
            <td><%= listing.RelativeUrl %></td>
            <td><%= listing.TemplateID %></td>
            <td><%= System.DateTime.Now.ToString() %></td>
        </tr>
    <% } %>
    </table>


    <div id="FileXplorer">
    <table cellspacing="10">
        <tr>
            <td>
                <telerik:RadFileExplorer runat="server" ID="FileExplorer1" Width="450" Skin="Vista"
                    OnClientCreateNewFolder="OnClientCreateNewFolder" OnClientDelete="OnClientDelete"
                    OnClientFileOpen="OnClientFileOpen" OnClientFolderChange="OnClientFolderChange"
                    OnClientFolderLoaded="OnClientFolderLoaded" OnClientItemSelected="OnClientItemSelected"
                    OnClientLoad="OnClientLoad" OnClientMove="OnClientMove">
                    <Configuration ViewPaths="~/FileExplorer/Examples/Default/Images/Northwind/" UploadPaths="~/FileExplorer/Examples/Default/Images/Northwind/"
                        DeletePaths="~/FileExplorer/Examples/Default/Images/Northwind/" />
                </telerik:RadFileExplorer>
            </td>
            <td>
                <div id="eventConsole" class="module" style="height: 470px; width: 300px; overflow: auto;">
                </div>
            </td>
        </tr>
    </table>




    </div>

        <% } %>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Scripts" runat="server">
    <script type="text/javascript">
        //<![CDATA[
        function OnClientFolderLoaded(sender, args) {
            LogEvent("Grid folder loaded: " + args.get_item().get_name());
        }
        function OnClientFileOpen(sender, args) {
            LogEvent("Item open: " + args.get_item().get_name());
        }
        function OnClientItemSelected(sender, args) {
            LogEvent("Item click: " + args.get_item().get_name());
        }
        function OnClientFolderChange(sender, args) {
            LogEvent("Tree folder change: " + args.get_item().get_name());
        }
        function OnClientDelete(sender, args) {
            LogEvent("Delete: " + args.get_item().get_name());
        }
        function OnClientCreateNewFolder(sender, args) {
            LogEvent("Create new folder: " + args.get_newPath());
        }
        function OnClientMove(sender, args) {
            LogEvent("Item moved to: " + args.get_newPath());
        }
        function OnClientLoad(sender, args) {
            LogEvent("File Explorer loaded!");
        }
        function LogEvent(text) {
            var d = new Date();
            var dateStr = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds() + "." + d.getMilliseconds();
            var eventConsole = $get("eventConsole");
            eventConsole.innerHTML += "[" + dateStr + "] " + text + "<br/>";
        }
        //]]>
    </script>



</asp:Content>

[Doug Odegaard]

I got past the error by adding a form tag but now I don't see the toolbar at the top.  Does anyone have an exaple of working with the RadFileExplorer in MVC that I could peek at?  TIA

[Lini]

Hi Doug,

Unfortunately it is not possible to use the RadFileExplorer without a <form> element in your MVC application. This is due to two things:

The file explorer address bar is an asp:TextBox control, that needs to be in a form. You can remove the address bar by setting the VisibleControls property of the file explorer:

<telerik:RadFileExplorer VisibleControls="Grid,TreeView,Toolbar" ...

However, this will not remove the need for a <form> element. The control relies on the ASP.NET update panel to perform AJAX requests - move, delete files, create new folders, etc. All the file operations happen with AJAX and since the update panel control also needs a form, the file explorer will need one as well.

If the form is there, the FileExplorer control should perform normally. I tried the page you sent in the default MVC application template (using the official MVC release bits from last week and the Q1 2009 RadControls) and saw no problems. See the attached screenshot for more information.

The only JavaScript error I saw was because of the missing pvwImage element in the OnClientItemSelected method. Once I removed that, there were no more problems.

Best wishes,
Lini
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Doug Odegaard]

Lini helped me figure it out but I also wanted to post that the RFE appears to work well in MVC.  If you somehow get a 2008 Q3 Telerik.Web.UI dll in place it will render but not have the toolbar.  Check your references and all will come together.

Thanks again Lini!