I am struggling with an IE/Silverlight bug which seems to be known since quite a while: When a silverlight page is refreshed in IE10, the app turns into a white page. No error messages or anything alike. I am using IE11 and the behavior is the same. It is absolutely ridiculous that such a showstopper still hasn't been fixed and I was not able to find one helpful response from Microsoft. Anyway, I found workarounds in this thread:
SO thread
but I don't manage to get any of the workarounds to work properly.
This is my latest try:
<%# Page Language="c#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Manager</title>
<style type="text/css">
html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
text-align:center;
}
</style>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript">
function onSilverlightError(sender, args) {
var appSource = "";
if (sender != null && sender != 0) {
appSource = sender.getHost().Source;
}
var errorType = args.ErrorType;
var iErrorCode = args.ErrorCode;
if (errorType == "ImageError" || errorType == "MediaError") {
return;
}
var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n" ;
errMsg += "Code: "+ iErrorCode + " \n";
errMsg += "Category: " + errorType + " \n";
errMsg += "Message: " + args.ErrorMessage + " \n";
if (errorType == "ParserError") {
errMsg += "File: " + args.xamlFile + " \n";
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
else if (errorType == "RuntimeError") {
if (args.lineNumber != 0) {
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
errMsg += "MethodName: " + args.methodName + " \n";
}
throw new Error(errMsg);
}
</script>
<meta http-equiv="x-ua-compatible" content="IE=8" />
</head>
<body>
<form id="form1" runat="server" style="height:100%">
<a id="myLink" ></a>
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/Manager.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="5.0.61118.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object>
<script type="text/javascript" language="javascript">
var shc = document.getElementById("silverlightControlHost");
document.getElementById("myLink").focus();
</script>
</div>
</form>
</body>
</html>
Here I included the meta-tag for compatibility mode and the java snippet to focus another control. Neither seems to work.
Are there any updates on this issue which I have missed?
Are there any mistakes in the code shown above?
Could someone post a complete page which implements a working workaround?
Additional information:
OS: Windows 8.1
IE: 11.0.96000
SL: 5.1.30514.0
Related
Why does the following code works perfectly in browsers like Chrome 41, Firefox 36 and IE 10 but doesn't work as expected in the WebBrowser control in Windows Forms?
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
body {
display: table;
}
.my-block {
text-align: center;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="my-block">Some text</div>
</body>
</html>
This solution is from this answer (JSFiddle).
this.webBrowser.DocumentText =
"<!DOCTYPE HTML>" +
"<html>" +
"<head>" +
"<style type=\"text/css\">" +
"html, body {" +
"height: 100%;" +
"margin: 0;" +
"padding: 0;" +
"width: 100%;" +
"}" +
"body {" +
"display: table;" +
"}" +
".my-block {" +
"text-align: center;" +
"display: table-cell;" +
"vertical-align: middle;" +
"}" +
"</style>" +
"</head>" +
"<body>" +
"<div class=\"my-block\">Some text</div>" +
"</body>" +
"</html>";
This code gives me the following result:
Why? What am I doing wrong? How can I fix it?
Thanks in advance.
I am creating a table which should read binary image from DB and display in Html table.
My Markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Table Test</title>
<style type="text/css">
.small-ad-wrapper{width:215px;height:195px;overflow:hidden;}
.small-ad-wrapper .portfolio-img-control{width:204px;height:134px;overflow:hidden;margin-bottom:3px;}
</style>
</head>
<body>
<form id="Form1" runat="server">
<div>
<br />
<asp:Button ID="cmdCreate" OnClick="cmdCreate_Click" runat="server" Text="Create" />
<br />
<br />
<asp:Table ID="tbl" runat="server" />
</div>
</form>
</body>
</html>
My Code Behind:
StringBuilder htmlTable = new StringBuilder();
htmlTable.Append("<table border='1'>");
htmlTable.Append(#"<tr style='background-color:green; color: White;'>
<th>Company Name</th>
</tr>");
int i = 1;
foreach (DataRow row in DT.Rows)
{
if (i == 1)
{
htmlTable.Append("<tr style='color: White;'>");
}
htmlTable.Append("<div class='portfolio-img-control'>");
byte[] bytes = (byte[])(byte[])row["LogoFile"];
string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);
System.Web.UI.WebControls.Image imgNew = new System.Web.UI.WebControls.Image();
imgNew.ImageUrl = "data:image/png;base64," + base64String;
htmlTable.Append("<td>" + imgNew + "</td>");
htmlTable.Append("</div");
if (i == 3)
{
htmlTable.Append("</tr>");
i = 1;
}
else
i = i + 1;
}
htmlTable.Append("</table>");
DBDataPlaceHolder.Controls.Add(new Literal { Text = htmlTable.ToString() });
htmlTable.Append("<tr>");
htmlTable.Append("<td align='center' colspan='4'>There is no Record.</td>");
htmlTable.Append("</tr>");
But it gives me result "System.Web.UI.WebControls.Image" and doesnt show image at all.
How to do this? Please reply Thanks
Because you create a new asp.net image control, and try to use the object as string.
These lines must be remove...
System.Web.UI.WebControls.Image imgNew = new System.Web.UI.WebControls.Image();
imgNew.ImageUrl = "data:image/png;base64," + base64String;
htmlTable.Append("<td>" + imgNew + "</td>");
if you like to render it as string, must be change as:
htmlTable.AppendFormat("<td><img src=\"data:image/png;base64,{0}\"></td>", base64String);
Please note, I do not know if the rest of your code is bug free...
I have a calender control and on selecting a respective date, I need to display Today's Due and Over due as two section in an accordion. I tried adding div with style to give the look of accordion but that is giving UI issues.Currently,I am planning to add Accordion (Jquery).Since, the accordion is to be displayed while selecting a date from calender control. I am binding the accordion div in code behind and converting it to Json to be shown, while selecting the respective date.The code to add the div is as follows:
[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string CalenderBinderAccordian()
{
try
{
//Code to fetch ProductGroup is not shown
foreach (var p in productGroup)
{
string todoString = "";
int uniqueID = Guid.NewGuid().GetHashCode();
todoString = "<div id='accordion' class='ui-accordion ui-widget ui-helper-reset' role='tablist'><h3><b>Due Today</b></h3>";
todoString += "<div>";
foreach (var t in p.todo)
{
var tempAmt = String.Empty;
if ((t.Amount == null) || t.Amount == String.Empty)
tempAmt = "0";
else
tempAmt = Convert.ToDecimal(t.Amount.ToString()).ToString();
todoString += "<p style='padding:5px 0px; border-bottom:dashed 1px #dddddd;'><b>" + todoCount.ToString() + "</b>. " + t.ProductName + "<span style='text-align:right; padding-right:5px;'> $" + tempAmt + "</span><a href='PaymentDetails.aspx' target='_blank' style='text-decoration:none;'><b>Pay Now</b></a></p>";
todoCount++;
}
todoString += "</div>";
var overDue = temps.Select(x => new { x.DueDate }).Distinct().ToList();
int overDueCount = 0;
uniqueID = Guid.NewGuid().GetHashCode();
todoString += "<h3><b>Over Due</b></h3>";
int todoCount1 = 1;
todoString += "<div>";
for (int i = 0; i < overDue.Count(); i++)
{
if ((Convert.ToDateTime(overDue[i].DueDate) - Convert.ToDateTime(p.dates)).Days < 0)
{
overDueCount++;
var overDueList = temps.FindAll(x => x.DueDate.Equals(overDue[i].DueDate)).ToList();
foreach (var t in overDueList)
{
var tempAmt = String.Empty;
if ((t.Amount == null) || t.Amount == String.Empty)
tempAmt = "0";
else
tempAmt = Convert.ToDecimal(t.Amount.ToString()).ToString();
todoString += "<p style='padding:5px 0px; border-bottom:dashed 1px #dddddd;'><b>" + todoCount1.ToString() + "</b>. " + t.ProductName + "<span style='text-align:right; padding-right:5px;'> $" + tempAmt + "</span><a href='PaymentDetails.aspx' target='_blank' style='text-decoration:none;'><b>Pay Now</b></a></p>";
todoCount++;
todoCount1++;
}
}
}
todoString += "</div>";
todoString = todoString + "</div>\",\"count\":\"" + todoCount + "\"},";
jsonString = jsonString + String.Format("{{\"{0}\" : \"{1}\",\"{2}\" : \"{3}", "dates", p.dates, "todo", todoString);
if (overDueCount.Equals(0))
{
jsonString = jsonString.Replace("<h3><b>Over Due</b></h3><div></div>", "");
}
}
jsonString = jsonString.TrimEnd(',');
jsonString = '[' + jsonString + ']';
string data= jsonString;
return data;
}
catch (Exception ex)
{
throw;
}
}
The code in the ascx page is as follows:
/
/Scripts for Calender control
<script type="text/javascript" src="../../Scripts/jquery-1.8.3.js"></script>
<link rel="stylesheet" href="../../Content/jquery.calendarPicker.css" type="text/css" media="screen"/>
<script type="text/javascript" src="../../Scripts/jquery.calendarPicker.js"></script>
<link rel="stylesheet" href="../../Content/style.css" type="text/css" media="screen"/>
//Scripts for accordion
<link rel="stylesheet" href="../../Content/jquery-ui.css" />
<script type="text/javascript" src="../../Scripts/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#accordion").accordion();
});
</script>
<div class="calendercontent">
<div id="dsel1" style="width:200px;">
<span id="span1"></span>
</div>
<img class="ref" src="../../Images/refresh_circle.gif" alt="refresh" title="refresh"/>
<div id="todo"></div>
</div>
It is noticed that when I add the div data in the ascx page the accordion works fine and using fireBug the accordion class are shown.But since the accordion data is added in the code behind and displayed using java script.The below displayed function is not working.
Kindly help, I am a beginner in Jquery.
<script type="text/javascript">
$(function () {
$("#accordion").accordion();
});
</script>
Try with this:
$(document).find("#accordion").accordion();
this is because the accordion function is called when the DOM is ready $(function () {... and by thn the dynamically added div is not there in the DOM.. so
call the accordion function after the dynamically generated div is displayed..
//code to display your dynamic div..
$("#addedDivID").accordion(); //call the accordion function (again) after that..
I want to convert from wmv to mp4, webm and ogv on upload.
is there a way to implement miro video converter or something like at codebehind?
what i use is ACT's AsyncUpload
aspx page
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
<script type="text/javascript">
function uploadError(sender, args) {
if (document.getElementById('<%=lblStatus.ClientID%>').innerText.indexOf('must be a video') == -1)
document.getElementById('<%=lblStatus.ClientID%>').innerText = "Upload error!", "<span style='color:red;'>" + args.get_errorMessage() + "</span>";
}
function StartUpload(sender, args) {
document.getElementById('<%=lblStatus.ClientID%>').innerText = 'Uploading';
}
function UploadComplete(sender, args) {
var filename = args.get_fileName();
var contentType = args.get_contentType();
if (contentType.indexOf('video') == -1) {
document.getElementById('<%=lblStatus.ClientID%>').innerText = "Uploaded file must be a video!", "<span style='color:red;'>" + args.get_errorMessage() + "</span>";
document.getElementById('<%=AsyncFileUpload1.ClientID%>').text.style.backgroundColor = "Red";
}
else {
var text = "" + filename + "\n" + "Size: " + parseInt((args.get_length()) / 1048576) + " MB" + " (" + args.get_length()+") bytes";
document.getElementById('<%=lblStatus.ClientID%>').innerText = text;
}
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
<h1>Add Movies to storage</h1>
<p>File upload<p>
<br />
<asp:AsyncFileUpload ID="AsyncFileUpload1" Width="400px" runat="server" OnClientUploadError="uploadError"
OnClientUploadStarted="StartUpload" OnClientUploadComplete="UploadComplete" CompleteBackColor="Lime"
UploaderStyle="Modern" ErrorBackColor="Red" ClientIDMode="AutoID" ThrobberID="Throbber"
UploadingBackColor="#66CCFF" OnUploadedComplete="AsyncFileUpload1_UploadedComplete" />
<asp:Label class="lastoppimg" ID="Throbber" runat="server" CssClass="style1">
<img src="../Movies/LoadingImg.gif" style="left:auto; right:auto; height:32px; width:32px;" alt="loading" />
</asp:Label>
<br />
<asp:Button class="lastoppk" ID="Button1" runat="server" Text="Start Upload" OnClick="Button3_Click" />
<asp:Label ID="lblStatus" runat="server" Style="font-family: Arial; font-size: small;"></asp:Label>
</div>
</div>
Codebehind
protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
if (AsyncFileUpload1.HasFile)
{
string strPath = MapPath("~/Test/") + Path.GetFileName(e.filename);
AsyncFileUpload1.SaveAs(strPath);
}
}
Miro is actually using FFMpeg for its transcoding.
You can use FFMpeg yourself or easier, You can use it from .NET by using the MediaHandlerPro component. (They also have a free version)
How to make transparent background of Silverlight 3 application? I have the next code but it does not work (
<html xmlns="http://www.w3.org/1999/xhtml" >
<!-- saved from url=(0014)about:internet -->
<head>
<title>BGtest</title>
<style type="text/css">
html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
text-align:center;
}
</style>
<script type="text/javascript">
function onSilverlightError(sender, args) {
var appSource = "";
if (sender != null && sender != 0) {
appSource = sender.getHost().Source;
}
var errorType = args.ErrorType;
var iErrorCode = args.ErrorCode;
if (errorType == "ImageError" || errorType == "MediaError") {
return;
}
var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n" ;
errMsg += "Code: "+ iErrorCode + " \n";
errMsg += "Category: " + errorType + " \n";
errMsg += "Message: " + args.ErrorMessage + " \n";
if (errorType == "ParserError") {
errMsg += "File: " + args.xamlFile + " \n";
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
else if (errorType == "RuntimeError") {
if (args.lineNumber != 0) {
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
errMsg += "MethodName: " + args.methodName + " \n";
}
throw new Error(errMsg);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
<body bgcolor="#00FF00">
<form id="form1" runat="server" style="height:100%">
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="BGtest.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="pluginbackground" value="Transparent" />
<param name="background" value="#80FF0000"/>
<param name="windowless" value="true" />
<param name="minRuntimeVersion" value="3.0.40624.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
</form>
</body>
</html>
You've got a partially-transparent background there at the moment (#80FF0000). Why not change it to fully transparent like this:
<param name="background" value="transparent"/>
You can then draw whatever you want to be partially-transparent in your Silverlight app. However, be warned that transparent background with windowsless=true can be REALLY slow. It's better to avoid this using clever graphic design to fit the Silverlight control into the page, if possible.