代码之家 › 专栏 › 技术社区 › Gqqnbig

多页共享一个母版页

vue.js asp.net-web-api reactjs html5 angularjs

0

Gqqnbig · 技术社区 · 7 年前

现在我需要添加另一个页面,特别是另一个URL,say/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>

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

我倾向于使用客户端解决方案。AngularJS、ReactJS、VueJS和类似的框架能否支持这一点?哪一个最容易?

2 回复 | 直到 7 年前

1

Máté Wiszt 7 年前

很难回答您的问题,因为您提到的所有框架都能够进行这种“主分页”。我在日常工作中使用Vue.js,所以我可以谈论它,但这只是个人喜好。

在Vue.js中,您可以将“母版页”与Vue路由器一起使用,可以在此处阅读: https://router.vuejs.org/guide/#html

2

1

Fakhar Ahmad Rasul 7 年前

我建议您使用angularjs,我在我的一个项目中所做的基本上是我在我的项目中有一个master.cshtml视图,这个.cshtml包括页眉、页脚、侧边栏等,对于这个.cshtml我引用所有angularjs控制器,每个angularjs控制器都有自己的html。

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

在app.js中,我正在使用$routeProvider,它的工作方式如下:-

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

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