Add custom header to an iframe asp.net - asp.net

There is a legacy .net application. In its content page , I need to open a MVC application. So I am using Iframe and opening the MVC application .
I am stuck as to how to send parameters to the MVC application via custom headers. I cant use query string as the paramter need to be sent is quite big.
Pls help.
<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server">
<iframe id="frame" ></iframe>
</asp:Content>
THis is the piece of code in my .net application. How to add headers when MVC appl is being invoked.

Don't know what you mean by passing data via "custom headers." Typically headers are for metadata, not data. If you have a significant amount of data to pass, the traditional way is via form/post. Here's one way to do it:
In the legacy app (the one that contains the iFrame):
<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server">
<iframe id="frame" src="https://MyLegacyApp.com/Handoff.aspx"></iframe>
</asp:Content>
Note: Yes, the SRC of the iFrame points to the legacy app, not the new MVC app.
Add a new page to the legacy app called Handoff.aspx that looks like this:
<!-- Provide image while form is posting. Style = centered. -->
<IMG SRC="Spinner.png" ALT="Please wait" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);">
<!-- Hidden form that will post data to MVC site -->
<FORM Action="https://MyMVCApp.com/ReceiveHandoff" method="POST">
<INPUT Name="Input1" Type="Hidden" Value="PLACE YOUR HUGE DATA HERE, OR IN SEVERAL HIDDEN TAGS IF YOU WANT.">
</FORM>
<!-- Script that autoposts the form -->
<SCRIPT>
window.onload = function(){document.forms[0].submit();}
</SCRIPT>
Now the "ReceiveHandoff" page in your MVC site will be accessed via iFrame and initialized with the data passed in the form. To read the data, you can use one of these methods, for example:
var data = Request["Input1"];

Related

Embedding an Angular app inside .net ASPX page with master page

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);

Masterpage and Masterpage in jQuery UI Dialog giving same ID

Background:
I have a main Masterpage that I use on all the pages of my website, certain pages in the website launch jQuery UI modal dialogs that in turn load other webforms that have their own special Modal MasterPage.
Directory Structure:
/
/templates/Main.master
/templates/Modal.master
/htmlmodals/popup.aspx
/main.aspx
The Problem:
there appear to be two problems. Firstly when I complete any action within the Modal Masterpage that causes a postback, the (popup.aspx) page attempts to try and look within the directory of the file that called the modal, so I end up with an error like
Description: HTTP 404. The resource you are looking for ...blah blah blah...
Requested URL: /popup.aspx
Another issue that I have just found, is that the generated source code form main.aspx shows that I have two form fields with exactly the same ID, even though I specified the Modal to have a different one.
<form name="aspnetForm" method="post" action="main.aspx" id="aspnetForm">
...
</form>
<div id="modal-holder">
<form name="aspnetForm" method="post" action="popup.aspx" id="aspnetForm">
...
</form>
</div>
Query:
Do I need to specify a <html><head></head><body>... etc in the Modal.master file? I ask because the pages load exactly how I want them to (including processing of code behind), with the exception of postbacks, just using the following code:
Modal.master
<%# Master Language="VB" AutoEventWireup="false" CodeBehind="modal.master.vb" Inherits="--REMOVED IDENTIFIER--.Web.Site.modal" %>
<form id="modalForm" runat="server">
<div>
<div class="alert-box" id="error-area--modal">
<p></p>
<div class="error-content"></div>
<div class="error-synopsis"></div>
<div class="validity-summary-container">
<ul></ul>
</div>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<script>
initialiseEvents();
</script>
</form>
A typical modal would be launched using the following jQuery code
$('#<%= btnPopup.ClientID %>').click(function(e){
e.preventDefault();
dHeight = ($(window).height()) * 0.95;
baseDialog.dialog('option',{title:'Edit', width:'95%', height:dHeight, open:function (e, ui) {$('#modal-holder').load('/htmlmodals/popup.aspx');}}).dialog('open');
});
Update : Adding the relevant html/head/body tags to the modal master does NOT fix the postback/duplicate ID issue
Update 2 : Added an update panel around the part of the popup.aspx that posts back, doesn't appear to have worked either, still trying to do a normal postback to /popup.aspx
This SO question when-i-load-an-aspx-page-using-jquery appears to be very similar to my own question, so the answer looks like i'll have to write a javascript method to update my page instead of posting back.

Organize ASP MVC site

I am new to ASP MVC.
Im trying to build a website with a header, footer, menu and a place to the main content.
What is the best approach for that?
Partial views, areas?
Thanks
Use layout.chtml file, This will work as Master page to your site and will be available for all your views.
For MVC3 you may see: ASP.NET MVC 3: Layouts and Sections with Razor
What are Layouts?
You typically want to maintain a consistent look and feel across all of the pages within your web-site/application.
ASP.NET 2.0 introduced the concept of “master pages” which helps
enable this when using .aspx based pages or templates. Razor also
supports this concept with a feature called “layouts” – which allow
you to define a common site template, and then inherit its look and
feel across all the views/pages on your site.
You can use partial views for Header and Footer. For most of my Asp.Net MVC Projects, I use partial Views in master page. You can add your menu in the header partial view.
<body>
<div class="contentdiv">
<% Html.RenderPartial("Header"); %>
<div class="row-fluid">
<div class="container containerbg" >
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</div>
<% Html.RenderPartial("Footer"); %>
<asp:ContentPlaceHolder ID="ScriptsSection" runat="server" />
</div>
</body>

ASP.NET Master Page and User Content Forms

Is there a good way to enable forms that come out of user content (CMS) that is displayed inside the form runat="server" tag? All sorts of services provide forms for users to paste into their website, which break if the content ends up inside a .net form. It seems to me that there must be a good way around this, but I can't seem to find any solutions.
The one solution I've found is to put them in an IFRAME. So instead of embedding your form inside the page:
<FORM action="http://www.example.com/target.html">
.. form content
</FORM>
create a new ASPX file like this:
<FORM action="http://www.example.com/target.html" target="_top">
.. form content
</FORM>
Then in your original page, you'll refer to it via an IFRAME:
<IFRAME src='myform.aspx'></IFRAME>
Some things you'll need to do:
Make sure that you do not include any <FORM runat="server"> inside the new ASPX file.
Adjust the size of the IFRAME and the ASPX file to be exactly the same
For the FORM in the new ASPX files, you probably want to set target='_top' to ensure when a user fills in the form, the result is in the main window rather than inside the IFRAME.

Issues with aspnetForm in hybrid asp.net webforms/mvc app

I am building a hybrid MVC/Webforms application where my MVC views are using an asp.net webforms 2 MasterPage. Everything has been working perfectly until I decided to put a form in my MVC view. Since ASP.NET Webforms wraps the entire page in a form element and you can't have a form within a form, I'm a little bit stuck.
There are a load of legacy controls in the master page which rely on the post back so I can't just disable it. The one thought I have at the moment is that all of the controls which rely on the aspnetForm form are above of the MVC page so was wondering if there is anyway to control when asp.net closes the aspnetForm form tag? Or does anyone have any other thoughts about how I could solve this problem?
I've been here before, and ended up plumping for separate master pages, however:
Maybe you haven't looked too closely, but you do have control over where and how that form is wrapped around your entire container
[Edit]: More complete example:
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="LegacyContentHolder" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<asp:ContentPlaceHolder ID="MvcContentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</body>
Surely you can just move that around the appropriate placeholders for the Webforms stuff, and leave the other placeholders outside the scope of it?
This generates the following markup if used on a page
<body>
<form name="aspnetForm" method="post" action="Test.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNDMyNDU0NjAzZGT01Ocz+ON8w56SI8x7nj2/h8B/4g==" />
</div>
<div>
Web forms behaviour has been generated here, boo
</div>
</form>
MVC content has been generated here, yay
</body>
[Edit]
Note: I've checked our code now, had to go back a few versions - what we also did is had three master pages, one for the skeleton described above, one with the specific ASP.NET Webforms stuff, and one inheriting from that for just the MVC stuff.
Kept things kinda clean, and ready for migrating it away from Webforms in the future.
You shouldn't have a problem, you control where the form tag is in your masterpage. Are you saying to need to close the masterpage's form tag early when using it for MVC, and leave it where it is for WebForms?
You'll probably need to mess about with the control tree, when I've done this before I've used two masters, although you might be able to get away with abstracting a common base.master, then have mvc.master and webforms.master

Resources