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

[Solved] RadUpload in MVC 2 has Ghost Button

8 Answers 144 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.

King Wilder asked on 15 Jul 2010, 08:52 PM

I'm having a weird issue using the RadUpload control in an ASP.NET MVC 2 application.

The Browse button is ghosted over the Select button and the Progress Area HTML is showing by default. I've made a short 2 minute screencast showing the issue. I've followed all the instructions for use with MVC.

I do have it working in an MVC 1 application that was built about a year ago and it's working fine. I copied what I did there but I'm still getting this issue in this application.

Here's the link to the screencast: http://www.screencast.com/t/YTNjZmI1

Specs:

VS 2008
3.5 Framework
2010.1.519.35 Telerik assembly
ASP.NET MVC 2 framework

The other issue that I've found is that the Rad controls don't seem to like being inside a UserControl. It seems they need to be in the View itself. This isn't a critical issue for me, but just an inconvenience.

If you have any ideas why this is happening, or you would like me to try some things, I'll be happy to.

Thanks,

King Wilder

8 Answers, 1 is accepted

answered on 19 Jul 2010, 09:24 PM

Kamen,

I've built a clean small Mvc 2 application and added the RadUpload and it somewhat works.

Here's what works:

The upload control appears as it should with "no ghosting".
The Progress Area is hidden by default, which is good
The WebResource.axd renders all the necessary CSS, also good

What doesn't work

I can't submit the form. (still haven't figured this one out)

I'm going over both this sample app, and my working app to see what the differences are. I can't seem to recreate the issue of the WebResource.axd not rendering the CSS in the sample app.

I'll open a ticket and send you the sample app that I have which doesn't submit the form.

I'll also see if I can track down why the CSS resources aren't being rendered.

Oh, I also upgraded the application to the latest build: 2010.2.713.35 and it has the same results.

Thanks,

King Wilder

answered on 20 Jul 2010, 08:24 PM

I'm still trying to debug this ghosting button issue. I know that from your assessment that it's due to the WebResource.axd not including the necessary CSS files.

I can't seem to find out why this is happening. Can you tell me anything about the axd file that might help? What triggers it to load, etc?

Here's a look at my Dashboard.Master page. This might help.

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>

<asp:ContentPlaceHolder ID="TitleContent" runat="server" />

</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link href='<%= Url.Content("~/Content/Dashboard/css/meta-admin.css")%>' rel="stylesheet" type="text/css" />

<!--[if lte IE 6]><link href='<%= Url.Content("~/Content/Dashboard/css/ie.css") %>' rel="stylesheet" type="text/css" /><![endif]-->

<link

href='<%= Url.Content("~/Content/Dashboard/jQueryCustom/jquery-ui-1.8.1.custom.css") %>' rel="stylesheet" type="text/css" />

<link href='<%= Url.Content("~/Content/Dashboard/css/js.css") %>' rel="Stylesheet" type="text/css" />

<script src='<%= Url.Content("~/Scripts/Dashboard/behaviour.js") %>' type="text/javascript"></script>

<script src='<%= Url.Content("~/Scripts/Dashboard/css.js") %>' type="text/javascript"></script>

<script src='<%= Url.Content("~/Scripts/Dashboard/jQueryCustom/jquery-1.4.2.min.js") %>' type="text/javascript"></script>

<script src='<%= Url.Content("~/Scripts/Dashboard/jQueryCustom/jquery-ui-1.8.1.custom.min.js") %>' type="text/javascript"></script>

<script src='<%= Url.Content("~/Scripts/jquery.modal.js") %>' type="text/javascript"></script>

<script src='<%= Url.Content("~/Scripts/jquery.jqia.selects.js") %>' type="text/javascript"></script>

<asp:ContentPlaceHolder ID="HeadContent" runat="server" />

</head>

This is the rendered HTML for the head portion of the page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>

Vacation

-

Manage Site

</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link href='/Content/Dashboard/css/meta-admin.css' rel="stylesheet" type="text/css" />

<link href='/Content/Dashboard/jQueryCustom/jquery-ui-1.8.1.custom.css' rel="stylesheet" type="text/css" />

<link href='/Content/Dashboard/css/js.css' rel="Stylesheet" type="text/css" />

<script src='/Scripts/Dashboard/behaviour.js' type="text/javascript"></script>

<script src='/Scripts/Dashboard/css.js' type="text/javascript"></script>

<script src='/Scripts/Dashboard/jQueryCustom/jquery-1.4.2.min.js' type="text/javascript"></script>

<script src='/Scripts/Dashboard/jQueryCustom/jquery-ui-1.8.1.custom.min.js' type="text/javascript"></script>

<script src='/Scripts/jquery.modal.js' type="text/javascript"></script>

<script src='/Scripts/jquery.jqia.selects.js' type="text/javascript"></script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script src="/Scripts/jquery.maskedinput-1.2.2.min.js" type="text/javascript"></script>

<script src="/Scripts/json2.js" type="text/javascript"></script>

</head>

I can't see any other big differences between this and a clean application that would prevent the axd from loading.

Thanks,

King Wilder

answered on 22 Jul 2010, 04:42 PM

Hello,

Thank you for providing us with all the additional information.

I think I see what's wrong - you don't have runat="server" set for the head tag. RadControls for ASP.NET AJAX need to have access to the head tag on the server in order to register their style-sheets.

Also, have you considred using RadAsyncUpload? It provides multiple file selection, much more responsive progress tracking and can upload files without posting the page on the server.

I hope this helps.

Kind regards,
Tsvetomir Tsonev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 26 Jul 2010, 09:13 PM

I did find an issue that I think is important to point out for users of RadUpload (and possibly other Rad controls) being used in an ASP.NET MVC application.

By adding the following code to your pages or master pages, made the RadUpload work:

<head runat="server">

But, and here's the big BUT -- once I added the Telerik MVC StyleSheetRegistrar extensions to the MasterPage, the RadUpload broke.

<% Html.Telerik().StyleSheetRegistrar()

.DefaultGroup(group => group

.Add("Dashboard/css/meta-admin.css")

.Add("Dashboard/css/ie.css")

.Add("Dashboard/jQueryCustom/jquery-ui-1.8.1.custom.css")

.Add("Dashboard/css/js.css")

.Combined(true)

.Compress(true))

.Render();

%>

The error was: "The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)"

I looked around and found out that with some controls don't like it when you also have ASP.NET code blocks in the Head tag, such as <% %>. And this is what I had with the StyleSheetRegistrar.

The solution was to enclose it inside the RadCodeBlocks and it will work.

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">