Asp.net web MVC5 + IVIEW + Vue.js + Require.js框架搭建
Mvc是近年比较流行的一种web开发模式 个人觉得MVC是一种简单易懂、高效的开发模式;关于开发模式还有MVVM, vue.js就是这种模式，这里就不讲什么是MVC、 MVVM了， 有兴趣可以百度了解一下。主要用到的技术:Asp.net MVC 5IView + Vue.js（这两者是完美搭档， IView：基于Vue.js的UI）require.js （按需加载js模块， 详解...
·
Mvc是近年比较流行的一种web开发模式 个人觉得MVC是一种简单易懂、高效的开发模式;关于开发模式还有MVVM, vue.js就是这种模式，这里就不讲什么是MVC、 MVVM了， 有兴趣可以百度了解一下。
主要用到的技术:
Asp.net MVC 5
IView + Vue.js（这两者是完美搭档， IView：基于Vue.js的UI）
require.js （按需加载js模块， 详解更多JS模块化工具requirejs教程，或进入require.js官网）
sql server 2017
Visual Studio 2017
下面我们将以一个(SecurityDemo)通用权限系统demo为例:
目录
1. 新建项目
点确定 -->
2. 添加RequireJs , IView + Vue.js到项目
菜单选择工具 --》 NuGet包管理器 --》 管理解决方案Nuget程序包：
a.安装requirejs:（也要安装require.css程序包，因为IView.css将作为IView的依赖引入）
找到Requirejs的程序包， 右边列表项目里勾选指定的项目，点击“安装“按钮
安装成功后，会看到多了下面几个文件
b.安装IView + Vue.js
这里版本并不是最新的， 安装成功后， 可以去官网拿最新的替换现在的，我们这里也是这样。（IView官网）
安装成功后， 多了下面这些文件：
这些文件我们也是要替换的，资源URL, 找到我们要替换的文件，下载后替换掉 ，官网好像不能打包下载，我们可以用迅雷批量下载：
右键菜单点击迅雷下载全部链接，取消下载html类型的文件
vue.js官网最新下载vue.js, vue.min.js
第2章 第一个实例
文件结构：
主要文件：
//index.cshtml
@{
ViewBag.Title = "Index";
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<link href="~/Content/Iview/iviewplus.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/scripts/require.js" data-main="/Scripts/Base/main"></script>
</head>
<body>
<div id="app" v-cloak>
<i-table stripe :columns="columns1" :data="data1"></i-table>
<i-button @@click="show">Click me!</i-button>
<Modal v-model="visible" title="Welcome">Welcome to iView</Modal>
<span>{{visible}}</span>
<i-input v-model="myname" placeholder="Enter something..." style="width: 300px"></i-input>
<i-button :size="buttonSize" type="primary" @@click="clicked">
Forward
<Icon type="ios-arrow-forward" />
</i-button>
</div>
<script>
$(document).ready(function () {
require(["../../Scripts/App/VueDemo/Home/index"]);
});
</script>
</body>
</html>//main.js
//配置模块
require.config({
waitSeconds: 15,
baseUrl: './',
paths: {
'jquery': '/Scripts/jquery-1.10.2.min.js',
'jqueryvalidate': '/Scripts/jquery.validate.min',
'modernizr': '/Scripts/modernizr-2.6.2',
'respond': '/Scripts/respond',
'iview': '/Scripts/IView/iview.min',
'vue': '/Scripts/vue.min',
'BaseApp': '/Scripts/Base/BaseApp',
'VueResource': '/Scripts/vue-resource.min',
'less': '/Scripts/less-1.5.1.min'
},
shim: {
'jqueryforval': {
exports: 'jquery'
},
'jqueryvalidate': {
exports: '$',
deps: ['/Scripts/jquery-1.10.2', '/Scripts/jquery.validate.unobtrusive']
},
'vue':{
exports: 'Vue'
},
'iview': {
exports: 'iview',
deps: ['css!/Content/Iview/iview.css','css!/Content/Iview/iviewplus.css', 'vue']
},
VueResource: {
exports: 'VueResource',
deps: ['vue']
}
},
map: {
'*': {
css: '/scripts/css.min.js'
}
}
加上时间戳
//,urlArgs: "bust=" + (new Date()).getTime()
});
// 注册事件
require(['vue', 'iview'], function (Vue, iview) {
Vue.use(iview);
});
//BaseApp.js
define(['vue', 'less', 'iview'], function (Vue, less, iview) {
// 使用严格模式
'use strict';
var BaseApp = function () {
return {
Config: {},
Instance: {},
Run: function (appId) {
var self = this;
if (appId) {
self.Config.el = appId;
}
$(document).ready(function () {
Vue.use(iview);// 注册IView
self.Instance = new Vue(self.Config);
});
},
IsEmptyStr: function (str) {
if (!str) { str = ""; }
if (str.length <= 0) { return true; } else { return false; }
},
isEmpty: function (o) {
if (typeof (o) == "undefined") { return true; }
if (!o) { return true; }
if (typeof (o) == "object") {
for (var n in o) { return false; }
return true;
}
if (o instanceof Array) {
if (!o.length) { return true; }
}
return false;
}
}
}();
return BaseApp;
}
);//index.js
define(['BaseApp'], function (BaseApp) {
// 使用严格模式
'use strict';
$(function () {
BaseApp.Config = {
el: '#app',
data: {
visible: false,
buttonSize: 'large',
myname:'LoveLearning',
columns1: [
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
}
],
data1: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
]
},
methods: {
show: function () {
this.visible = !this.visible;
},
clicked: function () {
alert("Clicked!");
}
}
};
return BaseApp.Run();
});
});
运行后的效果如下：
这里我们已经初步完成了一个简单的IView的Demo，下一章将会将如何封装到.Net htmlhelper中。
第3章: HtmlHelper类封装UI
先说一下上次的问题，main.js引入iview会有异常，requirejs异步加载文件，执行baseapp的时候，iview可能还没引入，会出错，
所以应该搬到baseapp.js里引入。
main.js之前已经引入了iview和vue对象了, 所以只需main.js里注释这段：
// 注册事件
require(['vue', 'iview'], function (Vue, iview) {
Vue.use(iview);
});1. HtmlHelper封装
为什么要封装：主要目的还是为了高效编写代码，可以增加拓展属性或方法，使用更友好，特别对于后端开发人员来说，用代码实现更好理解。
现在，让我们正是开始实践吧
首先，在你的解决方案里，
解决方案里是之前已经写好的，所以我就不再新建了。
首先我们创建基类及其接口：
IBase.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web;
using System.Web.Mvc;
namespace MvcIViewUI.BaseUI
{
public interface IBase<T> : IHtmlString
{
string GetHtml();
T Id(string id);
T SetRef(string _ref);
T AddInnerUI<TInnerUI>(TInnerUI control) where TInnerUI : IBase<TInnerUI>;
// T SetUIName(string uiName);
}
}
Base.cs
using MvcIViewUI.UI;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web;
using System.Web.Mvc;
namespace MvcIViewUI.BaseUI
{
public abstract class Base<T> : IBase<T>
{
protected T self;
protected string UIName;
protected string innerContent = "";
protected List<string> bindModelProps = new List<string>();
protected List<SlotElement> slots = new List<SlotElement>(); //分发到此控件的内容
protected string htmlAttribute = "";
protected Dictionary<string, object> DefValueList = new Dictionary<string, object>();
protected string style = "";
protected string slot = ""; //如果是嵌入的内容， 注意要设置
protected string text = "";
public bool isNoEndEle = false;//是否是原生无结束标志的元素
public bool isProp = false;
public string id { get; protected set; }
/// <summary>
/// 起到定位的作用， 相当于id，注意不能重复
/// </summary>
public string Ref { get; protected set; }
public string v_model { get; protected set; }
public string v_if { get; protected set; }
/// <summary>
/// 标签文本
/// </summary>
public virtual string label { get; protected set; }
public virtual string v_for { get; protected set; }
public virtual string key { get;protected set; }
/// <summary>
/// 控件css类
/// </summary>
public string cls { get; protected set; }
public Base() {
if (string.IsNullOrEmpty(UIName)) {
UIName = "base";
}
self = (T)Convert.ChangeType(this, typeof(T));
this.innerContent = "";
}
/// <summary>
/// 构造此对象
/// </summary>
/// <param name="slot">分发类型</param>
public Base(string slot)
{
this.slot = slot;
if (string.IsNullOrEmpty(UIName))
{
UIName = "base";
}
self = (T)Convert.ChangeType(this, typeof(T));
this.innerContent = "";
}
/// <summary>
/// 生成html内容
/// </summary>
public virtual string GetHtml()
{
string ls_html = "", ls_propsEvnts = "";
#region 外层部分
//非属性
if (!isProp)
{
ls_html = "<" + UIName;
}
if (!string.IsNullOrEmpty(id))
{
ls_html += " id=\"" + this.id + "\"";
}
if (!string.IsNullOrEmpty(this.cls)) {
if (this.cls.StartsWith(":")) {
ls_html += " :class=\"" + this.cls.Substring(1, this.cls.Length-1) + "\"";
}
else {
ls_html += " class=\"" + this.cls + "\"";
}
}
if (!string.IsNullOrEmpty(this.Ref))
{
ls_html += " ref=\"" + this.Ref + "\"";
}
if (!string.IsNullOrEmpty(this.slot))
{
ls_html += " slot=\"" + this.slot + "\"";
}
if (!string.IsNullOrEmpty(this.htmlAttribute))
{
ls_html += " " + this.htmlAttribute.Trim();
}
//:style="{
if (!string.IsNullOrEmpty(this.style))
{
ls_html += " :style=\"{" + this.style.Trim() + "}\"";
}
ls_propsEvnts = GenPropsEvent();
if (!string.IsNullOrEmpty(ls_propsEvnts))
{
ls_html += " " + ls_propsEvnts;
}
//作为容器使用
if (isProp) {
return ls_html;
}
if (isNoEndEle) {
ls_html = ls_html + "/>";
}
else {
ls_html = ls_html + ">";
if (!string.IsNullOrEmpty(this.text))
{
ls_html += text;
}
}
#endregion
#region The end
if (!isNoEndEle)
{
if (UIName == "Upload" && string.IsNullOrEmpty(this.innerContent)) {
if (!string.IsNullOrEmpty(this.text)) {
this.innerContent = "<i-button icon=\"ios-cloud-upload-outline\">" + this.text + "</i-button>";
}
else {
this.innerContent = "<i-button icon=\"ios-cloud-upload-outline\">Upload files</i-button>";
}
}
if (!string.IsNullOrEmpty(this.innerContent))
{
ls_html += this.innerContent;
}
return ls_html + "</" + UIName + ">";
}
else {
return ls_html;
}
#endregion
}
public T Id(string id)
{
this.id = id;return self;
}
public T SetRef(string _ref)
{
this.Ref = _ref; return self;
}
/// <summary>
/// 设置分发类型
/// </summary>
/// <param name="type">分发类型</param>
public virtual T Slot(string slot) {
this.slot = slot;
return self;
}
/// <summary>
/// 即设置v-if属性
/// </summary>
public T If(string v_if, bool isBindModel = false) {
if (isBindModel) { bindModelProps.Add("v_if"); }
this.v_if = v_if;
return self;
}
/// <summary>
/// 设置控件css样式类
/// </summary>
public T Cls(string cls) {
this.cls = cls;
return self;
}
/// <summary>
/// 设置控件html属性，可以多个
/// </summary>
public T HtmlAttribute(string htmlAttribute) {
this.htmlAttribute = htmlAttribute;
return self;
}
public string ToHtmlString()
{
return GetHtml();
}
/// <summary>
/// 嵌入新的控件到此控件里
/// </summary>
/// <param name="control">将要嵌入的控件</param>
public T AddInnerUI<TInnerUI>(TInnerUI control) where TInnerUI : IBase<TInnerUI>
{
if (";area;base;br;col;command;embed;img;hr;keygen;link;meta;param;source;track;input;wbr;".IndexOf(";" + UIName.ToLower() + ";") < 0 && control!= null)
{
this.innerContent += control.GetHtml();
}
return self;
}
/// <summary>
/// 设置嵌入的内容(html/text)
/// </summary>
public T AddContent(string content) {
if (string.IsNullOrEmpty(this.innerContent)) { this.innerContent = ""; }
this.innerContent += content;
return self;
}
/// <summary>
/// 设置html属性， 可以多个，例子: 'value="value1" format="yyyy年MM月dd日" type="date"'
/// </summary>
/// <param name="htmlAttribute"></param>
/// <returns></returns>
public T HtmlAttr(string htmlAttribute)
{
this.htmlAttribute = htmlAttribute;
return self;
}
public T BackColor(string color)
{
AddStyleItem("background", color);
return self;
}
/// <summary>
/// 设置宽度
/// </summary>
public T Width(int width)
{
AddStyleItem("width", width.ToString() + "px");
return self;
}
/// <summary>
/// 设置宽度
/// </summary>
public T Width(string width)
{
AddStyleItem("width", width);
return self;
}
/// <summary>
/// 设置高度
/// </summary>
public T Height(string height)
{
AddStyleItem("height", height);
return self;
}
public T Height(int height)
{
AddStyleItem("height", height.ToString() + "px");
return self;
}
public T Left(string left)
{
AddStyleItem("left", left);
return self;
}
public T Left(int left)
{
AddStyleItem("left", left.ToString() + "px");
return self;
}
public T Right(string right)
{
AddStyleItem("right", right);
return self;
}
public T Right(int right)
{
AddStyleItem("right", right.ToString()+"px");
return self;
}
public T Style(string styles)
{
if (string.IsNullOrEmpty(styles)) { return self; }
if (styles.StartsWith(",")) { this.style = this.style + styles; }
else
{
if (!string.IsNullOrEmpty(this.style))
{
this.style = this.style + "," + styles;
}
else
{
this.style = styles;
}
}
return self;
}
/// <summary>
/// 使用 v-model 双向绑定数据
/// </summary>
public T Model(string vModel) {
this.v_model = vModel;return self;
}
#region 受保护的方法
protected virtual void InitDefValue() {
}
protected virtual string GenPropsEvent()
{
string ls_return = "", ls_prefix = "";
var types = self.GetType();
var props = types.GetProperties(); //当前类的所有属性
InitDefValue();
foreach (var p in props)
{
var sList = p.CustomAttributes.ToList();
var propName = p.Name;
var propValue = p.GetValue(self); //p.GetValue(this);
var propType = p.PropertyType.FullName;
var orgPropName = propName;
if (string.IsNullOrEmpty(propName)) { continue; }
if (propName.Substring(0, 1) == "_") { propName = propName.Substring(1, propName.Length - 1).Trim(); }
propName = propName.Replace("_", "-").ToLower();
bool isEvent = false;
foreach (var cstAttr in sList)
{
//Event
if (cstAttr.AttributeType.FullName == "MvcIViewUI.BaseUI.EventAttribute")
{
isEvent = true;
break;
}
}
if (!isEvent)
{ //Prop
ls_prefix = "";
if (bindModelProps.FindIndex(m => m == orgPropName) > -1) { ls_prefix = ":"; }
if (propType == "System.String") {
propValue = propValue == null ? "" : ((string)propValue).Trim();
if (!string.IsNullOrEmpty((string)propValue)) {
if (((string)propValue).StartsWith(":")) {
ls_prefix = ":";
propValue = ((string)propValue).Substring(1, ((string)propValue).Length - 1).Trim();
}
}
}
if (!string.IsNullOrEmpty(ls_prefix))//绑定了模型
{
ls_return += " " + ls_prefix + propName + "=\"" + (string)propValue + "\"";
}
else if (propType == "System.Boolean")
{
if (DefValueList.ContainsKey(orgPropName))
{
if ((bool)DefValueList[orgPropName] == (bool)propValue)
{
continue;
}
}
if ((bool)propValue)
{
ls_return += " " + propName;
}
else
{
ls_return += " " + ls_prefix + propName + "=\"false\"";
}
}
else if (propType == "System.DateTime")
{
if (DefValueList.ContainsKey(orgPropName))
{
if (Convert.ToDateTime(DefValueList[orgPropName]) == Convert.ToDateTime(propValue))
{
continue;
}
}
if (Convert.ToDateTime(propValue) != null)
{
ls_return += " :" + propName + "=\"new Date('" + Convert.ToDateTime(propValue).ToString("yyyy-MM-dd hh:mm:ss") + "')\"";
}
}
else if (propType == "System.Int32")
{
if (DefValueList.ContainsKey(orgPropName))
{
if ((int)DefValueList[orgPropName] == (int)propValue)
{
continue;
}
}
if ((int)propValue > 0)
{
ls_return += " " + ls_prefix + propName + "=\"" + propValue.ToString() + "\"";
}
}
else if (propType == "System.String")
{
if (DefValueList.ContainsKey(orgPropName))
{
if ((string)DefValueList[orgPropName] == (string)propValue)
{
continue;
}
}
if (!string.IsNullOrEmpty((string)propValue))
{
ls_return += " " + ls_prefix + propName + "=\"" + (string)propValue + "\"";
}
}
else
{
if (DefValueList.ContainsKey(orgPropName))
{
if (DefValueList[orgPropName] == propValue)
{
continue;
}
}
if (propValue != null)
{
ls_return += " " + ls_prefix + propName + "=\"" + (string)propValue + "\"";
}
}
}
else
{
if (!string.IsNullOrEmpty((string)propValue))
{
ls_return += " @" + propName + "=\"" + (string)propValue + "\"";
}
}
}
return ls_return;
}
protected void AddStyleItem(string styleItem, string value)
{
if (string.IsNullOrEmpty(styleItem) || string.IsNullOrEmpty(value)) { return; }
if (!string.IsNullOrEmpty(this.style))
{
this.style += ", " + styleItem + ": '" + value + "'";
}
else
{
this.style = styleItem + ": '" + value + "'";
}
}
protected T SetUIName(string uiName)
{
this.UIName = uiName;
return self;
}
#endregion
}
}
2.创建第一个Asp.net Mvc UI, 以Button为例：
先在项目中新建"UI"文件夹， 这里要用来存放我们要封装的UI，然后创建
Button.cs
using MvcIViewUI.BaseUI;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web;
namespace MvcIViewUI.UI
{
public class Button : Base<Button>
{
public Button() {
UIName = "i-button";
}
public Button(string text,string icon = "", string slot = "")
{
UIName = "i-button";
this.text = text;
this.icon = icon;
this.slot = slot;
}
protected override void InitDefValue()
{
DefValueList = new Dictionary<string, object>();
DefValueList.Add("type", "default");
DefValueList.Add("ghost", "false");
DefValueList.Add("size", "default");
DefValueList.Add("Long", "false");
DefValueList.Add("html_type", "button");
DefValueList.Add("disabled", "false");
DefValueList.Add("loading", "false");
DefValueList.Add("replace", "false");
DefValueList.Add("target", "_self");
}
#region Button props
/// <summary>
/// 按钮类型，可选值为 default、primary、dashed、text、info、success、warning、error或者不设置; 默认:default
/// </summary>
public string type { get;protected set; }
/// <summary>
/// 幽灵属性，使按钮背景透明 默认:false
/// </summary>
public string ghost { get; protected set; }
/// <summary>
/// 按钮大小，可选值为large、small、default或者不设置; 默认: default
/// </summary>
public string size { get; protected set; }
/// <summary>
/// 按钮形状，可选值为circle或者不设置 默认:不设置
/// </summary>
public string shape{ get; protected set; }
/// <summary>
/// 开启后，按钮的长度为 100% 默认:false
/// </summary>
public string Long{ get; protected set; }
/// <summary>
/// 设置button原生的type，可选值为button、submit、reset 默认: button
/// </summary>
public string html_type{ get; protected set; }
/// <summary>
/// 设置按钮为禁用状态 默认:false
/// </summary>
public string disabled { get; protected set; }
/// <summary>
/// 设置按钮为加载中状态 默认:false
/// </summary>
public string loading { get; protected set; }
/// <summary>
/// 设置按钮的图标类型 默认:不设置
/// </summary>
public string icon{ get; protected set; }
/// <summary>
/// 设置按钮的自定义图标 默认:不设置
/// </summary>
public string custom_icon{ get; protected set; }
/// <summary>
/// 跳转的链接，支持 vue-router 对象, 类型: String | Object；默认:不设置
/// </summary>
public string to{ get; protected set; }
/// <summary>
/// 路由跳转时，开启 replace 将不会向 history 添加新记录; 默认: false
/// </summary>
public string replace { get; protected set; }
/// <summary>
/// 相当于 a 链接的 target 属性; 默认: _self
/// </summary>
public string target{ get; protected set; }
/// <summary>
/// 点击事件绑定的方法
/// </summary>
[Event]
public string click { get; protected set; }
#endregion
#region API方法
/// <summary>
/// 设置按钮类型，可选值为 default、primary、dashed、text、info、success、warning、error或者不设置， 默认值:default
/// </summary>
/// <returns>返回当前控件自身</returns>
public Button Type(string type, bool isBindModel = false) {
this.type = type;
if (isBindModel) {
bindModelProps.Add("type");
}
return self;
}
/// <summary>
/// 设置显示的文本
/// </summary>
/// <returns></returns>
public Button SetText(string text) {
this.text = text;
return self;
}
/// <summary>
/// true: 使用幽灵属性，即使按钮背景透明，类型:bool/string 默认值: false
/// </summary>
/// <returns>返回当前控件自身</returns>
public Button IsGhost(string isYes, bool isBindModel = false)
{
this.ghost = isYes;
if (isBindModel)
{
bindModelProps.Add("ghost");
}
return self;
}
/// <summary>
/// 设置按钮大小，可选值为large、small、default或者不设置, 默认值: default
/// </summary>
/// <returns>返回当前控件自身</returns>
public Button Size(string size, bool isBindModel = false) {
this.size = size;
if (isBindModel)
{
bindModelProps.Add("size");
}
return self;
}
/// <summary>
/// 设置按钮形状，可选值为circle或者不设置, 默认值:不设置
/// </summary>
/// <returns>返回当前控件自身</returns>
public Button Shape(string shape, bool isBindModel = false)
{
this.shape = shape;
if (isBindModel)
{
bindModelProps.Add("shape");
}
return self;
}
/// <summary>
/// true: 开启后，按钮的长度为 100%, 类型:bool/string 默认值:false
/// </summary>
/// <returns>返回当前控件自身</returns>
public Button IsLong(string isLong, bool isBindModel = false) {
this.Long = isLong;
if (isBindModel)
{
bindModelProps.Add("Long");
}
return self;
}
/// <summary>
/// 设置按钮的长度为 100%
/// </summary>
/// <returns>返回当前控件自身</returns>
public Button IsLong()
{
this.Long = "true";
return self;
}
// <summary>
/// 设置button原生的type，可选值为button、submit、reset,默认值: button
/// </summary>
/// <returns>返回当前控件自身</returns>
public Button HtmlType(string htmlType, bool isBindModel = false) {
this.html_type = htmlType;
if (isBindModel)
{
bindModelProps.Add("html_type");
}
return self;
}
// <summary>
/// true: 设置按钮为禁用状态, 类型:bool/string 默认值: false
/// </summary>
/// <returns>返回当前控件自身</returns>
public Button IsDisabled(string Disabled, bool isBindModel = false) {
this.disabled = Disabled;
if (isBindModel)
{
bindModelProps.Add("disabled");
}
return self;
}
// <summary>
/// true: 设置按钮为加载中状态, 类型:bool/string 默认值: false
/// </summary>
/// <returns>返回当前控件自身</returns>
public Button Loading(string Loading, bool isBindModel = false) {
if (isBindModel)
{
bindModelProps.Add("loading");
}
this.loading = Loading;return self;
}
// <summary>
/// 设置按钮的图标类型, 默认: 不设置
/// </summary>
/// <returns>返回当前控件自身</returns>
public Button Icon(string icon, bool isBindModel = false) {
if (isBindModel)
{
bindModelProps.Add("icon");
}
this.icon = icon;return self;
}
// <summary>
/// 设置按钮的自定义图标, 默认: 不设置
/// </summary>
/// <returns>返回当前控件自身</returns>
public Button CustomIcon(string custIcon, bool isBindModel = false) {
if (isBindModel)
{
bindModelProps.Add("custom_icon");
}
this.custom_icon = custIcon;return self;
}
/// <summary>
/// 设置跳转的链接，支持 vue-router 对象, 类型: String | Object, 默认:不设置
/// </summary>
/// <returns>返回当前控件自身</returns>
public Button Link(string toLink, bool isBindModel = false) {
if (isBindModel)
{
bindModelProps.Add("to");
}
this.to = toLink;return self;
}
/// <summary>
/// true: 路由跳转时，开启 replace 将不会向 history 添加新记录,类型:bool/string 默认:false
/// </summary>
/// <returns>返回当前控件自身</returns>
public Button IsReplace(string Replace, bool isBindModel = false) {
if (isBindModel){bindModelProps.Add("replace");}
this.replace = Replace;return self;
}
/// <summary>
/// 设置链接目标，相当于 a 链接的 target 属性 默认: _self
/// </summary>
/// <returns>返回当前控件自身</returns>
public Button Target(string target, bool isBindModel = false) {
if (isBindModel)
{
bindModelProps.Add("target");
}
this.target = target;return self;
}
/// <summary>
/// 绑定按钮单击事件
/// </summary>
/// <param name="funName"></param>
/// <returns></returns>
public Button OnClicked(string funName) {
this.click = funName;
return self;
}
#endregion
}
}
3.创建UI存储库类MvcIViewUIRsp，所有的UI都通过仓库输出，可以加个接口约束：
using MvcIViewUI.BaseUI;
using MvcIViewUI.UI;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web.Mvc;
namespace MvcIViewUI.UIRsp
{
public interface IMvcIViewUIRsp
{
MvcHtmlString BaseAppUrl(string url);
T ParseUI<T>(T uiControl) where T : IBase<T>;
Button UIButton();
}
}
MvcIViewUIRsp.cs
using MvcIViewUI.BaseUI;
using MvcIViewUI.Chart;
using MvcIViewUI.ContainerUI;
using MvcIViewUI.ExtendUI;
using MvcIViewUI.NavUI;
using MvcIViewUI.UI;
using MvcIViewUI.ViewUI;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web.Mvc;
namespace MvcIViewUI.UIRsp
{
public class MvcIViewUIRsp : IMvcIViewUIRsp
{
/// <summary>
/// 加载应用程序核心js文件
/// </summary>
/// <param name="url">js文件路径</param>
public MvcHtmlString BaseAppUrl(string url)
{
string sScript = "";
if (string.IsNullOrEmpty(url)) { url = ""; }
sScript = "<script>" +
"$(document).ready(function() {" +
"require(['" + url + "']);" +
"});" +
"</script>";
return new MvcHtmlString(sScript);
}
/// <summary>
/// 手动解析UI
/// </summary>
/// <returns></returns>
public T ParseUI<T>(T uiControl) where T : IBase<T>
{
return uiControl;
}
public Button UIButton() {
return new Button();
}
public Button UIButton(string text, string icon = "", string slot = "")
{
return new Button(text, icon, slot);
}
}
}
4.将UI库挂载到HtmlHelper静态类中
在项目中创建静态类：UIHelper,
using MvcIViewUI.UIRsp;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web.Mvc;
namespace MvcIViewUI
{
public static class UIHelper
{
public static MvcIViewUIRsp IView(this HtmlHelper helper)
{
return new MvcIViewUIRsp();
}
}
}
5.编写cshtml页面
@using MvcIViewUI
@{
ViewBag.Title = "firstapp";
}
<div id="firstapp">
<template>
@Html.IView().UIButton("登录", "md-arrow-forward").Type("primary").Style("width:'100%'").OnClicked("ue_test")
</template>
</div>
@Html.IView().BaseAppUrl("../../Scripts/App/Home/firstapp")
Scripts/App/Home/firstapp.js
define(['BaseApp'], function (BaseApp) {
// 使用严格模式
'use strict';
$(function () {
BaseApp.Config = {
el: '#testapp',
data: {
},
methods: {
ue_test: function () {
alert("Tested!");
}
}
};
return BaseApp.Run();
});
});
运行后，就可以看到效果了。
前往低代码交流专区
更多推荐
6
0- 0
已为社区贡献1条内容
所有评论(0)