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

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

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

Теперь я получил новый запрос на добавление вкладки TabThree для загрузки угловой страницы, показывающей верхний колонтитул, вкладки, нижний колонтитул и BodyContent, содержащий содержимое углового приложения, т.е. при нажатии TabThree >, я должен загрузить угловое приложение в существующее веб-приложение 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, который должен загружать компонент Angular 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 Page), но это тоже не решило проблему, и я не могу запустить компонент Angular как вкладку в заполнителе BodyContent.

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

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

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

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

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


angular asp.net asp.net-mvc angular2-routing angular4-router
person BVS    schedule 13.05.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я исправил с помощью 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);
person BVS    schedule 15.05.2018