Classic ASP MVC 用于动态 JavaScript 页面

引言

本主题是为 Classic ASP 程序员创建一个完全动态的 JavaScript 应用程序的“操作指南”。

背景

在 上一主题 中讨论的 Classic ASP VBScript 应用程序中存在 MVC 模式。 [^]

现在我们将把 MVC 模式 应用到 Classic ASP 应用程序，并使用 JavaScript 作为服务器端和客户端代码的语言。
本主题的价值在于为那些使用 Classic ASP IIS 应用程序的开发者提供服务器端 MVC JavaScript Classic ASP 和客户端 MVC JavaScript 应用程序的经验。

使用代码

• 将存档下载并解压缩到 IIS 虚拟目录。
• 为虚拟目录设置默认页面 (default.asp)
• 设置 404 错误处理程序 (router.asp)
• 创建数据模型，并使用 在线 Classic ASP 代码生成器 生成您自己的 Classic ASP JavaScript MVC 应用程序。

• 下载代码生成器应用程序的源代码 - 2362 KB

404 处理程序和默认页面的图示说明。

服务器端代码

路由器是 MVC Web 应用程序的入口点。

路由

• 解析 URL，计算 Controller/Action
• 将执行传递给带参数的 Controller/Action

在 router.asp 中将会有一些其他函数（因为它是应用程序的单一入口点）

• 加载所需的库
• 加载 Controllers
• 加载 Model
• 认证/授权用户
• 表单清理等。

您需要捕获 404 IIS 错误以启用漂亮的 URL。
您可以手动设置 IIS 错误处理程序或使用脚本。 此处 有关于如何设置 404 错误处理程序以通过自定义 Classic ASP 路由器路由漂亮格式化 URL 的说明。（从菜单中选择“架构师”。）
让我们将服务器端路由器存储在 /Router.asp 文件中。

Controller/Action

应用程序中通常有许多不同的 Controllers。Controllers 是包含应用程序业务逻辑的类。Actions 是这些类中的函数。

{Controller/Actions 业务逻辑的示例}

 
    <%
    var SomethingController = {
    
        About: function(){
            var model = someCalculation();
            //render model in the view
            %>   <!--#include file="../Views/Something/About.asp" --> <%
        },
        //read operation
        Read: function(callback){
            var model = {data : {items: SomethingHelper.SelectAll()} };
            //send model as JSON data
            callback(JSON.stringify(model),"application/json") ;
        },
        //create operation
        Create: function(callback){
            var model = {data : new Something()};
            callback(JSON.stringify(model),"application/json") ;
        },
        //create operation - put the model into DB
        CreatePost: function(callback){
            var obj = getArguments();
            var result = createModelSomething(obj);
            var model = {result : result, data: obj };
            callback(JSON.stringify(model),"application/json") ;
        },
        //update operation - get the model from DB
        Edit: function (callback,vars){
            var model = {data: readModelSomething(vars)}; 
            callback(JSON.stringify(model),"application/json") ;
        },
        //update operation - put the model back to DB
        EditPost: function (callback){
            var obj = getArguments();
            var result = updateModelSomething(obj);
            var model = {result : result, data: obj };
            callback(JSON.stringify(model),"application/json") ;
        },
        //basic delete operation - get the model from DB
        Delete: function(callback,vars){
            var model = {data: updateModelSomething(vars)}; 
            callback(JSON.stringify(model),"application/json") ;
        },
        //basic delete operation - delete the object from DB
        DeletePost: function(callback){
            var obj = getArguments();
            var result = deleteModelSomething(obj);
            var model = {result : result, data: obj };
            callback(JSON.stringify(model),"application/json") ;
        }
    };
    //list of allowed controller/action
    controllers['Something']=SomethingController;
     %>   
    

在 MVC 模式中，Controller 处理用户输入，操作 Model，并更新 View。
早期的 Web MVC 模式采用了瘦客户端的方法，将整个 Model、View 和 Controller 逻辑放在服务器上。
在这种方法中，客户端通过 Router 发送“get”或“post”请求到 Controller，然后接收一个完整且更新的网页。
这种瘦客户端方法将用于显示整个页面。例如，默认的服务器端 HomeController.Index() 将显示示例应用程序的主页。

服务器端 Controller、Action 和 View 生成整个页面时的逻辑

一旦您可能想为您的网页添加更多活力。客户端 JavaScript 代码将有所帮助。客户端代码将向服务器发送 AJAX 请求并更新 DOM（文档对象模型）。

然后，在进行了一些更新/添加功能后，客户端代码会变得混乱、结构不良、难以维护。为了解决这个问题，同样，也曾有过组织客户端代码的努力。

随着客户端技术的成熟，出现了许多客户端 MVC 框架，它们允许 MVC 组件部分地在客户端执行。
您可能听说过 Backbone.js、Knockout、AngularJs 等。

在本主题中，它们都不会被使用，但纯粹的 MVC 模式将应用于客户端 JavaScript 代码。
大量的客户端代码也会影响服务器端代码：大多数服务器端 Controllers/Actions 将返回数据而不是编译后的 HTML。
对于 JavaScript 代码，使用 JSON 传输数据是很自然的，因此示例应用程序中的大多数服务器端控制器将向客户端返回 JSON 数据。服务器将不会将 Model 与 Views 合并以生成 HTML。

以下示例显示了服务器端 Controller 和 Action 生成 JSON 字符串

服务器端 Model

MVC 模式中“Model”一词有广义和狭义之分。

广义是指用于数据库对象的 CRUD（创建、读取、更新、删除）操作以及数据库本身的类集。

“Model”一词的狭义是指我们一次性发送到客户端的数据。它可以是序列化为 JSON 的对象（如上例），也可以是操作的结果 true/false，或者服务器可能用 HTML 模板显示或发送到客户端的任何其他数据。

我将使用类集作为数据模型。这些类将包含具有 SQL 子句的方法，用于在关系数据库中更新/检索数据。数据模型的文件将存储在 /Server/Model/(Name).asp 文件中。

服务器端 View

虽然现在选择模板引擎时有多种选择，但在本主题中我将使用 Classic ASP 模板。
Classic ASP 引擎在解析 .ASP 文件时，会提取并执行 <% %> 标签之间的代码。
我将使用“服务器端 View”这个词来称呼逻辑较少、内容较多的 .asp 页面。我在这里使用的代码生成器创建了一个单一的服务器端视图 /Server/View/Home/Index.asp

客户端代码

当用户从服务器请求页面时，浏览器会向服务器发送请求，其中包含请求资源的 URL。它构成了用户与服务器端代码之间的交互协议。

使用客户端 JavaScript 代码，这种交互通常建立在绑定到 HTML 控件的事件之上，例如 onclick 事件 [^]。像 JQuery 这样的框架可以帮助您将事件设置为适当的客户端事件处理程序。

但是，为了应用 MVC 模式，应该有一种通用方法来捕获用户交互，将其转换为对 Router 的调用。在本主题中，客户端 URL 将用于发出用户请求信号。

URL 的客户端部分。

URL 包含标识服务器端资源和客户端资源的这部分。客户端资源通常被称为“同页面链接”或“命名锚点”。例如 URL

https:///Home/Index/#User/List  

包含服务器端部分

https:///Home/Index/ 

和客户端部分

#User/List. 

当用户单击带有此类 URL 的链接时，如果服务器端部分与当前页面位置不同，浏览器将请求一个新页面。
如果服务器端部分未更改，浏览器将不会请求页面，而是会尝试在页面上找到锚点并将其焦点设置在其上。

在本主题中，我们将修改此行为。Jquery-hashchange-plugin 将捕获 URL 客户端部分的变化并将它们发送到客户端 Router。

{钩子到 URL 变化的 code}

$(document).ready(function() {
        // Bind the event.
        $(window).hashchange(function() {
            route();
        })
    });
    

路由

客户端 Router 将解析 URL 的客户端部分并将执行传递给客户端 Controller/Action。

{客户端 Router 的 code}

        var controllers = {};

    function route() {
        var defaultController = ""
        var defaultAction = ""
        var controller = null;
        var action = null;
        var vars = null;

        var globalpath = location.hash.split('#');
        if (globalpath.length < 2) return;
        //the path should be like:  /Controller/Action/var1/var2/var3
        var path = globalpath[1];

        //normalyze path
        if (path.charAt(0) != "/") path = "/" + path;

        var pathchuncks = path.split('/');
        if (pathchuncks.length) {
            if (pathchuncks.length >= 3) {
                controller = pathchuncks[1]; //suffix 'Controller' is not used on client
                action = pathchuncks[2];
            }
            if (pathchuncks.length > 3) {
                vars = pathchuncks.slice(3).join('/');
            }
            else  {vars='';}
            
        };

        if (!controller) {
            controller = defaultController;
        };
        if (!action) {
            action = defaultAction;
        };

        //alert(controller);
        //alert(action);
        if (controllers[controller]){
            if (controllers[controller][action]){
                var ControllerAction = controllers[controller][action];
                ControllerAction(null,vars);
            }
        }

    }
    

当一个 controller 被初始化时，它被添加到允许的 controllers 列表中。

       var ProjectController = {
            List:       function(callback, args){ ... },
            Create:     function(callback, args){ ... },
            CreatePost: function(callback, args){ ... },
    ...
            Details:    function(callback, args){ ... }
       }

       //add to list of allowed controllers/actions
       controllers['Project']=ProjectController;
    

所以，在这一行

 var ControllerAction = controllers['Project']['List'];

变量 ControllerAction 获取 ProjectController.List() 函数的指针，该函数在下一行被调用。

    ControllerAction(null,vars);    

客户端路由器位于 /Client/router.js 文件中

客户端 Controllers/Actions

当用户单击链接且 URL 已更改时，“hashchange”事件将被触发，并调用客户端 Router。Router 解析 URL。它调用客户端 Controller/Action。

客户端 Controller/Action 可以访问 DOM（文档对象模型）并更新界面，但它应该首先获取 Model 和 View 以生成 HTML。

因此，将进行 2 次对服务器的调用以获取 Model 和 View。Model 是服务器端 Controller/Action 发送的 JSON，而 View 只是服务器文件系统中的一个文件。

客户端 Controller/Action 执行以下操作：

• 准备回调函数，以便在 Model 和 View 就绪时更新 DOM。
• 调用服务器端 controller/action 并通过 ModelProxy 接收 JSON 数据作为 Model。
• 调用服务器端 controller/action 以通过 ViewProxy 检索 View。
• 当回调被调用，并且 Model 和 View 都就绪时，客户端 Controller/Action 将 Model 渲染到 View 中以生成 HTML - 页面的一个部分。
• 使用新内容更新页面部分。

客户端 Controller ProjectController /action List 的示例

      var ProjectController = {
            List: function(callback, args){
                var view=null, model=null;
                
                //3. this is called via callback when the Model or View is ready.
                // thus it is called twice. When both Model and View are ready - then the final part: 
                //locally render the model in the view when they are ready, and update the DOM
                var UpdateDOM = function(Model,View) {
                    if (Model != null){ model = Model; }
                    if (View != null){ view = View; }
                    if ((model != null) && (view != null)) {
                        //render the Model into the Template
                        var templateOutput = Mustache.render(view, model);
                        //update the DOM:
                        $("#dialog1-body").empty();
                        $("#dialog1-body").append(templateOutput);
                        $("#dialog1-label").empty().append("list of Project");
                        $("#dialog1").modal("show");
                        NormalizeHash();
                    }
                }
                
                //1. this is called first
                //call for the model, async
                ModelProxy(UpdateDOM, 'Project','List', args, 'get');
                
                //2. this is called second, simultaneously with the first call
                //get the view, async
                ViewProxy(UpdateDOM, 'Project','List');
                
            },

            //get the view and model and update the DOM
            Create: function(callback, args){
                var view=null, model=null;
                
                //locally render the model in the view when they are ready, and update the DOM
                var UpdateDOM = function(Model,View) {
                    if (Model != null){ model = Model; }
                    if (View != null){ view = View; }
                    if ((model != null) && (view != null)) {
                        var templateOutput = Mustache.render(view, model);
                        $("#dialog2-body").empty();
                        $("#dialog2-body").append(templateOutput);
                        $("#dialog2-label").empty().append("");
                        $("#dialog2").modal("show");
                        NormalizeHash();
                    }
                }
               
                //call for the model, async
                ModelProxy(UpdateDOM, 'Project','Create', args, 'get');
                
                //get the view, async
                ViewProxy(UpdateDOM, 'Project','Create');
                
            },

            //this is called from dynamic script from the /Client/Views/Project/Create.html
            CreatePost: function(callback, args){
                var view=null, model=null;
                
                //locally render the model in the view when they are ready, and update the DOM
                var UpdateDOM = function(Model,View) {
                    if (Model != null){ model = Model; }
                    if (View != null){ view = View; }
                    
                    //may show the form/components on the client here
                    if ((model != null) && (view != null)) {
                        if (model.result == true) {
                            $("#dialog2-body").empty();
                            $("#dialog2").modal("hide");
                            NormalizeHash();
                            var templateOutput = Mustache.render(view, model);
                            //find the table Projectdatatable 
                            //find the last row  and inset the row with attribute rowid='id'
                        
                            if ($("#Projectdatatable")[0]!=undefined){
                               $("#Projectdatatable tr:last").after(templateOutput);
                               bindEvents();
                            }
                            
                        }
                        if (model.result == false) {
                            var templateOutput = Mustache.render(view, { error: model.result });
                            $("#dialog2-label").empty().append(templateOutput);
                        }
                    }
                }
                
                //call for the model, async
                ModelProxy(UpdateDOM, 'Project','CreatePost', args, 'post');
                
                //get the view, async
                ViewProxy(UpdateDOM, 'Project','CreatePost');

            },
    ...
    }


          //add to list of allowed controllers/actions
          controllers['Project']=ProjectController;

    

架构概览

客户端 View (mustache 模板)

客户端 controller 通过 ModelProxy 接收带有数据的 JSON 字符串。这些数据应转换为 HTML。

可以在 JavaScript 中解析 JSON 数据为 HTML。但是，更好的方法是使用模板和专门的模板库。

有许多 JavaScript 模板引擎：dustjs、underscore.js、jade.js、mustache 等。在本主题中，我将使用 **mustache**。

将客户端 Views 存储在 /Client/Views/(Controller)/(Action).html 中很方便

Views 存储在服务器上，但它们在客户端代码中转换为 HTML。这就是为什么它们被称为客户端 Views。

在客户端 Controller/Action 生成 HTML 后，它会更新 DOM。例如，它可以是：显示从服务器接收的数据，显示将表单发布到服务器时的状态，在表中添加/删除行，显示/隐藏对话框、菜单等。

一组客户端 controllers 将位于文件 /Client/Controllers/(nameController).js 中

我将使用的代码生成器为每个 controller 创建一个文件。

客户端视图 /Views/Project/List.html 的示例

          {{#data}}<div id='ProjectListContainer'>
          <ul class="pagination pagination-sm  pull-right">
?
          

              
  
    
              
   
              
  
              
  
          
          {{#paginator}}
          

           

              

              {{#previous}}
{{/previous}}
                 {{#links}}
                    
{{n}}
                  {{/links}}
              {{#next}}
{{/next}}
              
          
           
 
          
           {{/paginator}}
         

         
          {{#items}}
            {{/items}}
            
ProjectName
POP3Address
Active
{{ProjectName}}
{{POP3Address}}
{{Active}}

          {{^items}}
          
No records
          {{/items}}
          <script type="text/javascript">
              ProjectListModule = (function() {
                  // private 
                  var onSelectorClick = function(_selector) {
                      if ($(_selector).hasClass('active')) {
                          $(_selector).removeClass('active');
                          disableButtons();
                      }
                      else {
                          $(_selector).addClass('active').siblings().removeClass('active');
                          $(_selector).find("tr").addClass('active');
                          var rID = $(_selector).attr('rowid');
                          enableButtons(rID);
                      }
                  };

                  var enableButtons = function(id) {
                      $("div#ProjectListContainer li.button_container").fadeIn(100);
                      $("div#ProjectListContainer #edit_button")[0].href = '#/Project/Edit/' + String(id);
                      $("div#ProjectListContainer #delete_button")[0].href = '#/Project/Delete/' + String(id);
                      $("div#ProjectListContainer #details_button")[0].href = '#/Project/Details/' + String(id);
                  };

                  var disableButtons = function() {
                      $("div#ProjectListContainer li.button_container").fadeOut(100);
                      $("div#ProjectListContainer #edit_button")[0].href = '#';
                      $("div#ProjectListContainer #delete_button")[0].href = '#';
                      $("div#ProjectListContainer #details_button")[0].href = '#';
                  };
                  
                  var bindEvents = function() {
                      $("div#ProjectListContainer  #Projectdatatable > tbody tr").each(function() {
                          $(this).unbind();
                          $(this).bind('click', function() {
                              onSelectorClick(this);
                          });
                      });
                  };
                  //public
                  return {bindEvents : bindEvents ,
                          disableButtons : disableButtons
                  }//end public members
              })();  //end ProjectListModule
          $(document).ready(function() {
              ProjectListModule.bindEvents();
          });

          </script>