Office中国论坛/Access中国论坛

标题: 【VB.NET小品】珠联璧合 -- MVC与EasyUI结合示例 [打印本页]

作者: todaynew 时间: 2014-11-7 10:10
标题: 【VB.NET小品】珠联璧合 -- MVC与EasyUI结合示例
本帖最后由 todaynew 于 2014-11-7 11:09 编辑

　　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部分。

　　示例：[attach]54971[/attach]

　　视图：
[attach]54972[/attach]

作者: ui 时间: 2014-11-7 10:48
Good!

作者: 风中漫步 时间: 2014-11-7 13:01
谢谢斑竹,下载学习

作者: todaynew 时间: 2014-11-7 15:50
本帖最后由 todaynew 于 2014-11-7 16:00 编辑

风中漫步发表于 2014-11-7 13:01
谢谢斑竹,下载学习

楼上二同志，及目前以下载示例的同志，请自行对示例做如下修改：

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>

修改后的气泡显示大照片的效果如下：
[attach]54975[/attach]

作者: zhuyiwen 时间: 2014-11-7 15:56
赞一个

作者: todaynew 时间: 2014-11-7 15:58

zhuyiwen 发表于 2014-11-7 15:56
赞一个

记得朱总对easyui有过研究，可以就此折腾mvc，则一定手到擒来。

作者: zhuyiwen 时间: 2014-11-7 16:02
没有研究，仅只是试了一下。不过EasyUI确实不错。
mvc没接触过。应该它们是非常好的搭配。

作者: tmtony 时间: 2014-11-7 21:53
赞一个！
jquery是不错，我们平台也用了它

作者: 盗梦 时间: 2014-11-13 11:44
fineUI也不错

欢迎光临 Office中国论坛/Access中国论坛 (http://www.office-cn.net/)