Несколько страниц делят главную страницу - PullRequest
Новая
       14

Несколько страниц делят главную страницу

0 голосов
/ 26 августа 2018

Я работаю над проектом веб-API asp.net, где Default.html вызывает определенные конечные точки веб-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 Server Side Include, потому что он требует настройки IIS.Я также хочу избежать введения nodejs на стороне сервера.Однако, так как я уже использую веб-API, я не возражаю против его более широкого использования.

Я предполагаю, что все вычисления, необходимые в моем проекте, могут быть выполнены на стороне клиента, и в настоящее время они выполняются насторона клиента.Поэтому, если я представлю веб-форму или MVC с пустой логикой на стороне сервера, исключительно для главной страницы или макета, это будет неэкономично.

Я склонен использовать решения на стороне клиента.Могут ли это поддерживать AngularJS, ReactJS, VueJS и другие виды фреймворков?Какой из них самый простой?

Я также слышал импорт HTML, но не уверен, как он будет работать.

Ответы [ 2 ]

0 голосов
/ 27 августа 2018

Я бы посоветовал вам использовать angularjs. В одном из моих проектов я в основном имею один основной вид .cshtml в своем проекте, и этот .cshtml включает в себя заголовок, нижний колонтитул, боковую панель и т. Д., И на этот .cshtml я ссылаюсь на всеконтроллер angularjs и каждый контроллер angularjs имеют свой собственный html.

В главном представлении также имеется собственный контроллер angularjs.

Теперь давайте предположим, что пользователь нажимает на опцию на боковой панели, скажем,"счет-фактура".После нажатия на счет-фактуру вызывается функция в контроллере angularjs основного вида, и эта функция просто изменяет URL-адрес на / invoice

. В моем app.js я использую $ routeProvider, который работает следующим образом: - 

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

, поэтому поставщик маршрутов в основном изменяет html в соответствии с url, а html, загруженный в браузер, имеет собственный контроллер angularjs

0 голосов
/ 27 августа 2018

Трудно ответить на ваш вопрос, потому что все фреймворки, которые вы упомянули, способны к такому «мастер-пейджингу».Я использую Vue.js в своей повседневной работе, так что я могу говорить об этом, но это только личное предпочтение.

В Vue.js вы можете использовать «главную страницу» с Vue-Router, вы можете прочитать оэто здесь: https://router.vuejs.org/guide/#html

Суть в том, что вы должны поместить тег view-router в вашу "главную страницу", а замена контента будет управляться маршрутизатором на основе навигации (либо программно вами, либо вызвано взаимодействием с пользователем).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...