ExtJs六(ExtJs Mvc首页展示)

原文 http://www.cnblogs.com/aehyok/archive/2013/04/22/3035302.html

要区分登录前和登录后,判断Request的IsAuthenticated方法就可以。因为要通过服务器段代码执行不同的脚本,因而要将Loder这些公共代码抽出来独立在一个Script块里,而不同的脚本在不同的代码里,最终代码如下:

 

        <script type="text/javascript">
            Ext.Loader.setConfig({
                enabled: true,
                paths: {
                    'Ext.ux': 'scripts/extjs/ux',
                    'ExtMVCOne': 'scripts/app'
                }
            });
            Ext.ns('ExtMVCOne');
//            Ext.require('Ext.ux.Login');
//            Ext.onReady(function () {
//                if (Ext.BLANK_IMAGE_URL.substr(0, 4) != "data") {
//                    Ext.BLANK_IMAGE_URL = "Content/Images/s.gif";
//                }
//            Ext.ux.Login.show();
//            })
</script>

 

将原来下面登录的先注释掉。因为要调用应用程序生成界面,因而要让Ext JS知道应用的目录,所以在Loader的paths中加入以下代码: 'ExtMVCOne': 'scripts/app'

认证后,需要将用户信息写如一个对象,以便控制应用程序的权限,因而加入以下代码:

            var roles = Roles.GetRolesForUser(User.Identity.Name);
            var rolesstring = "";
            foreach (var c in roles)
            {
                rolesstring += string.Format("'{0}',", c);
            }
            rolesstring = rolesstring.Substring(0, rolesstring.Length - 1);
            <script type="text/javascript">
                ExtMVCOne.Userinfo = {
                    Roles:[
                        @Html.Raw(rolesstring)
                    ]
                };

            </script>

这里只是简单的把用户角色写入Userinfo对象中。如果需要其它用户信息,可以根据具体情况构造这个对象,只要便于访问就行了。

这里有个问题,就是全部对象SimpleCMS在这里可能为null,因而需要调用Ext的ns方法命名一下,这个可加在Loader下,代码如下:

 

Ext.ns('ExtMVCOne');
然后运行登录 通过火狐Firenbug来查看,我用admin登录的他是系统管理员。

 

最后是Index视图全部代码

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>Index</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="@Url.Content("Scripts/ExtJs/resources/css/ext-all.css")" />
    <script type="text/javascript" src="@Url.Content("Scripts/ExtJs/bootstrap.js")"></script>
    <script type="text/javascript" src="@Url.Content("Scripts/ExtJs/Ext-lang-zh_CN.js")"></script>
</head>
<body>
        <script type="text/javascript">
            Ext.Loader.setConfig({
                enabled: true,
                paths: {
                    'Ext.ux': 'scripts/extjs/ux',
                    'ExtMVCOne': 'scripts/app'
                }
            });
            Ext.ns('ExtMVCOne');
//            Ext.require('Ext.ux.Login');
//            Ext.onReady(function () {
//                if (Ext.BLANK_IMAGE_URL.substr(0, 4) != "data") {
//                    Ext.BLANK_IMAGE_URL = "Content/Images/s.gif";
//                }
//            Ext.ux.Login.show();
//            })
</script>

    @{
        if(Request.IsAuthenticated)
        {
            var roles = Roles.GetRolesForUser(User.Identity.Name);
            var rolesstring = "";
            foreach (var c in roles)
            {
                rolesstring += string.Format("'{0}',", c);
            }
            rolesstring = rolesstring.Substring(0, rolesstring.Length - 1);
            <script type="text/javascript">
                ExtMVCOne.Userinfo = {
                    Roles:[
                        @Html.Raw(rolesstring)
                    ]
                };

            </script>
        }
        else
        {
            <script>
                Ext.require('Ext.ux.Login');

                Ext.onReady(function () {
                    if (Ext.BLANK_IMAGE_URL.substr(0, 4) != "data") {
                        Ext.BLANK_IMAGE_URL = "Content/Images/s.gif";
                    }

                    Ext.ux.Login.show();
                })
            </script>
        }
    }
</body>
</html>
时间: 2024-10-27 13:49:25

ExtJs六(ExtJs Mvc首页展示)的相关文章

BLOG首页展示的几种方式

Blog的首页是一个重要的入口,所以如何能够做好入口的整理和展示非常重要. 大约在多年以前,按照日志的时间格式进行排列的类似于编年史样的风格非常流行,但是最近,摘要形式的首页展示开始变得流行起来,还有一些其他的展现形式,我们的Blogger们利用自己的聪明才智,充分的发挥了BLOG在互联网中的作用. 今天,就来介绍几种BLOG首页的展现形式. 首先,我们应该都了解首页是非常重要的,任何一个新的访客都希望从首页上获得足够多的信息,并且从易用性和导航的角度来考虑,首页也是一个站点中浏览次数最多的页面

ExtJs四(ExtJs MVC登录窗口的调试)

原文 http://www.cnblogs.com/aehyok/archive/2013/04/20/3033296.html 前言 继上一节中实现了验证码http://www.cnblogs.com/aehyok/archive/2013/04/19/3030212.html,现在我们可以进行对登录界面进行整合调试了. 正题 打开系统的首页页面文件,Views\Home目录下的Index.cshtml文件.要动态加载登录窗口,需要先设置好加载路径,因而在onReady函数前面加入以下代码:

ExtJs七(ExtJs Mvc创建ViewPort)

原文 http://www.cnblogs.com/aehyok/archive/2013/04/22/3036084.html 前言 在4.1的时候,要先创建一个扩展于Ext.app.Application的类,然后用create创建它的实例来开始应用程序的.而在 4.1.1,则可直接调用application方法开始执行应用程序,简化了.调用application方法,其参数是一个配置对象,主要配置项有以 下三个: name:用来定义应用程序的名称,在这里是ExtMVCOne. appFol

ExtJs十一(ExtJs Mvc图片管理之一)

原文 http://www.cnblogs.com/aehyok/archive/2013/04/27/3048278.html 前言 图片管理要在两个地方使用:一是标签页内的图片管理,一是文章内容编辑时嵌套到插入图片的窗口内.因而,将图片管理做成一个扩展比较方便.当然,做成MVC模式也行,不争论,不讨论. 要记住,扩展要写在Scripts\ExtJS\Ux目录下,因为在路径的设置中,扩展目录是指向这里的.在该目录下创建一个名为PicManager.js的脚本文件. 片管理的主要界面分两部分,左

ExtJs八(ExtJs Mvc创建ViewPort续)

原文 http://www.cnblogs.com/aehyok/archive/2013/04/23/3037588.html 前言 现在要考虑的是如何加载标签页内的内容.虽然标签页默认是延迟渲染的(deferredRender值默认为true),但是它会预加载所有的类, 因而当类文件很多的时候,加载时间就是一大问题了.这个,也可通过SDK打包的方式解决,不过在设计阶段还是要考虑的.另一种好的解决方法是,只使用标签 页的标签,而不使用其主体加载内容,另外使用一个容器,内部使用CardLayou

ExtJs九(ExtJs Mvc用户管理之一)

原文 http://www.cnblogs.com/aehyok/archive/2013/04/25/3043757.html 首先要做的是为用户信息创建一个模型,在Scripts\app\model目录下创建一个名为User.js的文件,然后添加以下模型定义代码: Ext.define('ExtMVCOne.model.User', { extend: 'Ext.data.Model', fields: [ "id", { name: "Username", d

ExtJs十(ExtJs Mvc用户管理之二)

原文 http://www.cnblogs.com/aehyok/archive/2013/04/26/3044152.html 前言 为了防止意外情况,这里添加了try模块,在错误的时候会将错误信息作为Msg关键字的值返回. 而 在客户端脚本,目前是没有处理错误信息的代码的,因而在这里返回的错误信息,客户端是看不到.如果要处理这样的错误信息,就要在Store的Proxy中 监听exception事件.因为exception事件的回调函数是一致的,因而可以统一到一个函数中处理,就不用复制再复制了

ExtJs十一(ExtJs Mvc图片管理之二)

原文 http://www.cnblogs.com/aehyok/archive/2013/04/28/3050165.html 接着图片管理一http://www.cnblogs.com/aehyok/archive/2013/04/27/3048278.html. 先来完成树目录的显示.开始前,现在解决方案中创建一个Upload目录用来存放上传的图片,为了便于测试,在Upload目录下随便添加两个目录,这里添加1和2. 好,现在创建一个名为FolderController的控制器,添加必要的

ExtJs五(ExtJs Mvc登录优化)

原文 http://www.cnblogs.com/aehyok/archive/2013/04/21/3034683.html 前言 继上一节中简单的实现了登录之后http://www.cnblogs.com/aehyok/archive/2013/04/20/3033296.html,现在我们可以进行对登录界面进行再次的优化. MemerShip配置  首先打开Web.Config文件,在configuration段内添加一个数据库连接定义,代码如下: <connectionStrings>