How to load specific xaml file from a xap file? - asp.net

I have the following page that references my silverlight application file. This works fine. I was wondering if, instead, I could point to a specific xaml file that is in the .xap file?
Perhaps something like /ClientBin/test.xap?File=SomeXaml.xaml?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="test.Web.WebForm1" %>
<!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></title>
<script type="text/javascript" src="Silverlight.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="silverlightControlHost">
<script type="text/javascript">
Silverlight.createObject(
"ClientBin/test.xap", // source
document.getElementById('silverlightControlHost'), // parent element
"someId", // id for generated object element
{
width: "600px",
height: "600px",
background: "blue",
version: "4.0.60310.0",
autoUpgrade: "true"
},
{ onError: null }, null
);
</script>
</div>
</form>
</body>
</html>
Thanks!

First of all see my answer here to a very similar request that does most of what you need.
All you now need is to get the xaml file name from the query string to the initparams. Your existing code would become:-
Silverlight.createObject(
"ClientBin/test.xap", // source
document.getElementById('silverlightControlHost'), // parent element
"someId", // id for generated object element
{
width: "600px",
height: "600px",
background: "blue",
version: "4.0.60310.0",
autoUpgrade: "true"
},
{ onError: null }, 'StartupPage=<%=Request.QueryString[File]%>'
);

Related

W3C Validate UserControl which contains CSS

I have written a .net usercontrol for a gallery which works quite well in my web application if there is a gallery on my page. The problem is when I go to validate my page, using XHTML 1.0 Strict, I get the document type does not allow element "link" here.
I've done a bit of research and it is because I have a stylesheet embedded within the usercontrol, and is called from the body of the masterpage, so it doesn't validate. I can move the stylesheet out of the usercontrol and into the masterfile, but I don't necessary want the stylesheet loading up on every single page. What is the best way to do this - I was hoping to contain the stylesheet within the usercontrol so its simple to 'manage'.
Any advice would be great. Also thinking, do I need to remove the javascript out of the usercontrol as well?
This is the user control in question
<%# Control Language="C#" Debug="true" AutoEventWireup="true" CodeFile="Gallery.ascx.cs" Inherits="Gallery" %>
<%# Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI.WebControls" TagPrefix="asp" %>
<link ID="FancyboxCSS" type="text/css" rel="stylesheet" href="" runat="server" />
<link ID="FancyboxButtonsCSS" type="text/css" rel="stylesheet" href="" runat="server" />
<script type="text/javascript">
$(document).ready(function () {
$(".fancybox").fancybox({
maxWidth: 800,
maxHeight: 800,
fitToView: true,
aspectRatio: true,
openEffect: 'fade',
closeEffect: 'fade',
nextEffect: 'fade',
prevEffect: 'fade',
helpers: {
title: {
type: 'outside'
},
overlay: {
opacity: 0.8,
css: {
'background-color': '#000'
}
},
buttons: {}
}
});
});
<div id="gallery" runat="server">
//images here
</div>
A markup validator processes documents in a markup language, such as HTML or XML, and a document must be complete. For example, an HTML document must minimally contain a title element. And things like <%# should not be included: they are not part of the HTML document but instructions to software that generates HTML.
So you need to submit a complete, generated HTML document, if you wish to validate.
Found the answer here for anyone else looking for the same thing in the future http://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmllink(v=vs.80).aspx
// Define an HtmlLink control.
HtmlLink myHtmlLink = new HtmlLink();
myHtmlLink.Href = "~/StyleSheet.css";
myHtmlLink.Attributes.Add("rel", "stylesheet");
myHtmlLink.Attributes.Add("type", "text/css");
// Add the HtmlLink to the Head section of the page.
Page.Header.Controls.Add(myHtmlLink);

ASP.NET MVC Dynamic Stylesheets

The project I'm working on allows an end-user to modify CSS code to integrate the application as best possible. Most of the CSS values are stored in a database and need to be retrieved and parsed dynamically.
I setup a Style controller, and gave each stylesheet an action, and then passed the configuration data through to the View. I set the ContentType to "text/css" and then generated the stylesheets.
This works fine, but the problem I'm running into is this: none of the code works in the application. I include it in the head code, but it doesn't parse in the code.
An example of what I do is this:
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" ContentType="text/css" %>
.element {
background-color: <%= ViewData.Model.BackgroundColor %>;
}
I include it like so:
<link href="/style/Basic" rel="stylesheet" type="text/css" media="all" />
When I include the CSS code in a partial view and include it using the ViewModel (wrapped in style tags) in an action, then everything works fine. It is when I try to parse this as a separate file when it does not work.
Is there something I am doing incorrectly? Or is there some kind of glitch?
Thanks in advance :D
Use a tool such as HTTPWatch to verify that the stylesheet is being sent down and not 404'd
Controller
public ActionResult Basic()
{
Response.ContentType = "text/css";
var basicVM = new BasicVM()
{
BackgroundColor = "Lime",
};
return View(basicVM);
}
And the View
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage<MvcApplication3.Controllers.BasicVM>" ContentType="text/css" %>
body {
background-color: <%= ViewData.Model.BackgroundColor %>;
}
and the test page
<!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>Test</title>
<link href="/Home/Basic" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div>
Test
</div>
</body>
</html>
Turns everything Green

Any Asp.net or Asp.net MVC template based system?

Is there any template based system available for .net? I have several domains i want to handle them using a single system. Each domain can have different design. But all will be manage through a single management system.
Assuming that you mean that you want your app to select it's CSS and images folder dynamically based on the host name (domain name) in the request in order to skin your app based on the domain name, you could try something like this:
public static class Skin
{
public static string Url(string assetPath)
{
var host = System.Web.HttpContext.Current.Request.Url.Host;
switch (host)
{
case "www.myfirstsite.com":
return UrlPath("~/Content/myfirst/" + assetPath.TrimStart('/'));
case "www.theothersite.com/":
return UrlPath("~/Content/theother/" + assetPath.TrimStart('/'));
default:
return UrlPath("~/Content/default/" + assetPath.TrimStart('/'));
}
}
private static string UrlPath(string virtualPath)
{
return VirtualPathUtility.ToAbsolute(virtualPath);
}
}
Which would make all your views look something like this when referencing CSS and images:
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!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>My Page</title>
<link rel="stylesheet" type="text/css" href="<%= Skin.Url("css/master.css") %>" />
</head>
<body>
<img src="<%= Skin.Url("images/myimg.gif") %>" alt="myimg" />
</body>
</html>

asp.net/jquery - Countdown timer not working

Here is the full code:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<style type="text/css">
#import "jquery.countdown.css";
</style>
<script type="text/javascript" src="Scripts/jquery.countdown.js"></script>
<script type="text/javascript">
$('#shortly').countdown({ until: shortly,
onExpiry: liftOff, layout: "{ps} seconds to go"
});
$(document).ready(function () {
shortly = new Date();
shortly.setSeconds(shortly.getSeconds() + 5.5);
$('#shortly').countdown('change', { until: shortly });
});
function liftOff() {
// refresh the page
window.location = window.location;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<span id="shortly"></span>
</form>
</body>
</html>
I've got the jquery.countdown.js in the Scriptsmap of visual studio. Also the stylesheet "jquery.countdown.css" is in the project.
Don't have a clue about what the problem could be. I'm kind of new to jquery and trying to learn it.
I'm not familiar with this countdown plugin, but, try moving the part
$('#shortly').countdown({ until: shortly,
onExpiry: liftOff, layout: "{ps} seconds to go"
});
into the function passed to $(document).ready, replacing $('#shortly').countdown('change', { until: shortly });
Because otherwise the shortly var is not initialized when you're trying to use it.
you have a error in liftOff function with windowwindow.location
function liftOff() {
// refresh the page
window.location = window.location;
}

Ms charts : Area chart is not loading sometimes when using div.Load ,method to render a chart

I am trying to load mschart in my aspx page(SalesOverview.aspx) using jQuery.load() method,
I am loading another aspx page(ChartHandler.aspx) which accepts the parameters and render the chart .
but when trying to execute,the chart is not getting rendered sometimes.Instead i could see an image holder kind of thing in the page (Similar to what we see when we refer an invalid image url as an image tag src attribute value).
The code i am using is as below
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="SalesOverview.aspx.cs" Inherits="OmnexCRM_UI.SalesOverview" %>
<!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></head>
<body>
<form id="frmPag1" runat="server">
<div id="divGraph"> </div>
</form>
</body>
$(document).ready(function()
{
var startDate ="10/10/2009"
var endDate = "12/11/2009"
var height = "150";
var width = "730";
var strUrl = "ChartHandler.aspx?chartMode=salesOverview&startDate=" + startDate + "&endDate=" + endDate + "&height=" + height + "&width=" + width;
$("#divGraph").html("<div class='divLoadingProdReport'><img src='images/ajax-loader-gray.gif' alt='Loading...'/></div>").fadeIn(10, function() {
jQuery.ajax({
url: strUrl,
type: "POST",
processData: false,
contentType: "text/xml",
data: null,
success: function(data) {
$("#divGraph").fadeOut(200, function() {
$(this).html(data).fadeIn(100);
});
}
}); //ajax
});
});
In ChartHandler.aspx
<!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></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Panel ID="pnlSalesChart" CssClass="pnlSalesChart" Visible="false" runat="server">
</asp:Panel>
</div>
</form>
In ChartHandler.aspx.cs,In page load,i am reading the querystring values and building an area chart and adding that to the panel.
Couple of things:
You're rendering a whole page to ajax, you should just render your panel
You are doing a POST to your ChartHandler page, this should be a GET
You're requesting text/xml, yet you aren't doing anything with xml
You're requesting a webpage. Just use a generic handler (ashx) for stuff like this
Example code
HTML page
<form id="form1" runat="server">
<div>
<p>Test page</p>
<div id="renderPanel">
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$.get("chart.ashx?propertyA=1&propertyB=2", function(data, textStatus) {
$("#renderPanel").html(data);
});
});
</script>
Create a generic handler (ashx) with the name 'Chart.ashx'
public class ChartHandler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
//process querystring, which is in 'context.Request.QueryString'
context.Response.ContentType = "text/html";
PlaceHolder wrapperPanel = new PlaceHolder();
//add your chart here
wrapperPanel.Controls.Add(
new Image() { ImageUrl = "http://www.geenstijl.nl/archives/images/niekijkenw.png" });
//render control to HTML
StringBuilder stringBuilder = new StringBuilder();
StringWriter stringWriter = new StringWriter(stringBuilder);
HtmlTextWriter htmlWriter = new HtmlTextWriter(stringWriter);
wrapperPanel.RenderControl(htmlWriter);
context.Response.Write(wrapperPanel);
}
public bool IsReusable {
get {
return false;
}
}
}
Add in web.config under httpHandlers:
<add verb="*" path="~/Chart.ashx" validate="false" type="ChartHandler"/>

Resources