【VB.NET小品】珠联璧合 -- MVC与EasyUI结合示例-煮江品茶
Access软件网QQ交流学习群(群号码198465573),欢迎您的加入!
首页 >技术文章> 源码示例


【VB.NET小品】珠联璧合 -- MVC与EasyUI结合示例

发表时间:2014/11/7 10:32:07 评论(1) 浏览(11289)  评论 | 加入收藏 | 复制
   
摘 要:【VB.NET小品】珠联璧合 -- MVC与EasyUI结合示例
正 文:
  MVC3在视图的处理部分有很多自己的技术,比如分部视图、HTML辅助器等,不过其提供的用于UI界面设计的东西还是不一定能满足设计的需要(可能MVC3之后的版本这方面更强些)。好在MVC视图本身是主要依赖浏览器客户端的技术(因为其没有服务器端控件的概念),因此上能很好的使用很多成熟的JqueryUI库。在建立项目时,MVC3中的脚本文件夹(Scrict)中已经存在有JqueryUI库,这是微软针对ASP.net设计的,但其控件比较少,用起来不是很方便。于是我们可以将国人喜欢的Easyui库拷贝到脚本文件夹中,并主要使用该库做UI的设计。

  Easyui开发的比较早,它并不是针对Asp.net设计的,所以Easyui在获取后台数据方面,是通过Jquery的一组Ajax方法来获得json数据,然后在客户端加载到其控件上的。MVC提供了返回json数据的动作方法,不过这通常并不需要。因为MVC本身无需到客户端再去折腾UI界面,可以在服务器端加工好界面后,渲染到客户端即可。于是乎,在使用Easyui时,我们可以主要使用它的外壳(也就是样式和客户端的动作),而把数据的交互转给MVC的完成。这样便可以利用两个玩意的各自优势,这样也就可以达到珠联璧合的效果。

  本示例基于以上的考虑做了一些摸索,感觉路数基本正确。如果有兴趣,同志们可以下载参考。如果还没入门的同志,可以学习《VB.net视频教程》中的MVC部分。


示例:  (9.89 MB) 

视图:


请自行对示例做如下修改:

1、在View文件夹中找到Employee文件夹,双击Index.vbhtml文件。

2、在设计界面找到img标签,在该标签中增加一个class="small_img"属性。结果如下:

<img class="small_img" style="width:20px;height:20px;" alt="无照片"  src="@Url.Action("GetImg", "Employee", New With {.id = currentItem.人员ID})" />

3、在<script type="text/javascript">脚本中增加的一段代码,结果如下:
<script type="text/javascript">
    $(function () {
        SetTable('地名列表', "地名ID");
        /* 以下为新增的代码 */
        $(".small_img").tooltip({
            position: 'right',
            content: '<img class="big_img"  style="width:120px;height:160px;" alt="无照片" src="#"/>',
            onShow: function () {
                $(this).tooltip('tip').css({
                    backgroundColor: '#ddd',
                    borderColor: '#666'
                });
                $(".big_img").attr("src",$(this).attr('src'));
            }
        });

    });
</script>

修改后的气泡显示大照片的效果如下:



Access软件网交流QQ群(群号:198465573)
 
 相关文章
【VB.net小品】盲人摸象---解决Oracle数据库连接连接问...  【煮江品茶  2014/5/7】
【VB.NET小品】性命赌局 --- VB.net一日入门视频教程  【煮江品茶  2014/5/18】
【Access小品】约定优于配置--熊猫监测管理示例  【煮江品茶  2014/10/6】
【VB.NET小品】三分天下--大熊猫野外监测系统MVC示例  【煮江品茶  2014/10/27】
常见问答
技术分类
相关资源
文章搜索
关于作者

煮江品茶

文章分类

文章存档

友情链接