利用ascx输出knockoutjs的模板

项目里面的UI模板在一个页面中有2K多行了.需要增加新的UI样式.问题来了.加上js代码,几乎是变成了不可维护的状态.增加和修改都需要用ctrl+f的方式找到对应的模板,然后进行处理.很容易出错.突然想到了ascx,可以很方便的在apsx上面控制是否输出.那就用它来做吧.但是有一点不同的是,只有ascx文件,没有对应的.cs文件.对应的.cs文件是另外继承了usercontroll类的文件.不需要加入新的ascx还要编译.一个demo:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="~/wx/uibase/MyUserControll.cs" Inherits="WJWXWeb.wx.uibase.MyUserControll" %>

<script type="text/template" id="editormap-template">
<div class="closeModel" data-bind="click: $root.closeMe">
<span class="myicon">×</span>
</div>
<div>
<div id="modalcontent">
<div class="content" style="background-color: #f5f5f5;">
<div class="orderheader">
<div class="ui-grid">
<div class="ui-block-a">
<img src="../images/landmark.png" />
</div>
<div class="ui-block-b" style="height: 34px; line-height: 34px;">
<span data-bind="text: $root.orderinfo.mapaddress">hello word</span>
</div>
</div>
</div>
<div style="padding: 10px; background-color: #fff;">
<table style="width: 100%;">
<tr style="height: 55px; border-bottom: 1px solid #f2f2f2;">
<td style="width: 60px">详细地址</td>
<td>
<input type="text" data-bind="textInput: address" placeholder="A栋27楼207室" style="margin: 2px; height: 100%; width: 100%; margin: 0; border: none;" /></td>
<td style="color: red;">*</td>
</tr>
<tr style="height: 55px; border-bottom: 1px solid #f2f2f2;">
<td style="width: 60px">联系电话</td>
<td>
<input type="text" data-bind="textInput: ordertel" style="margin: 2px; height: 100%; width: 100%; margin: 0; border: none;" /></td>
<td style="color: red;">*</td>
</tr>
<tr style="display: none;">
<td>联系人</td>
<td>
<input type="text" data-bind="textInput: orderman" style="margin: 2px; height: 100%; width: 100%" /></td>
<td style="color: red;">*</td>
</tr>
</table>
</div>
</div>
<div class="bar bar-standard bar-footer mybar">
<a class="pull-right canpay" style="width: 100%;" data-bind="click: SaveAddress">确定</a>
</div>
</div>
</div>
</script>

</script>

aspx页面的代码.

<%@ Register TagPrefix="uiv1" TagName="editormap" Src="~/wx/uiv1/editormap.ascx" %>

输出

<uiv1:editormap runat="server" />

打完收猫.

页面上面有太多的uiv1:editormap和<%@ Register，要是能在cs文件中，动态加载？

public class webpart : System.Web.UI.UserControl
    {
        /// <summary>
        /// 加载数据
        /// </summary>
        /// <param name="datasource"></param>
        /// <param name="datafilter"></param>
        public virtual void ondatainit(object datasource, string datafilter)
        {

        }
    }

page

protected void Page_Load(object sender, EventArgs e)
        {
            var controltemplate = LoadControl("~/webparts/contacts.ascx") as webpart;
            controltemplate.ondatainit(null, Request["id"]??"");
            MyLog.Log(RenderControlAsString(controltemplate));
            MyLog.Log(RenderControlAsString(LoadControl("~/webparts/footer.ascx")));
        }

        public static string RenderControlAsString(Control ctl)
        {
            StringWriter sw = new StringWriter();
            HtmlTextWriter writer = new HtmlTextWriter(sw);
            ctl.RenderControl(writer);
            string str = sw.ToString();
            writer.Close();
            sw.Close();
            return str;
        }

        public static string RenderControlAsString(webpart ctl)
        {
            StringWriter sw = new StringWriter();
            HtmlTextWriter writer = new HtmlTextWriter(sw);
            ctl.RenderControl(writer);
            string str = sw.ToString();
            writer.Close();
            sw.Close();
            return str;
        }

 

布局layout[1....N]webpart

每个webpart包含

datasource 数据源

datafiter 过滤条件

dataloadtype[list/one] 多条一条

 

layout 存储

html片段eg: <webpart datasource='' datafiter='' dataloadtype='list' />