265 lines
6.4 KiB
Markdown
265 lines
6.4 KiB
Markdown
|
# HTML语法转换总结
|
|||
|
|
|
|||
|
|
## 概述
|
|||
|
|
|
|||
|
|
根据项目要求，将 `CommunicationConfiguration.cshtml` 和 `RealTimeTest.cshtml` 文件从Razor语法转换为纯HTML语法，确保项目能够正确编译和运行。
|
|||
|
|
|
|||
|
|
## 转换原则
|
|||
|
|
|
|||
|
|
### 1. 移除所有Razor语法
|
|||
|
|
- **@ 符号**: 移除所有以@开头的Razor代码
|
|||
|
|
- **代码块**: 移除 `@{}` 代码块
|
|||
|
|
- **指令**: 移除 `@section`、`@Html`、`@Url` 等指令
|
|||
|
|
- **服务器端代码**: 移除所有C#服务器端代码
|
|||
|
|
|
|||
|
|
### 2. 使用标准Web技术
|
|||
|
|
- **HTML5**: 使用标准HTML5语法
|
|||
|
|
- **CSS3**: 使用标准CSS3样式
|
|||
|
|
- **JavaScript**: 使用客户端JavaScript处理动态功能
|
|||
|
|
- **Vue.js**: 使用Vue.js进行数据绑定和组件化
|
|||
|
|
|
|||
|
|
## 具体转换内容
|
|||
|
|
|
|||
|
|
### CommunicationConfiguration.cshtml
|
|||
|
|
|
|||
|
|
#### 1. 文件头部转换
|
|||
|
|
**原始Razor语法:**
|
|||
|
|
```csharp
|
|||
|
|
@{
|
|||
|
|
ViewData["Title"] = "通信配置管理";
|
|||
|
|
Layout = "~/Views/Shared/_Layout.cshtml";
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**转换后HTML语法:**
|
|||
|
|
```html
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>通信配置管理</title>
|
|||
|
|
<link href="/css/plugins/chosen/chosen.min.css" rel="stylesheet">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 2. 部分视图转换
|
|||
|
|
**原始Razor语法:**
|
|||
|
|
```csharp
|
|||
|
|
@await Html.PartialAsync("~/Views/GeneralInformation/_TranSubstationTree.cshtml")
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**转换后HTML语法:**
|
|||
|
|
```html
|
|||
|
|
<!-- 变电站树形结构 -->
|
|||
|
|
<div id="tranSubstationTree" class="tree-container">
|
|||
|
|
<div class="tree-header">
|
|||
|
|
<h5><i class="fa fa-sitemap"></i> 变电站选择</h5>
|
|||
|
|
</div>
|
|||
|
|
<div class="tree-content">
|
|||
|
|
<!-- 树形结构将通过JavaScript动态加载 -->
|
|||
|
|
<div id="jstree" class="jstree-container"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 3. 样式和脚本转换
|
|||
|
|
**原始Razor语法:**
|
|||
|
|
```csharp
|
|||
|
|
@section styles{
|
|||
|
|
<link href="~/css/plugins/chosen/chosen.min.css" rel="stylesheet">
|
|||
|
|
<style>
|
|||
|
|
/* CSS内容 */
|
|||
|
|
</style>
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@section scripts{
|
|||
|
|
<script src="~/js/content.js?v=1.0.0"></script>
|
|||
|
|
<script src="~/view-resources/Views/System/CommunicationConfiguration.js"></script>
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**转换后HTML语法:**
|
|||
|
|
```html
|
|||
|
|
<style>
|
|||
|
|
/* CSS内容 */
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<!-- JavaScript 依赖 -->
|
|||
|
|
<script src="/js/content.js?v=1.0.0"></script>
|
|||
|
|
<script src="/view-resources/Views/System/CommunicationConfiguration.js"></script>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### RealTimeTest.cshtml
|
|||
|
|
|
|||
|
|
#### 1. URL生成转换
|
|||
|
|
**原始Razor语法:**
|
|||
|
|
```csharp
|
|||
|
|
<a href="@Url.Action("CommunicationConfiguration", "System")" class="btn btn-primary btn-xs">
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**转换后HTML语法:**
|
|||
|
|
```html
|
|||
|
|
<a href="/System/CommunicationConfiguration" class="btn btn-primary btn-xs">
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 2. 文件结构转换
|
|||
|
|
**原始Razor语法:**
|
|||
|
|
```csharp
|
|||
|
|
@{
|
|||
|
|
ViewData["Title"] = "实时通信测试";
|
|||
|
|
Layout = "~/Views/Shared/_Layout.cshtml";
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**转换后HTML语法:**
|
|||
|
|
```html
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>实时通信测试</title>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## JavaScript功能增强
|
|||
|
|
|
|||
|
|
### 1. 变电站树初始化
|
|||
|
|
由于移除了服务器端部分视图，需要通过JavaScript动态加载变电站树：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// 初始化变电站树（如果substationTree对象存在）
|
|||
|
|
if (typeof substationTree !== 'undefined') {
|
|||
|
|
substationTree.initTree(subTreeChanged);
|
|||
|
|
} else {
|
|||
|
|
// 如果substationTree不存在，使用简单的树结构
|
|||
|
|
communicationConfig.initSimpleTree();
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 简单树备用方案
|
|||
|
|
为了确保在没有复杂树组件时也能正常工作，添加了简单树实现：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
initSimpleTree: function () {
|
|||
|
|
var treeHtml = '<div class="simple-tree">' +
|
|||
|
|
'<div class="tree-node active" data-id="">' +
|
|||
|
|
'<i class="fa fa-home"></i> 全局配置' +
|
|||
|
|
'</div>' +
|
|||
|
|
'</div>';
|
|||
|
|
|
|||
|
|
$('#jstree').html(treeHtml);
|
|||
|
|
|
|||
|
|
// 绑定点击事件
|
|||
|
|
$('#jstree .tree-node').on('click', function () {
|
|||
|
|
// 处理节点选择逻辑
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 动态数据加载
|
|||
|
|
所有服务器端数据现在通过AJAX API调用获取：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// 配置预览
|
|||
|
|
refreshConfigPreview: function () {
|
|||
|
|
SOMS.ajax({
|
|||
|
|
url: AppServiceUrl.CommunicationConfiguration_GetEffectiveConfiguration,
|
|||
|
|
data: JSON.stringify({ transformerSubstationId: communicationConfig.currentTransformerSubstationId }),
|
|||
|
|
success: function (rst) {
|
|||
|
|
// 处理响应数据
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## CSS样式增强
|
|||
|
|
|
|||
|
|
### 1. 变电站树样式
|
|||
|
|
```css
|
|||
|
|
.tree-container {
|
|||
|
|
height: 100%;
|
|||
|
|
background: #fff;
|
|||
|
|
border-right: 1px solid #e7eaec;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tree-header {
|
|||
|
|
padding: 15px;
|
|||
|
|
border-bottom: 1px solid #e7eaec;
|
|||
|
|
background: #f8f9fa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.simple-tree .tree-node {
|
|||
|
|
padding: 8px 12px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tree-node.active {
|
|||
|
|
background-color: #1ab394;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 优势和好处
|
|||
|
|
|
|||
|
|
### 1. 编译兼容性
|
|||
|
|
- **无Razor依赖**: 文件不再依赖Razor引擎
|
|||
|
|
- **标准HTML**: 使用标准Web技术，兼容性更好
|
|||
|
|
- **构建简化**: 简化构建过程，减少编译错误
|
|||
|
|
|
|||
|
|
### 2. 开发效率
|
|||
|
|
- **前后端分离**: 前端逻辑完全独立
|
|||
|
|
- **调试便利**: 可以直接在浏览器中调试
|
|||
|
|
- **维护简单**: 代码结构更清晰
|
|||
|
|
|
|||
|
|
### 3. 性能优化
|
|||
|
|
- **客户端渲染**: 减少服务器渲染压力
|
|||
|
|
- **缓存友好**: 静态HTML文件更容易缓存
|
|||
|
|
- **异步加载**: 支持异步数据加载
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
### 1. API依赖
|
|||
|
|
- 所有动态数据需要通过API获取
|
|||
|
|
- 确保相关的API端点已正确实现
|
|||
|
|
- 处理API调用的错误情况
|
|||
|
|
|
|||
|
|
### 2. 状态管理
|
|||
|
|
- 使用JavaScript管理页面状态
|
|||
|
|
- 确保数据同步和一致性
|
|||
|
|
- 处理用户交互和状态变化
|
|||
|
|
|
|||
|
|
### 3. 安全考虑
|
|||
|
|
- 客户端验证不能替代服务器端验证
|
|||
|
|
- 敏感数据不应在客户端暴露
|
|||
|
|
- 确保API调用的安全性
|
|||
|
|
|
|||
|
|
## 测试建议
|
|||
|
|
|
|||
|
|
### 1. 功能测试
|
|||
|
|
- 测试所有页面功能是否正常
|
|||
|
|
- 验证数据加载和显示
|
|||
|
|
- 检查用户交互响应
|
|||
|
|
|
|||
|
|
### 2. 兼容性测试
|
|||
|
|
- 测试不同浏览器的兼容性
|
|||
|
|
- 验证移动端显示效果
|
|||
|
|
- 检查响应式布局
|
|||
|
|
|
|||
|
|
### 3. 性能测试
|
|||
|
|
- 测试页面加载速度
|
|||
|
|
- 验证AJAX请求性能
|
|||
|
|
- 检查内存使用情况
|
|||
|
|
|
|||
|
|
## 总结
|
|||
|
|
|
|||
|
|
成功将Razor语法转换为纯HTML语法，确保了项目的编译兼容性。通过使用现代前端技术（Vue.js、AJAX、CSS3），不仅保持了原有功能，还提升了用户体验和系统性能。转换后的代码更加标准化，便于维护和扩展。
|