silverlight之deeplink学习笔记

所谓的deeplink技术是为了解决silverlight(或flash)之类的RIA Web应用无法被搜索引擎收录而出现的,属于SEO范畴。

就拿最常见的企业网站为例,里面有企业简介(About),产品展示(Product),联系我们(AboutUs)...等常见模块,如果全站都用silverlight/flash来做,default.html页面上用object嵌入一个xap/swf就完事了,搜索引擎永远收录到的都是default.html一个页面. 假如,我们能用 http://www.xxx.com/default.html#/About 能让silverlight切换到企业简介(About)场景,能用".../default.html#/Product” 切换到产品展示模块,能用"../default.html#/Product?id=123" 切换到id=123的产品,这样对于搜索引擎就非常友好了,它会认为这是不同的url,从而能收录更多的页面。 幸好,silverlight 3中要实现这一点非常容易(SL的设计者们确实想得很周到) vs2008中新建(new)一个项目(Project)时,不知道大家有没注意到“Silverlight导航应用程序”这种类型,建一个试试看

F5编译运行看看,注意浏览器地址栏

可以发现自动变成了类似 http://localhost:19341/slNavTestPage.aspx#/Home ,页面标题自动变成了"主页",再点击About按钮,地址栏变成了 http://localhost:19341/slNavTestPage.aspx#/About ,页面标题自动变成了"关于",而我们还一行代码都没写,这不正是我们想要的吗?

如果我们想自己手动达到这种效果,也不困难,新建一个Index.xaml的控件(或页面),内容如下:

<UserControl x:Class="slNav.Index"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" 
    xmlns:uriMapper="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation" 
    >

    <StackPanel Orientation="Vertical">

        <navigation:Frame x:Name="ContentFrame"  Source="/Home" NavigationFailed="ContentFrame_NavigationFailed" Height="300" Navigated="ContentFrame_Navigated">
            <navigation:Frame.UriMapper>
                <uriMapper:UriMapper>
                    <uriMapper:UriMapping Uri="" MappedUri="/Views/Home.xaml"/>
                    <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/>
                </uriMapper:UriMapper>
            </navigation:Frame.UriMapper>
        </navigation:Frame>

        <TextBlock x:Name="xUri"></TextBlock>

    </StackPanel>

</UserControl>

关键在于<navigation:Frame>..</navigation:Frame>这个控件,它是一个容器,用于在各页之间跳转导航,同时自动会让地址栏产生刚才的变化.

有一个Source属性比较关键,可以用来指定导航显示的xaml页,比如你可以指定为"/pages/about.xaml",运行时它将加载/pages/about.xaml到容器中显示,但是可能有些人觉得这种太长了,而且也暴露了网站本身的目录结构,如果能用"/About" 直接显示"/Pages/About.xaml"多好,没问题!

注意上面的<uriMapper:UriMapper>..<uriMapper:UriMapper>,它提供了地址映射的能力!(很象urlRewriter功能)

<uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/>

表示地址 "/abc" 将自动映射到 "/Views/abc.xaml",地址"/About"将自动映射到"/Views/About.xaml"

定义了映射规则后,Source属性就可以把"/Views/Home.xaml"简写成"/Home"

这里有一点要注意,如果您定义多个映射关系,请合理安排顺序

比如:

<uriMapper:UriMapper>
         <uriMapper:UriMapping Uri="" MappedUri="/Views/Home.xaml"/>
  <uriMapper:UriMapping Uri="/Link/{id}" MappedUri="/Views/Link.xaml?id={id}"/>
 <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/>    
</uriMapper:UriMapper>

这是有效的,输入"..#/Link/3" 将自动映射到 "/Views/Link.xaml?id=3"

但是如果换一下顺序:

<uriMapper:UriMapper>
         <uriMapper:UriMapping Uri="" MappedUri="/Views/Home.xaml"/>
  <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/>  
         <uriMapper:UriMapping Uri="/Link/{id}" MappedUri="/Views/Link.xaml?id={id}"/>
</uriMapper:UriMapper>

这样是无效的,"..#/Link/3" 永远也得不到正确的映射!因为第二条红色的规则先匹配了,它将会把这个地址能识别的有效部分先翻译成 "/Views/Link.xaml",至于后面的"/3"它不认别,则会原样附加到后面,最终得到的地址是 "/Views/Link.xaml/3",因为/Views/下没有Link.xaml这个目录,所以当然会找不到路径而出错!

大概原则:特殊的规则写在前面,通用的规则写在后面

另一个问题,导航到类似"/Product?id=123"这种地址后,在silverlight中如何象Asp.net中的Request.QueryString那样接受参数呢?

可以在product.xaml.cs中类似如下处理:

// 当用户导航到此页面时执行。
       protected override void OnNavigatedTo(NavigationEventArgs e)
       {
           IDictionary<string, string> _dicParm = this.NavigationContext.QueryString;
             if (_dicParm.ContainsKey("id")) 
           {
               xParm.Text = "产品id = " + _dicParm["id"];
           }            
       }

 要注意的是:参数名是区分大小写的,也就是说 /product/?id=123 跟 /product/ID=123是不一样的!(这点跟asp.net不同)

最后看一下标题的问题,观察一下Silverlight中Page页自动生成的xaml代码:

<navigation:Page x:Class="slNav.Views.Link" 
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
          mc:Ignorable="d"
          xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
          d:DesignWidth="640" d:DesignHeight="480"
          Title="友情链接">

没错,就是Title属性!

那么运行时,silverlight是如何自动把xaml中的title设置到html/aspx网页标题的呢?

其实内部原理我也不知道,哈! 不过我经过多次测试发现,vs.net自动生成的测试页html代码中

<div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
          <param name="source" value="ClientBin/slNav.xap"/>
          <param name="onError" value="onSilverlightError" />
          <param name="background" value="white" />
          <param name="minRuntimeVersion" value="3.0.40624.0" />
          <param name="autoUpgrade" value="true" />
          <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration:none">
               <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
          </a>
        </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>

总是有一行<iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>,如果你把这个去掉,虽然页面照样能显示,但是silverlight就没办法自动设置网页标题了,而且连这个iframe的id都不能变,估计是silverlight内部定死了。 更多细节,欢迎大家补充。

转载请注明出自菩提树下的杨过

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏zhisheng

使用 CodeMirror 打造属于自己的在线代码编辑器

前提 写这个的目的是因为之前项目里用到过 CodeMirror,觉得作为一款在线代码编辑器还是不错,也看到过有些网站用到过在线代码编辑,当然我不知道他们是用什么...

98670
来自专栏Kiba518

【我们一起写框架】MVVM的WPF框架之绑定(二)

上一篇我们已经一起编写了框架的基础结构,并且实现了ViewModel反向控制Xaml窗体。

17120
来自专栏小狼的世界

Mac下快捷键的收集整理

最近刚换用了Mac的笔记本,因为之前是Linux用户,感觉切换的过程非常平滑,但是难免有些小不适应,在使用过程中,遇到一些快捷键,收集了下来,与大家分享。

14250
来自专栏CSDN技术头条

前端知识点总结——Vue

作用:将表达式执行的结果 输出当调用元素的 innerHTML 中;还可以将数据绑定到视图。

14420
来自专栏大内老A

ASP.NET:创建Linked ValidationSummary, 深入理解ASP.NET的Validation

我想对于ASP.NET的Validator控件已经熟悉的不能再熟悉了。我们 已经习惯了用Validator控件来验证我们在表单的输入,并通过Validation...

33080
来自专栏贺贺的前端工程师之路

Flex Box布局学习- 兼容

随着自己写过的页面的增多,也遇到了很多CSS兼容性的问题。这些兼容性问题,都是必然的,因为技术在不断进步,不断革新,所谓,“后浪推前浪,前浪拍死在沙滩上”,当然...

10020
来自专栏移动开发之家

GSYVideoPlayer项目说明

项目目前UI层大部分方法和变量都是protect,虽然就封装性而言这并不是很好,但你可以继承后快捷实现你的自定义。

12630
来自专栏源哥的专栏

如何在js文件中写加载Applet控件(js与jsp分离技术)

                        如何在js文件中写加载Applet控件(js与jsp分离技术)

11840
来自专栏小白课代表

给你的Windows加一个 「文件快速预览」功能

在macOS中,有一个非常好用的功能叫做Quick Look,当你在Finder想要查看一个文件时,不需要打开,只需要选中以后按空格即可预览大部分常见文件,Wi...

10740
来自专栏韩东吉的Unity杂货铺

零基础入门 21: UGUI Inputfield

因为一些外部原因,以后文章的发布只会在公众号内推送,取消了在蛮牛专栏的文章更新,望蛮牛小伙伴周知,关注微信公众号,可以第一时间收到新分享的推送通知。

40520

扫码关注云+社区

领取腾讯云代金券