EasyUI介绍和在mvc 中引入

来源：互联网发布：淘宝怎么搜假手表编辑：程序博客网时间：2024/06/06 01:55

Easyui概述：

easyui是一种基于jQuery的用户界面插件集合。easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。easyui是个完美支持HTML5网页的完整框架。easyui节省您网页开发的时间和规模。easyui很简单但功能强大的。

在jQuery 和 HTML5 上轻松使用EasyUI

jQuery EasyUI 提供易于使用的组件，它使 Web 开发人员能快速地在流行的 jQuery 核心和 HTML5 上建立程序页面。这些功能使您的应用适合今天的网络。有两个方法声明的 UI 组件:

1. 直接在 HTML 声明组件。

<div class="easyui-dialog" style="width:400px;height:200px"
    data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
        dialog content.
</div>

2. 编写 JavaScript 代码来创建组件。

<input id="cc" style="width:200px" />

$('#cc').combobox({
url: ...,
required: true,
valueField: 'id',
textField: 'text'
});

参考资料网站：http://www.jeasyui.net/

下面以介绍在mvc中使用easyui 的方法：（将插件下载过来）

1.新建一个MVC项目，这个就过了。

2.在项目中新建一个文件夹存放插件，如图：

3.接下来去模板中引用 , 如图：

代码：

<!DOCTYPE html>
<html>
    <head>
        <title>@ViewBag.Title</title>
        <link href="~/asset/easyui1.5/themes/default/easyui.css" rel="stylesheet" />
        <script src="~/asset/easyui1.5/jquery.min.js"></script>
        <script src="~/asset/easyui1.5/jquery.easyui.min.js"></script>
        <script src="~/asset/easyui1.5/locale/easyui-lang-zh_CN.js"></script>
        @RenderSection("script",false)
        <style>
            html,body{
                margin:0;
                padding:0;
            }
        </style>
    </head>
<body class="easyui-layout">
    @RenderBody()
</body>
</html>

4.测试

新建一个控制器，在控制器中新建一个视图（写一个登录表单）

4.1.新建控制器

   /// <summary>
        /// 用户登录视图
        /// </summary>
        /// <returns></returns>
        public ActionResult Login() {

            return View();
        }

视图代码：

@{
    ViewBag.Title = "登录视图";
     Layout = "~/Views/_Layout1.cshtml";   //引用模板
}
<span>用户名：</span><input class="esayui-textbox" type="text" name="uid"/>            @*easyui textbox 元素*@
<span>密码：</span><input class="esayui-textbox" type="password" name="uid" />
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">确定</a>        @* easyUI 连接按钮*@
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">取消</a>

运行测试：

0 0

EasyUI介绍和在mvc 中引入

在jQuery 和 HTML5 上轻松使用EasyUI

jQuery EasyUI 提供易于使用的组件，它使 Web 开发人员能快速地在流行的 jQuery 核心和 HTML5 上建立程序页面。 这些功能使您的应用适合今天的网络。 有两个方法声明的 UI 组件:

jQuery EasyUI 提供易于使用的组件，它使 Web 开发人员能快速地在流行的 jQuery 核心和 HTML5 上建立程序页面。这些功能使您的应用适合今天的网络。有两个方法声明的 UI 组件: