代码改变世界

对Razor的一点初步看法

2010-12-17 09:50  月光下的凤尾族  阅读(2917)  评论(25)  编辑  收藏  举报

    最近在学习客户端技术。原因是发现一些新的东西正在发生变化，比如说JQuery+Html5+CSS3这样的组合有效，还是要用透微软的Razor+MVC3这样的组合。

 

    因为只是初步了解了下相关的概念，但看了Razor的做法后，有一点感想：

我们来看下Razor的语法：

 

@{
    var total = 0;
    var totalMessage = "";
    if(IsPost) {
 
        // Retrieve the numbers that the user entered.
        var num1 = Request["text1"];
        var num2 = Request["text2"];
 
        // Convert the entered strings into integers numbers and add.
        total = num1.AsInt() + num2.AsInt();
        totalMessage = "Total = " + total;
    }
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css">
      body {background-color: beige; 
            margin: 50px; }
      form {padding: 10px; border-style: solid; width: 250px;}
    </style>
  </head>
<body>
  <p>Enter two whole numbers and then click <strong>Add</strong>.</p>
  <form action="" method="post">
    <p><label for="text1">First Number:</label>
      <input type="text" name="text1" />
    </p>
    <p><label for="text2">Second Number:</label>
      <input type="text" name="text2" />
    </p>
    <p><input type="submit" value="Add" /></p>
  </form>
  
  <p>@totalMessage</p>
  
</body>
</html>

 

 

先不去管它具体实现，以我一个初学者的眼光看来，这个东西怎么看怎么象Asp，只不过是页面嵌入代码换成了最先进的C#，实际上还是走上了Html和代码混合的老套路。

再看一下神器JQuery：

这是Demo.htm文件

 

<html>
<head>
<script type="text/javascript" src="JQuery/jquery-1.4.1.js"></script>
<script type="text/javascript" src="JavaScript/Demo.js"></script>
</head>
<body>

<div id="myDiv"><h2>源码</h2></div>
<button id="b01" type="button">查看源码</button>

</body>
</html>

 

 

这个就是Demo.js文件

 

$(document).ready(function () {
    $("#b01").click(function () {
        htmlobj = $.ajax({ url: "JavaScript/Demo.js", async: false });
        $("#myDiv").html(htmlobj.responseText);
    });
});

 

 

可以看了出，页面代码和JS源码是分离的。Razor走向了JS的老路，Html和源码混合，JQuery反而走向了Asp.net的道路，代码分离，这真是很有意思，到底是Razor犀利，还是JQuery的$有钱途，值得期待。