asp.net zero 8.2 学习-2-创建一个页面

淩亂°似流年 2021-07-26 22:42 314阅读 0赞

asp.net zero后台UI是基于Metronic主题的，现在学习一下如何在框架中创建一个页面  
创建页面的步骤如下：

> 1.  创建控制器
> 2.  创建视图，css和js文件
> 3.  页面名称配置
> 4.  菜单配置
> 5.  本地化语言配置

## 创建控制器 ##

在mvc项目的Area>app>Controllers下创建一个控制器：DemoController,继承自SISControllerBase类，这个类的SIS为生成框架时创建的项目名称。

using EDU.SIS.Web.Controllers;
    using Microsoft.AspNetCore.Mvc;
    
    namespace EDU.SIS.Web.Areas.app.Controllers
    {
        [Area("app")]
        public class DemoController : SISControllerBase
        {
            public IActionResult Index()
            {
                return View();
            }
        }
    }

## 创建视图，css和js文件 ##

右键上面的Index方法添加Index视图，创建视图时，不要使用布局页，视图文件的结构可以参考DemoUiComponentsController下的Index视图的内容，因为这个视图内容最少，容易找。

@using EDU.SIS.Web.Areas.app.Startup
    @{
        ViewBag.CurrentPageName = appPageNames.Common.Demo;
    }
    
    @section Styles
    {
        <link rel="stylesheet" abp-href="/view-resources/Areas/app/Views/Demo/index.css" asp-append-version="true" />
    }
    
    @section Scripts
    {
        <script abp-src="/view-resources/Areas/app/Views/Demo/index.js" asp-append-version="true"></script>
    }
    <div class="kt-content kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor">
    
        <div class="kt-subheader kt-grid__item">
            <div class="@(await GetContainerClass())">
                <div class="kt-subheader__main">
                    <h3 class="kt-subheader__title">
                        <span>@L("DemoHeaderInfo")</span>
                    </h3>
                </div>
            </div>
        </div>
    
        <div class="@(await GetContainerClass()) kt-grid__item kt-grid__item--fluid">
            <div class="kt-portlet kt-portlet--mobile">
    
                <div class="kt-portlet__body test_style">
                    <label>test</label>
                </div>
    
            </div>
        </div>
    
    </div>

在mvc项目下的www/view-resources/Areas/app/Views目录下创建Demo文件夹，添加页面需要的index.css和index.js文件。

index.css:
    
    .test_style{
        text-align:center;
    }
    
    index.js
    
    (function () {
        $(function () {
            alert("test");
        });
    })();

在创建的index.css和index.js右键，选择Bundler & minifier，压缩文件，压缩后，会在项目根目录的bundleconfig.json产生对应的输出路径，可以把index.html中的路径替换为输出路径。

## 页面名称配置 ##

页面名称配置在mvc项目的Area>app>Startup目录的appPageNames.cs文件中，在Common类中添加字段：

public const string Demo = "Demo";

## 菜单配置 ##

菜单配置在mvc项目的Area>app>Startup的appNavigationProvider.cs文件中，在最上面复制，改名：注意菜单结构

.AddItem(new MenuItemDefinition(
                            appPageNames.Common.Demo,
                            L("Demo"),
                            url: "app/Demo",
                            icon: "flaticon-line-graph"
                        )
                    )

## 本地化语言配置 ##

在页面和菜单中用到的语言：L(“Demo”)和L(“DemoHeaderInfo”)，需要为它们配置语言，在\*.Core项目中，Localization>SIS文件夹中，打开SIS-zh-Hans.xml，添加语言：

<text name="Demo">测试页面</text>
    <text name="DemoHeaderInfo">测试页面副标题</text>

最后运行，可以看到新创建的Demo页面：  
![format_png][]

[format_png]: /images/20210726/4a0153edf6274825a8a32e2e0f1b04e5.png