Question

我正在研究一个asp.net Web api项目，其中Default.html调用某些Web api端点。

现在，我需要添加另一个页面，特别是另一个URL，例如/ About，以保存另一种内容。

我希望/ Default和/ About共享相同的页眉和页脚。

我在asp.net网络表单方面有经验，我将在其中编写一个母版页面

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html>

<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server"/>
</head>
<body>
    <div>Shared Header</div>
    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"/>
    <div>Shared Fotter</div>
</body>
</html>

每个页面都像

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    Hello world
</asp:Content>

我可以在当前项目中做类似的事情吗？我想让服务器端尽可能简单。我不喜欢IIS服务器端包含，因为它需要IIS安装。我也想避免引入服务器端nodejs。但是，由于我已经在使用Web API，所以我不介意更多地使用它。

我预见到我项目中所需的所有计算都可以在客户端完成，而目前它们已经在客户端完成。因此，如果我仅使用母版页或布局引入带有空服务器端逻辑的webform或MVC，那似乎并不经济。

我倾向于使用客户端解决方案。 AngularJS，ReactJS，VueJS和各种框架可以支持吗？哪一个最简单？

我也听说过HTML导入，但是不确定如何运行。

Answer 1

很难回答您的问题，因为您提到的所有框架都可以进行这种“主页面调度”。我在日常工作中都使用Vue.js，所以我可以说一下，但这只是个人喜好。

在Vue.js中，您可以在Vue-Router中使用“母版页”，您可以在此处阅读有关内容： https://router.vuejs.org/guide/#html

主要要点是，您必须在“母版页”中放置一个路由器视图标记，并且内容的替换将由路由器根据导航进行管理（由您编程或由用户触发）互动）。

Answer 2

我建议您使用angularjs，我在一个项目中所做的基本上是在项目中拥有一个主.cshtml视图，并且该.cshtml包含页眉，页脚，侧边栏等，对此.cshtml我都引用了angularjs控制器和每个angularjs控制器都有自己的html。

主视图也有自己的angularjs控制器。

现在假设用户单击侧边栏中的一个选项，并说“发票”。单击发票后，将在主视图的angularjs控制器中调用一个函数，该函数只需将url更改为/ invoice

在我的app.js中，我正在使用$ routeProvider，其工作方式如下：-

$routeProvider.
    when('/invoice', {
        templateUrl: 'Scripts/app/invoice/template/index.html'
    })

因此路由提供程序基本上会根据url更改html，并且浏览器中加载的html具有自己的angularjs控制器

多个页面共享一个母版页面

2 个答案: