I've an ASP.NET Web application with master page containing a header, tabs, BodyContent(each page content goes here), footer place holders for user controls (header, tabs, footer) and page content (MainContent). The Tabs user control has unordered list of tabs, for example let's consider Tab's text as TabOne, TabTwo, TabFour, One click of each tab respective webpage loads with the help a javascript function with below line of code:
window.location.href = "TabOne.aspx";
Now I got a new request to add a tab TabThree to load an angular page showing Header, tabs, footer and the BodyContent holding the content of angular application i.e., on click of TabThree, I've to load an angular application in existing ASP.NET web application similar to the reference link(How to include external Angular 2 app in ASP.NET Webforms aspx page)
//TabThree.aspx
<%# Page Title="" Language="C#" MasterPageFile="~/Base.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Programs.Default" %>
<%# MasterType VirtualPath="~/Base.Master" %>
<asp:Content ID="Header" ContentPlaceHolderID="Header" runat="server">
<%--<base href="/AngularComponents/">--%> //No difference with uncommenting the base href
<%--<base href="/">--%>
<script type="text/javascript" src="../Tabs.js"></script>
</asp:Content>
<asp:Content ID="Tab" ContentPlaceHolderID="Tab" runat="server">
</asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="BodyContent" runat="server">
<div id="pageContent">
<app-root>Loading...</app-root>
<script type="text/javascript" src="AngularModules/inline.bundle.js"></script>
<script type="text/javascript" src="AngularModules/main.bundle.js"></script>
<script type="text/javascript" src="AngularModules/polyfills.bundle.js"></script>
<script type="text/javascript" src="AngularModules/vendor.bundle.js"></script>
<link href="AngularModules/styles.bundle.css" rel="stylesheet" />
</div>
</asp:Content>
<asp:Content ID="Footer" ContentPlaceHolderID="Footer" runat="server">
</asp:Content>
If I run the angular application independently it launches fine with ng serve -o command and it comes up fine at the URL (http://localhost:4200/#/TabThree?id=TID100). Now I've copied the dist folder to the ASP.NET Web application workspace and renamed it as AngularModules, On click of TabThree I've tried to load the angular component into Bodycontent with one of the below line of code for navigation:
window.location.href = "TabThree.aspx/#/TabThree?ID=TID100";
window.location.href = "TabThree.aspx?AngularComponents/#/TabThree?ID=TID100";
The Head content loads fine but the Bodycontent which supposed to load Angular component of TabThree is blank with the console error logged as below:
ERROR Sys.ParameterCountException: Sys.ParameterCountException: Parameter count mismatch.
"ERROR"
{
[functions]: ,
__ proto __: { },
__zone_symbol__currentTask: { },
description: "Sys.ParameterCountException: Parameter count mismatch.",
message: "Sys.ParameterCountException: Parameter count mismatch.",
name: "Sys.ParameterCountException",
stack: "Sys.ParameterCountException: Sys.ParameterCountException: Parameter count mismatch.
at String$startsWith (http://localhost:62557/ScriptResource.axd?
d=gb2H0hcR0_2oXWpLxJmdTg2S_j-8tZAZO1r6sTjByVD4-_6_cs99E6CayZY9pi0-N-ip5bmZNlhZWaB-IG2xnFZG-NKKnY8LqkMvfx1uzDhC1zqaP8PQi4JB24Hq7urD6rwOMv6ZCQbxzc19pQ0mcl6iexnSPre_a0zN-jpBGmFTlZ5rxoZ47qCy4shfjh4T0&t=ffffffff87bbe9c7:494:12)
at startsWith
I referred the link (Including an Angular2 application to Asp.Net Webforms Page) but that too didn't solve the problem and I'm not able to launch the Angular component as a Tab in the BodyContent placeholder.
I've studied both the reference links but they don't have the right information about how the routing/navigation is happening to load the angular component in the ASPX Page.
I've tried other approaches than mentioned above which redirects the entire page and launch Angular application as a standalone but my requirement is to inscribe the angular component into the Bodycontent of the TabThree.aspx page so it would be consistent with the other Tabs/pages.
Any help in solving this Routing issue in the hybrid application would be a great help and I would appreciate the same.
Thanks in Advance!!
I didn't find any possible duplicate for the same and I've linked the references as well, Hopefully this is not marked as duplicate.
I've fixed with the help of IFrame in the aspx page.
//TabThree.aspx
<div id="dvngComponent" runat="server"></div>
//TabThree.aspx.cs
string url = "AngularComponents/#/TabThree?ID=TID100";
HtmlGenericControl ngComponent = new HtmlGenericControl("iframe");
ngComponent.Attributes.Add("id", "frmNgComponent");
ngComponent.Attributes.Add("src", url);
ngComponent.Attributes.Add("allowtransparency", "true");
ngComponent.Attributes.Add("frameBorder", "0");
ngComponent.Style["margin"] = "0 0 0 0";
ngComponent.Style["width"] = "100%";
ngComponent.Attributes.Add("height", "300px");
dvngComponent.Controls.Add(ngComponent);
Related
I have one master page and several content pages , I need to put a form tag inside a master page to handle sending data from my html elements and do this for my content pages as well .but I need to understand what is the best way to structure for such this scenario and what would be the effect of form tag of master page on content pages ? is it possible to put form tag in content pages when the master page has this tag inside itself ? I appreciate if I have in detail explanation ?
The <form runat="server"> element lives in the master page by default when you add a new one to your project; all child pages are implemented using ContentPlaceHolders.
For example, the master page: -
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
You can have as many ContentPlaceHolders as you need (often only one is needed though). If you then add a "child page using master page", the page-specific content is added inside the relevant <asp:Content> element - these are added by default once you have specified the master page to use when adding a "child page using master page": -
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<!-- your markup, controls etc.. -->
</asp:Content>
Have a read of the MSDN docs for more - http://msdn.microsoft.com/en-us/library/aa581781.aspx
I have a master page and a content page for my ASP.NET web forms site. Both pages have style blocks.
The following is from my content page:
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<style type="text/css" runat="server">
.scroll td:nth-of-type(1)::before {
content: "Column Name";
color: black;
} ...
And the master page:
<head id="Head1">
<style type="text/css" runat="server">
...
</style>
...
<asp:ContentPlaceHolder runat="server" ID="HeadContent" /> ...
The rendered HTML only applies the content style block under two conditions: page refresh and disabling jQuery Mobile. Everything else seems to make no difference, and I have been unsuccessful at getting the style block to apply changes on the initial page load on the content page without disabling jQuery Mobile.
The style block is present at all times, but is not normally applied. I have tried to move the style to the body. I have deleted the master page's style block. I have experimented with runat="server". Also, the order of the content placeholder in relation to the master page's style block doesn't matter. Style from the master page is always rendered. I have compared the rendered source code before and after a page refresh and the rendered HTML pages pre and post refresh are identical despite the fact that only the refreshed page works as anticipated.
Is there something that I'm missing? I am using ASP.NET v4.5 Web Forms and Visual Studio 2012 update 4?
I'm really new to ASP.NET MVC, and I'm trying to integrate some Javascript into a website I'm making as a test of this technology.
My question is this: how can I insert Javascript code into a View?
Let's say that I start out with the default ASP.NET MVC template. In terms of Views, this creates a Master page, a "Home" View, and an "About" view. The "Home" View, called Index.aspx, looks like this:
<%# Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
Home Page
</asp:Content>
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<h2><%= Html.Encode(ViewData["Message"]) %></h2>
<p>
To learn more about ASP.NET MVC visit http://asp.net/mvc.
</p>
<p>Welcome to this testing site!</p>
</asp:Content>
Adding a <script> tag here didn't work. Where and how should I do it?
P.S.: I have a feeling I'm missing something very basic... Thanks in advance!
One thing you may want to consider is adding a "scripts" content place holder to your master page, that loads scripts at the end of the body. This way you load your scripts at the end of the page so that it doesn't slow down loading the DOM elements (once a script starts loading it only does one request at a time, because the code can affect the DOM). This gets a little tricky with PartialView -- if you include code in them you need to figure out a way to delay executing anything that relies on later scripts after those scripts have loaded. A compromise might be to load things like jQuery in the header and the rest of your common scripts at the end of the body.
Site.Master
<body>
...
<asp:ContentPlaceHolder runat="server" id="MainContent"></asp:ContentPlaceHolder>
...
<script type="text/javascript" src="<%= Url.Content( "~/scripts/jquery-1.4.1.min.js" ) %>"></script>
<asp:ContentPlaceHolder runat="server" id="ScriptContent"></asp:ContentPlaceHolder>
</body>
</html>
View
<asp:Content runat="server" ID="mainContent" ContentPlaceHolderID="MainContent">
... HTML ...
</asp:Content>
<asp:Content runat="server" ID="scriptContent" ContentPlaceHolderID="ScriptContent">
<script type="text/javascript">
$(function() {
$('.selector').click( function() {
...
});
});
</script>
</asp:Content>
Just stumbled on this question and would like add a comment that in Visual Studio 2013 it can be done in more elegant way.
In your master page just put the following code at the bottom of the page (in the default generated master page this code is already there):
<body>
...
#RenderSection("scripts", required: false)
</body>
</html>
Then in your view just at the bottom the following code:
#section scripts
{
<script src="...script url..."></script>
}
or if you use bundles
#section scripts {
#Scripts.Render("~/bundles/<script id>")
}
or you can put a <script>...</script> section with your Javascript code into the #section scripts block in the view.
Go create an additional <asp:ContentPlaceHolder> inside of the <head> of your masterpage and then your views will have a third <asp:Content> section for you to register external .js files, custom <script> blocks, external .css files, and custom <style> blocks.
The <script> tag needs to go inside an <asp:Content> block. (Otherwise, where would it end up?)
I'm using ASP.NET with a master page containing a script manager. I want to add a javascript file to only one page, but all pages inherit from the master. What is the proper way to accomplish this?
thanks in advance
Add a script manager proxy to the page you wish to add the javascript to and then add the javascript reference using the script manager proxy
In the Master Page add a content container in the HEAD section, in your page put the Javascript tag inside the instance of that container.
EDIT - for d03boy
On MasterPage:
<head runat="server">
<asp:ContentPlaceHolder ID="HeadContent" runat="server" />
</head>
On ContentPage:
<asp:Content ID="LocalHeadContent" ContentPlaceHolderID="HeadContent" runat="server">
<script type="javascript" \>
</asp:Content>
For any content page that doesn't have something to include in the page header there's no need to even create the Content tag.
Can you just use the ClientScriptManager?
if (!Page.ClientScript.IsClientScriptIncludeRegistered("MyKey"))
{
Page.ClientScript.RegisterClientScriptInclude("MyKey", "~/js/script.js");
}
There are a couple of ways to accomplish what you are looking for.
1- put a content place holder in the section of your master page
<head runat="server">
<asp:ContentPlaceHolder runat="server" ID="JavascriptPlaceHolder">
</asp:ContentPlaceHolder>
</head>
and in the specific page you want to add a javascript file add:
<asp:Content ID="Content2" ContentPlaceHolderID="JavascriptPlaceHolder" Runat="Server">
<script type="text/javascript" src="myfile.js" ></script>
</asp:Content>
2- When you are not using Update Panels, use the ClientScript:
Page.ClientScript.RegisterClientScriptInclude("MyKey", "/myfile.js");
3- When using Update Panel and partial page rendering, use the ScriptManager object to register your javascript: (For a script that should be available for the onload event or at least be available when an update panel refreshes)
string javascript_string = "function myAlert(){ alert('me'); }";
ScriptManager.RegisterStartupScript(this, typeof(string), "MyKey", javascript_string, false);
Use the content place holder where you can, then use either other technique when you can't.
How to embed javascript into a content page?
What is prefered way of setting html title (in head) for view when using master pages?
One way is by using Page.Title in .aspx file, but that requires in master page which can mess with HTML code. So, lets assume no server side controls, only pure html. Any better ideas?
UPDATE: I would like to set title in view NOT in the controller or model.
In our master pages, we created both an "init" ContentPlaceHolder, and a "title" ContentPlaceHolder. If someone wants to programatically set Page.Title, they can set it in CSharp in the init placeholder, or they can override the "title" placeholder using tags.
Master Page
<asp:ContentPlaceHolder id="init" runat="server"></asp:ContentPlaceHolder>
<head runat="server">
<asp:ContentPlaceHolder ID="title" runat="server">
<title><%=this.Page.Title%></title>
</asp:ContentPlaceHolder>
</head>
View Page
Could either override the entire "title" content placeholder:
<asp:Content ID="Content1" ContentPlaceHolderID="title" runat="server">
<title>Home Page</title>
</asp:Content>
or programatically set the page title.
<asp:Content ID="Content1" ContentPlaceHolderID="init" runat="server">
<%this.Title = "Home Page";%>
</asp:Content>
Make sure you remove the Title="" from the Page directive at the top, or you won't be able to programatically change Page.Title.
I see a lot of people that use the <%= ViewData["Title"] %> option.
I suppose you could also insert a ContentPlaceHolder named Title and then just use that on your page, but in all the MVC examples I've seen, they use the first option.
When I create a new MVC project it has files in there and uses a master page. Looking at that it seems it passes the title to the ViewData as ViewData["Title"] and in the master page, in the <head> there is a script block that outputs ViewData["Title"].
I ended up using a code-behind file to implement Page.Title="..." in the Page_Load() method.
I didn't like doing this, however attempts to implement the change directly in the .aspx page did not work, as it resulted in two <title> tags being present, the one I generated, and the one generated by the Master file the page inherited from.
Ideally, my page code should have overridden the master file's <title> value, but I guess this is just one of those quirks that ASP.Net MVC still has, and one that may already be fixed in a newer version of the ASP.Net MVC Framework (we're still on ASP.Net MVC Beta)
You could do this in your Master Page:
<title>
<%:MyTitle + " :: " %>
<asp:ContentPlaceHolder ID="TitleContent" runat="server">
</asp:ContentPlaceHolder>
</title>
where MyTitle = some value from your web.config or hard text like "My Web"
Now in the view pages (Index for example):
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
<%:"My Home Page"%>
Now when you browse your home page, the title would be "My Web :: My Home Page".
I have a base view class that sets the page title from a resource file. Works pretty good for me.
I created a class called Application with a Title property (using get/set):
public static class Application
{
static string title;
public static string Title
{
get { return title; }
set { title = value; }
}
}
I then set the property on the Page_Load event for each page:
Application.Title = "Silly Application";
then i just reference that property on the master page:
<div id="divApplicationTitle">
<asp:HyperLink runat="server" NavigateUrl="~/Default.aspx"><asp:Image ID="imgApplicationImage" runat="server" SkinID="skinApplicationLogo" /><%=Application.Title%></asp:HyperLink>
</div>
There is a Title property of the #Page directive for content pages.
For ASP.NET content pages just add Title="" in the <%# %> Placeholder.
We ended up with
<head runat=server visible=false>
in master page.
This way we can read from Page.Title (Page.Title requires head element to exist, otherwise it throws an exception, checked that with reflector). We then use our own head element - MVC way.
You could always use javascript in your view page:
<script type="text/javascript>
document.title = "Hello World";
</script>