声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版。

用户需求

有网友在《FineUI总群1》问这么一个问题:怎么把 HTML 嵌套在控件中?

这是很多刚学习 FineUIMvc 的网友经常问的问题,我想原因是对 WebForms 陷入太深,习惯了 FineUI 控件的 ContentPanel 和 Content 属性。

FineUI 中嵌套 HTML

FineUI中有两种嵌套 HTML 的方法。

方法一:ContentPanel 控件

第一种是 ContentPanel 控件,用来在面板中放置 HTML 标签:

方法二:Content 属性

还有一种方法是面板(Panel,Window,GroupPanel)的 Content 属性,这个更加简洁和通用:

页面效果:

Content 属性还会带来另一个常见问题,那就是如何访问 Content 中定义的控件。

比如上面这个例子,直接页面后台代码中访问 labTextInWindow 是不存在的,我们需要通过 FindControl 来获取 Content 中的控件:

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Label labTextInWindow = Window2.FindControl("labTextInWindow") as Label;
labTextInWindow.Text = "这是初始值!";
}
} protected void btnChangeText_Click(object sender, EventArgs e)
{
Label labTextInWindow = Window2.FindControl("labTextInWindow") as Label;
labTextInWindow.Text = "这是修改后的值!" + DateTime.Now.ToLongTimeString();
}

FineUIMvc 中嵌套 HTML

在 FineUIMvc 中,没有 ContentPanel 控件,但是嵌套 HTML 会更加更加方便。

方法一:Content 属性

这个方法适合于少量的 HTML 片段,可以直接内联到面板控件中,比如这个示例:

http://fineui.com/demo_mvc/#/demo_mvc/Panel/Panel

F.Panel()
.AutoScroll(true)
.ShowHeader(true)
.EnableCollapse(true)
.BodyPadding()
.Height()
.ShowBorder(true)
.Title("内容面板")
.ID("Panel2")
.Content("可以放置<a href=\"http://www.w3schools.com/html/\" target=\"_blank\">HTML</a>标签。")

显示效果:

方法一:ContentEl 属性

这种方法适合于大多数的情况,比如有很多 HTML 标签, 或者其中嵌套了 ActiveX 控件的情况。

官网示例中有很多,仅举一例说明:http://fineui.com/demo_mvc/#/demo_mvc/Window/Window

<div id="content1">
<p>
<a href="http://tech.163.com/special/jobsdead/" style="font-size: 18px" target="_blank"><b>乔布斯</b></a>
</p>
<p>
乔布斯于1955年2月24日出生,苹果创始人之一。今年8月苹果超越埃克森美孚成为全球最大市值企业,截止上季度持有现金达到762亿美金,甚至超过了美国政府国库存款。
</p>
<p>
遗憾的是,苹果的取得巨大成功还是无法给乔布斯一个健康的身体,乔布斯2003年被发现患有胰脏癌,随后又查出肝癌,危在旦夕的乔布斯在经历了8年的抗癌斗争、3次病休、若干次手术后,于2011年8月25日正式宣布从CEO位置辞职。2011年10月6日,乔布斯在苹果发布iPhone 4S后的第二天与世长辞。
</p>
</div> @(F.Window()
.BodyPadding()
.AutoScroll(true)
.OnClose(Url.Action("Window1_Close"))
.CloseAction(CloseAction.HidePostBack)
.IsModal(false)
.EnableResize(true)
.EnableCollapse(true)
.EnableMaximize(true)
.Title("窗体")
.Icon(Icon.TagBlue)
.Height()
.Width()
.ID("Window1")
.ContentEl("#content1")
.Listener("resize", "onWindowResize")
)

注意,这里的 ContentEl 接受的是一个 jQuery 选择器,本例使用的ID选择器来定位到 content1 的 HTML 片段,当然你也可以使用 Class选择器或者属性选择器,类似这样:

.ContentEl(".mylist[data-tag=red]")

小结

FineUIMvc 作为 ASP.NET MVC 的一个 UI 层的实现,在融入 MVC 架构同时尽可能保留 FineUI 的诸多特性。很多控件和属性的命名都能让 FineUI 开发人员感到亲切,继而喜欢上 MVC 的简洁和灵活。

FineUIMvc随笔 - 怎样在控件中嵌套 HTML的更多相关文章

  1. FineUIMvc随笔(2)怎样在控件中嵌套 HTML

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 用户需求 有网友在<FineUI总群1>问这么一个问题:怎么把 HTML 嵌套在控件中? 这是很多刚学习 FineU ...

  2. ASP.NET- 查找Repeater控件中嵌套的控件

    如何在Repeater的HeaderTemplate和FooterTemplate模板中寻找控件?在Repeater的ItemTemplate模板中的控件,我们可以用Items属性来遍历行并用Find ...

  3. .net dataGridView当鼠标经过时当前行背景色变色;然后【给GridView增加单击行事件,并获取单击行的数据填充到页面中的控件中】

    1.首先在前台dataGridview属性中增加onRowDataBound属性事件 2.然后在后台Observing_RowDataBound事件中增加代码 protected void Obser ...

  4. Repeater 控件的嵌套使用

      Repeater 控件的嵌套使用   ItemDataBound:数据绑定的时候(正在进行时)发生,多用在Repeater控件嵌套,对子Repeater控件进行数据绑定及模板列中统计列的计算处理等 ...

  5. PyQt(Python+Qt)学习随笔:布局控件layout的layoutSizeConstraint属性不起作用的问题解决办法

    在<PyQt(Python+Qt)学习随笔:布局控件layout的layoutSizeConstraint属性>中介绍layout的layoutSizeConstraint属性后,反复测试 ...

  6. 在MonthCalendar控件中选中日期

    Calendar.MONTH Calendar now=Calendar.getInstance();System.out.print(now.get(Calendar.MONTH));得到的月份少1 ...

  7. winform窗体(六)——DataGridView控件及通过此控件中实现增删改查

    DataGridView:显示数据表,通过此控件中可以实现连接数据库,实现数据的增删改查 一.后台数据绑定:    List<xxx> list = new List<xxx> ...

  8. Winform(DataGridView)控件及通过此控件中实现增删改查

    DataGridView:显示数据表,通过此控件中可以实现连接数据库,实现数据的增删改查 一.后台数据绑定:    List<xxx> list = new List<xxx> ...

  9. 服务器控件中使用<%#...>, JS和html控件中使用<%=...>

    //在服务器控件的属性中,需要用<%#...>来绑定其他控件的ID, 并且要在页面初始方法中,执行Page.DataBind(); <asp:ImageButton ID=" ...

随机推荐

  1. UVa 270 & POJ 1118 - Lining Up

    题目大意:给一些点,找出一条直线使尽可能多的点在这条直线上,求这条直线上点的个数. 以每一个点为原点进行枚举,求其它点的斜率,斜率相同则说明在一条直线上.对斜率排序,找出斜率连续相等的最大长度. #i ...

  2. centos command中 * . 的重要性

    錯誤    cp /home/test1/* /home/test2/ –a          用參數*將不可以複製linux中.開頭的隱藏文件 正確    cp /home/test1/. home ...

  3. 关于金额,重量等浮点数的数据库字段设计(用Int,Long代替浮点数计算)

    金额.重量.成绩等数据库字段推荐使用int或bigint类型. 通常我们数据库设计中金额,重量等涉及到小数位的字段会用float或decimal,mysql还可以用double,但往往每笔金额的计算我 ...

  4. Delphi中ShellExecute的妙用

    ShellExecute的功能是运行一个外部程序(或者是打开一个已注册的文件.打开一个目录.打印一个文件等等),并对外部程序有一定的控制.有几个API函数都可以实现这些功能,但是在大多数情况下Shel ...

  5. magento1.x 运行在 php7 优惠券的问题

    diff --git app/code/core/Mage/Sales/etc/config.xml index 5bb43d7..7db62ca 100644 --- app/code/core/M ...

  6. shell 命令合并文本

    之前想把代码打印出来看来着,后来合并完之后放在word里发现有2000多页,然后放弃了~anyway,这个命令还是挺有用的. 比如我有文本a001.dat, a002.dat, a003.dat .. ...

  7. IOS苹果手机上 iframe 滚动失效条问题,局部滚动开启弹性滚动!

    html:bo<div class="scroll-wrapper"> <iframe src=""></iframe> & ...

  8. Spring 集成 Dubbo

    Duboo是什么 DUBBO是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,是阿里巴巴SOA服务化治理方案的核心框架,每天为2,000+个服务提供3,000,000,000+次 ...

  9. DailyTick 开发实录 —— UI 设计

    上次的文章中描述了 DailyTick 的设计理念.经过两周左右的设计和开发,现在 DailyTick 的主要 UI 已经完成了原型的设计和初步的实现.既然是原型,当然看起来就有点粗糙. 主 UI 主 ...

  10. 【Spring-web】AsyncRestTemplate源码学习

    2017-01-23 by 安静的下雪天 http://www.cnblogs.com/quiet-snowy-day/p/6343347.html 本篇概要 类说明 类图 简单例子 精辟的内部类 类 ...