mvc JavaScriptResult的用法

一、JavaScriptResult在MVC中的定义的代码片段

C# 代码复制


 public class JavaScriptResult : ActionResult
 {
     public override void ExecuteResult(ControllerContext context)
     {        
         HttpResponseBase response = context.HttpContext.Response;
         response.ContentType = "application/x-javascript";
         response.Write(this.Script);
     }
     public string Script { get; set; }
 }
  
 public abstract class Controller : ControllerBase, ...
 {
     //其他成员
     protected virtual JavaScriptResult JavaScript(string script);
 }

其中：JavaScriptResult的属性Script表示响应的JavaScript脚本，而用于响应JavaScript脚本的ExecuteResult方法除了将脚本内容写入当前HttpResponse之外，还会将响应的媒体类型设置为“application/x-javascript”（不是“text/javascript”）。

二、可以通过ContentResult来实现与JavaScriptResult一样的脚本响应功能

例如下面两段代码效果一样

C# 代码复制


//JavaScriptResult:
     public class FooController : Controller
     {
         public ActionResult JavaScript()
         {
             return JavaScript("alert('Hello World!');");
         }
     }
      
    //ContentResult:
    public class FooController : Controller
    {
        public ActionResult JavaScript()
        {
            return Content("alert('Hello World!');", "application/x-javascript");
        }
    }

三、JavaScriptResult实例

下面演示一个在线购物的场景：用于完成了商品选购之后提交订单，服务端在处理订单的时候需要确认订购的商品是否超出了对应的库存量，如果存量充裕则正常处理该订单，否则提示库存不足，并将商品实时库存量显示给用户让他修正相应商品的购买量。我们利用JavaScript的方式来提示订单处理结果的消息（成功处理或者库存不足），很显然这段JavaScript应该是动态的（库存量是动态的）。

1、定义一个ShoppingCart类表示购物车。如下面的代码片断所示，ShoppingCart是表示购物车商品项ShoppingCartItem对象的列表，而ShoppingCartItem的三个属性（Id、Name和Quantity）分别表示商品ID、名称和订购数量。

C# 代码复制


     public class ShoppingCart : List<ShoppingCartItem>
     {}
      
     public class ShoppingCartItem
     {
         public string     Id { get; set; }
         public string     Name { get; set; }
         public int        Quantity { get; set; }
     }

2、创建如下一个HomeController。我们在默认的Action方法Index中创建一个包含三个商品的ShoppingCart对象，并将其作为Model呈现在对应的View中。Action方法ProcessOrder用于处理提交的购买订单，如果订购商品的数量没有超过库存量（通过一个静态字典字段stock表示），则通过调用alert函数提示“购物订单成功处理”，否则提示“库存不足”，并将相应商品当前库存量显示出来。

C# 代码复制


     public class HomeController : Controller
     {
         private static Dictionary<string, int> stock = new Dictionary<string, int>();
         static HomeController()
         {
             stock.Add("001", 20);
             stock.Add("002", 30);
             stock.Add("003", 40);
         }
        public ActionResult Index()
        {
            ShoppingCart cart = new ShoppingCart();
            cart.Add(new ShoppingCartItem { Id = "001", Quantity=1, Name = "商品A" });
            cart.Add(new ShoppingCartItem { Id = "002", Quantity = 1, Name = "商品B" });
            cart.Add(new ShoppingCartItem { Id = "003", Quantity = 1, Name = "商品C" });
            return View(cart);
        }
            
        public ActionResult ProcessOrder(ShoppingCart cart)
        {
            StringBuilder sb = new StringBuilder();
            foreach (var cartItem in cart)
            {
                if (!CheckStock(cartItem.Id, cartItem.Quantity))
                {
                    sb.Append(string.Format("{0}: {1};", cartItem.Name,stock[cartItem.Id]));
                }
            }
            if(string.IsNullOrEmpty(sb.ToString()))
            {
                return Content("alert('购物订单成功处理！');", "text/javascript");
            }
            string script = string.Format("alert('库存不足! ({0})');", sb.ToString().TrimEnd(';'));
            return JavaScript(script); 
        }
     
        private bool CheckStock(string id, int quantity)
        {
            return stock[id] >= quantity;
        }
    }

3、创建Action方法Index对应的View。在一个以Ajax请求提交的表单（表单的Action属性对应着上面定义的Action方法ProcessOrder）中显示了购物车中的商品和数量，用于可以修改订购数量并通过点击“提交订单”按钮以Ajax请求的方式提交订单。

C# 代码复制


    @model ShoppingCart
     <html>
         <head>
             <title>用户登录</title>
             <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.6.2.js")"></script>   1:         <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")">
</script>        
         </head>
         <body>
             @using (Ajax.BeginForm("ProcessOrder", new AjaxOptions()))
             {
                for (int i = 0; i < Model.Count; i++)
                {         
                    <div>
                        @Html.HiddenFor(m=>m[i].Id)
                        @Html.HiddenFor(m => m[i].Name)
     
                        @Html.DisplayFor(m => m[i].Name):
                        @Html.EditorFor(m => m[i].Quantity)
                    </div>
                }
                <input type="submit" value="提交订单" />
            }
        </body>
    </html>

4、运行结果：一个包含三个商品的购物车信息会被呈现出来，当我们输入相应的订购数量并点击“提交订单”后，订单处理结果消息会弹出来。下图所示的就是库存不足的情况下显示的消息。

posted @ 2014-11-05 08:44 juggd 阅读(2436) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

2025年3月

日

一

二

三

四

五

六

juggd

mvc JavaScriptResult的用法

搜索

常用链接

最新随笔

随笔档案 (142)

阅读排行榜

评论排行榜

推荐排行榜

最新评论