Встраивание приложения Angular внутри страницы .net ASPX с главной страницей - PullRequest
Новая
       43

Встраивание приложения Angular внутри страницы .net ASPX с главной страницей

0 голосов
/ 13 мая 2018

У меня есть веб-приложение ASP.NET с главной страницей, содержащей заголовок , , вкладки , BodyContent (сюда попадает содержимое каждой страницы), нижний колонтитул заполнители для пользовательских элементов управления (верхний колонтитул, вкладки, нижний колонтитул) и содержимого страницы (MainContent). Пользовательский элемент управления вкладками имеет неупорядоченный список вкладок, например, давайте рассмотрим текст вкладки как TabOne , TabTwo , TabFour , по одному щелчку каждой вкладки соответствующая веб-страница загружается с помощь javascript функция с строкой кода ниже: 

window.location.href = "TabOne.aspx";

Теперь я получил новый запрос на добавление вкладки TabThree для загрузки угловой страницы, показывающей верхний колонтитул, вкладки, нижний колонтитул и BodyContent, содержащее содержимое углового приложения, т. Е. По нажатию TabThree , мне нужно загрузить приложение angular в существующее веб-приложение ASP.NET, аналогичное справочной ссылке ( Как включить внешнее приложение Angular 2 в страницу ASP.NET Webforms aspx ) 

//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>

Если я запускаю угловое приложение независимо, оно нормально запускается с помощью команды ng serve -o и прекрасно подходит по URL (http://localhost:4200/#/TabThree?id=TID100). Теперь я скопировал dist Папка в рабочую область веб-приложения ASP.NET и переименована в AngularModules . При нажатии TabThree Я попытался загрузить угловой компонент в Bodycontent одним из следующих способов. строка кода для навигации: 

window.location.href = "TabThree.aspx/#/TabThree?ID=TID100";

window.location.href = "TabThree.aspx?AngularComponents/#/TabThree?ID=TID100";

Содержимое Head загружается нормально, но Bodycontent, который должен загружать угловой компонент TabThree , пусто, а ошибка консоли регистрируется следующим образом: 

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

Я передал ссылку ( Включая приложение Angular2 на страницу Asp.Net Webforms ), но это тоже не решило проблему, и я не могу запустить компонент Angular как вкладку в BodyContent заполнитель.

Я изучил обе ссылочные ссылки, но у них нет правильной информации о том, как происходит маршрутизация / навигация для загрузки углового компонента на странице ASPX.

Я пробовал другие подходы, кроме упомянутых выше, которые перенаправляют всю страницу и запускают приложение Angular как отдельное, но мое требование состоит в том, чтобы вписать угловой компонент в Bodycontent TabThree.aspx страница, чтобы она соответствовала другим вкладкам / страницам.

Любая помощь в решении этой проблемы маршрутизации в гибридном приложении была бы отличной помощью, и я был бы признателен за то же самое.

Заранее спасибо !!

Я не нашел ни одного возможного дубликата для того же самого, и я также связал ссылки, надеюсь, это не помечено как дубликат.

1 Ответ

0 голосов
/ 15 мая 2018

Я исправил с помощью IFrame на странице aspx.

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