ASP.NET MVC 2生成动态表单的一种最简单的思路

     在BPM、OA等系统中，都会存在一个表单设计器。有些是通过操作gridview来完成一个表单的设计；有些是通过类似VS拖拽的方法完成一个表单的设计。很明显后面一种优越于前面一种。无论是哪种，最后都会产生一些XML之类的表单结构的数据。

这篇文章将讲述，在表单设计器设计好表单之后，在ASP.NET MVC中如何将表单结构的xml转换成实际应用系统中的表单。看下面一个xml文件，我们假设它是由一个表单设计器设计出来的。

<span style="color: blue;"><?</span><span style="color: #a31515;">xml </span><span style="color: red;">version</span><span style="color: blue;">=</span>"<span style="color: blue;">1.0</span>" <span style="color: red;">encoding</span><span style="color: blue;">=</span>"<span style="color: blue;">utf-8</span>" <span style="color: blue;">?>
<</span><span style="color: #a31515;">form </span><span style="color: red;">name</span><span style="color: blue;">=</span>"<span style="color: blue;">form1</span>"<span style="color: blue;">>
    <</span><span style="color: #a31515;">field </span><span style="color: red;">type</span><span style="color: blue;">=</span>"<span style="color: blue;">text</span>" <span style="color: red;">name </span><span style="color: blue;">=</span>"<span style="color: blue;">firstname</span>" <span style="color: red;">class </span><span style="color: blue;">=</span>"<span style="color: blue;">textbox</span>" <span style="color: red;">left</span><span style="color: blue;">=</span>"<span style="color: blue;">300</span>"  <span style="color: red;">top</span><span style="color: blue;">=</span>"<span style="color: blue;">200</span>"<span style="color: blue;">></span>朱<span style="color: blue;"></</span><span style="color: #a31515;">field</span><span style="color: blue;">>
    <</span><span style="color: #a31515;">field </span><span style="color: red;">type</span><span style="color: blue;">=</span>"<span style="color: blue;">text</span>" <span style="color: red;">name </span><span style="color: blue;">=</span>"<span style="color: blue;">lastname</span>" <span style="color: red;">class </span><span style="color: blue;">=</span>"<span style="color: blue;">textbox</span>" <span style="color: red;">left</span><span style="color: blue;">=</span>"<span style="color: blue;">700</span>"  <span style="color: red;">top</span><span style="color: blue;">=</span>"<span style="color: blue;">200</span>"<span style="color: blue;">></span>祁林<span style="color: blue;"></</span><span style="color: #a31515;">field</span><span style="color: blue;">>
    <</span><span style="color: #a31515;">field </span><span style="color: red;">type</span><span style="color: blue;">=</span>"<span style="color: blue;">text</span>" <span style="color: red;">name </span><span style="color: blue;">=</span>"<span style="color: blue;">sex</span>" <span style="color: red;">class </span><span style="color: blue;">=</span>"<span style="color: blue;">textbox</span>" <span style="color: red;">left</span><span style="color: blue;">=</span>"<span style="color: blue;">300</span>"  <span style="color: red;">top</span><span style="color: blue;">=</span>"<span style="color: blue;">240</span>"<span style="color: blue;">></span>男<span style="color: blue;"></</span><span style="color: #a31515;">field</span><span style="color: blue;">>
    <</span><span style="color: #a31515;">field </span><span style="color: red;">type</span><span style="color: blue;">=</span>"<span style="color: blue;">text</span>" <span style="color: red;">name </span><span style="color: blue;">=</span>"<span style="color: blue;">age</span>" <span style="color: red;">class </span><span style="color: blue;">=</span>"<span style="color: blue;">textbox</span>" <span style="color: red;">left</span><span style="color: blue;">=</span>"<span style="color: blue;">700</span>"  <span style="color: red;">top</span><span style="color: blue;">=</span>"<span style="color: blue;">240</span>"<span style="color: blue;">></span>24<span style="color: blue;"></</span><span style="color: #a31515;">field</span><span style="color: blue;">>
</</span><span style="color: #a31515;">form</span><span style="color: blue;">>
</span>

<a href="http://11011.net/software/vspaste"></a>

下面，我将把它转化成实际的asp.net mvc系统中的表单。首先，使用LinqtoXML将上面的XML文件转换成XElement，代码如下。在控制器中最好不要直接读取文件，这里为了简单直观起见，就直接在Controller中读取xml文件了。

[<span style="color: #2b91af;">AcceptVerbs</span>(<span style="color: #2b91af;">HttpVerbs</span>.Get)]
<span style="color: blue;">public </span><span style="color: #2b91af;">ActionResult </span>Index()
{
    <span style="color: #2b91af;">XElement </span>xml = <span style="color: #2b91af;">XElement</span>.Load(Server.MapPath(<span style="color: #a31515;">"~/App_Data/form1.xml"</span>));
    ViewData[<span style="color: #a31515;">"xml"</span>] = xml;
    <span style="color: blue;">return </span>View();
}
   接着我们将在View中，将上面的XElement转换成真正的HTML表单。

在表单设计器中很难的一块就是控件的定位。从我提供的XML中可以看到，它里面是存放了位置信息的。这使我们想到了div的绝对布局。这个方法在这种情况下非常的适合。

  下面，我定义两个字符串模板：

<span style="color: blue;">string </span>label = <span style="color: #a31515;">" <div  style=/"left: {0}px; position: absolute; top: {1}px/">{2}</div>"</span>;
<span style="color: blue;">string </span>input = <span style="color: #a31515;">"<input name=/"{0}/" type=/"{1}/"  class=/"{2}/"   style=/"left: {3}px; position: absolute; top: {4}px/" value=/"{5}/"  />"</span>;

<a href="http://11011.net/software/vspaste"></a><span style="font-family: Courier New;"> label用于显示文本信息，input用于显示表单上的value。下面通过循环产生html脚本。</span>

<span style="color: #2b91af;">StringBuilder </span>sb = <span style="color: blue;">new </span><span style="color: #2b91af;">StringBuilder</span>();
sb.Append(<span style="color: #a31515;">"    <div style=/"height:200px/"> "</span>);
<span style="color: blue;">foreach</span>(<span style="color: #2b91af;">XElement </span>f <span style="color: blue;">in </span>xml.Elements()) 
{
  sb.Append(<span style="color: blue;">string</span>.Format(label, <span style="color: blue;">int</span>.Parse(f.Attribute(<span style="color: #a31515;">"left"</span>).Value) - 60, f.Attribute(<span style="color: #a31515;">"top"</span>).Value, f.Attribute(<span style="color: #a31515;">"name"</span>).Value));
  sb.Append(<span style="color: blue;">string</span>.Format(input, f.Attribute(<span style="color: #a31515;">"name"</span>).Value, f.Attribute(<span style="color: #a31515;">"type"</span>).Value, f.Attribute(<span style="color: #a31515;">"class"</span>).Value, f.Attribute(<span style="color: #a31515;">"left"</span>).Value, f.Attribute(<span style="color: #a31515;">"top"</span>).Value, f.Value));
}
sb.Append(<span style="color: #a31515;">"</div > "</span>);

<a href="http://11011.net/software/vspaste"></a><span style="font-family: Courier New;"> 最后通过Response.Write(sb.ToString())输出。</span>

<span style="font-family: Courier New;"> 整个View的代码如下：</span>

<div>

<span style="background: yellow;"><%</span><span style="color: blue;">@ </span><span style="color: maroon;">Page </span><span style="color: red;">Language</span><span style="color: blue;">="C#" </span><span style="color: red;">MasterPageFile</span><span style="color: blue;">="~/Views/Shared/Site.Master" </span><span style="color: red;">Inherits</span><span style="color: blue;">="System.Web.Mvc.ViewPage" </span><span style="background: yellow;">%>

</span><span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">Content </span><span style="color: red;">ID</span><span style="color: blue;">="Content1" </span><span style="color: red;">ContentPlaceHolderID</span><span style="color: blue;">="TitleContent" </span><span style="color: red;">runat</span><span style="color: blue;">="server">
    </span>Home Page
<span style="color: blue;"></</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">Content</span><span style="color: blue;">>
<</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">Content </span><span style="color: red;">ID</span><span style="color: blue;">="Content2" </span><span style="color: red;">ContentPlaceHolderID</span><span style="color: blue;">="MainContent" </span><span style="color: red;">runat</span><span style="color: blue;">="server">
</span><span style="background: yellow;"><%</span> <span style="color: #2b91af;">XElement </span>xml = (<span style="color: #2b91af;">XElement</span>)ViewData[<span style="color: #a31515;">"xml"</span>]; <span style="background: yellow;">%></span> 
 <span style="background: yellow;"><%</span>Html.BeginForm(); <span style="background: yellow;">%></span>  

   <span style="background: yellow;"><%
</span>   <span style="color: blue;">string </span>label = <span style="color: #a31515;">" <div  style=/"left: {0}px; position: absolute; top: {1}px/">{2}</div>"</span>;
   <span style="color: blue;">string </span>input = <span style="color: #a31515;">"<input name=/"{0}/" type=/"{1}/"  class=/"{2}/"   style=/"left: {3}px; position: absolute; top: {4}px/" value=/"{5}/"  />"</span>;
   <span style="color: #2b91af;">StringBuilder </span>sb = <span style="color: blue;">new </span><span style="color: #2b91af;">StringBuilder</span>();
   sb.Append(<span style="color: #a31515;">"    <div style=/"height:200px/"> "</span>);
   <span style="color: blue;">foreach</span>(<span style="color: #2b91af;">XElement </span>f <span style="color: blue;">in </span>xml.Elements()) 
   {
     sb.Append(<span style="color: blue;">string</span>.Format(label, <span style="color: blue;">int</span>.Parse(f.Attribute(<span style="color: #a31515;">"left"</span>).Value) - 60, f.Attribute(<span style="color: #a31515;">"top"</span>).Value, f.Attribute(<span style="color: #a31515;">"name"</span>).Value));
     sb.Append(<span style="color: blue;">string</span>.Format(input, f.Attribute(<span style="color: #a31515;">"name"</span>).Value, f.Attribute(<span style="color: #a31515;">"type"</span>).Value, f.Attribute(<span style="color: #a31515;">"class"</span>).Value, f.Attribute(<span style="color: #a31515;">"left"</span>).Value, f.Attribute(<span style="color: #a31515;">"top"</span>).Value, f.Value));
   }
     sb.Append(<span style="color: #a31515;">"</div > "</span>);
     Response.Write(sb.ToString());
    <span style="background: yellow;">%></span> 
 <span style="color: blue;"><</span><span style="color: maroon;">input </span><span style="color: red;">type</span><span style="color: blue;">="submit" </span><span style="color: red;">value</span><span style="color: blue;">="Submit!" />  
 </span><span style="background: yellow;"><%</span>Html.EndForm(); <span style="background: yellow;">%></span> 
<span style="color: blue;"></</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">Content</span><span style="color: blue;">>
</span>

效果：

1、显示XML表单：

<img style="display: inline; border-width: 0px;" title="ggg" src="http://images.cnblogs.com/cnblogs_com/zhuqil/WindowsLiveWriter/ASP.NETMVC2_5E2/ggg_thumb.jpg" border="0" alt="ggg" width="823" height="322">

<span style="font-family: Courier New;">2、</span>提交表单：

<img style="display: inline; border-width: 0px;" title="hhh" src="http://images.cnblogs.com/cnblogs_com/zhuqil/WindowsLiveWriter/ASP.NETMVC2_5E2/hhh_thumb.jpg" border="0" alt="hhh" width="818" height="194"> <a href="http://11011.net/software/vspaste"></a>



总结：这个是一种通过表单设计器产生动态表单最简单的方式。也是非常通用的一种方式。在产生html的时候，你可以带上Jquery的验证的脚本。当然还有很多的扩展和完善。点击下载本文代码。

求助与讨论：开发表单设计器是我心里的一块石头，估计也是很多正在开发BPM、OA之类童鞋心中的一块石头。最近一直在思考这个问题，从这篇文章可以看到，我我设计的表单设计器上的控件可以随意拖放的。在生成HTML的时候，使用div的绝对布局，打算朝这个方向做，不知道可行否。下面是我想到的一些问题：

1、采用什么技术或者模式开发表单设计器；2、如何最好的定位；3、在设计器上如何操作表格以及主从表；4、数据源的绑定；5、数据的验证；

如果你开发过表单设计器、或者有这方面的研究和心得、或者有这方面的兴趣、欢迎在此一起讨论。