博客

在写js通过ajax调用api时，使用了webapi。

webapi是个mvc4中的新玩意儿。他的路由定义单独放在了WebApiConfig.cs中，并且先于普通controller的路由注册，以便匹配。

WebApiConfig.cs中只有一个Register方法，只有这么几行：

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );

这里，只注册到了controller，没有到action，因为api的action名称是有约定的。

webapi大约有这样的约定：

action名称中有get的，0参数，匹配路由到/控制器

action名称中有get的，1参数，匹配路由到 /控制器/id

action名称中有post的，0参数，匹配路由到post方式的/控制器

action名称中有post的，1参数，匹配路由到post方式的/控制器/id

对于返回，可以直接返回一个class，则apicontroller自动根据请求的content-type序列化成xml或者json。具体例子为，用ie打开相应api的url返回的是json，用chrome返回的就是xml。

现在有这样的场景：希望始终返回json。或者可以在chrome浏览器中预览json（因为结构简单，更轻量，更易观察和调试）。

解决方法：在WebApiConfig.cs中，Register方法添加如下代码：

1、实现始终返回json：

            var appXmlType = config.Formatters.XmlFormatter.SupportedMediaTypes.FirstOrDefault(t => t.MediaType == "application/xml");
            config.Formatters.XmlFormatter.SupportedMediaTypes.Remove(appXmlType);

也可以这样：

          config.Formatters.XmlFormatter.SupportedMediaTypes.Clear();

还可以这样：

          config.Formatters.Remove(config.Formatters.XmlFormatter);

2、实现有url参数控制返回json或者xml：

            config.Formatters.XmlFormatter.MediaTypeMappings.Add(new QueryStringMapping("ct", "xml", "application/xml"));
            config.Formatters.JsonFormatter.MediaTypeMappings.Add(new QueryStringMapping("ct", "json", "application/json"));

这样可以通过 /api/xxxx/id?ct=json来返回json格式

另外，在使用razor引擎时，@标志可以很方便的插入代码。

同时，@引入块标志标签时（@{},@if(){},@foreach(){}等），{}内可以自动识别是代码还是html标签。

比如：

@if(Model.status==1){ string url="http://www.xx.com"; }

或者

@if(Model.status==1){ <div>妹啊</div>  }

甚至混合起来

@if(Model.status==1){ 
string url="http://www.xx.com"; 
<div>啊啊啊</div>
}

但是，有些时候，识别并不正确。比如

@if(Model.status==1){ 
妹啊@Url.Action("Index") 
}

这个会报错。解决方法是 使用@:

@if(Model.status==1){ 
@:妹啊@Url.Action("Index") 
}

注意，如果将@:与}放在同一行，依然会报错：

@if(Model.status==1){ 
@:妹啊@Url.Action("Index") }

会报错

另外遇到的（真的是很杂，只是记录下来而已）

利用JQuery来获取partialview，然后显示的问题。

类似于微博的评论展开，点击评论链接按钮，会展开评论列表，再次点击会收起。

因为评论不会预先加载（会有很多条目，每条下都会有评论，类似微博），所以要在点击按钮时才加载，同时，又不希望每次点击都去加载，只在第一次加载。也就说要更改onclick事件，或者动态绑定的click事件。又因为partialview中也有hide操作（针对的是与点击评论按钮相同的元素）所以使用如下技巧

<div><span><a href="javascript:void(0)" οnclick="getComments(this,@item.itemID)">评论</a></span></div>

这里是抽取的部分razor代码

<script type="text/javascript">
    function getComments(obj, getid) {
        $commentList=$(obj).parent().parent().next();
        $.get("@Url.Action("CommentList")/" + getid, {}, function (data) {
            $commentList.html(data);
        });
        $(obj).attr("onclick",null);
        $(obj).click(function(){
            if ($commentList.is(":hidden"))
            {
                $commentList.slideDown();
            }
            else
            {
                $commentList.slideUp();
            }
        });
    }
</script>

这里jquery不用toggle，而用click在其中判定is(“:hidden”)，来兼容partialview中调用的slideUp