在BPM、OA等系統中，都會存在一個表單設計器。有些是通過操作gridview來完成一個表單的設計；有些是通過類似VS拖拽的方法完成一個表單的設計。很明顯后面一種優越于前面一種。無論是哪種，最后都會產生一些XML之類的表單結構的數據。

　　這篇文章將講述，在表單設計器設計好表單之后，在ASP.NET MVC中如何將表單結構的xml轉換成實際應用系統中的表單。看下面一個xml文件，我們假設它是由一個表單設計器設計出來的。

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

　　下面，我將把它轉化成實際的asp.net mvc系統中的表單。首先，使用LinqtoXML將上面的XML文件轉換成XElement，代碼如下。在控制器中最好不要直接讀取文件，這里為了簡單直觀起見，就直接在Controller中讀取xml文件了。

[AcceptVerbs(HttpVerbs.Get)]
public ActionResult Index()
{
    XElement xml = XElement.Load(Server.MapPath("~/App_Data/form1.xml"));
    ViewData["xml"] = xml;
    return View();
}   

　　接著我們將在View中，將上面的XElement轉換成真正的HTML表單。

　　在表單設計器中很難的一塊就是控件的定位。我從我提供的XML中可以看到，它里面是存放了位置信息的。這使我們想到了div的絕對布局。這個方法在這種情況下非常的適合。

　　下面，我定義兩個字符串模板：

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

　　label用于顯示文本信息，input用于顯示表單上的value。下面通過循環產生html腳本。

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

　　最后通過Response.Write(sb.ToString())輸出。

　　整個View的代碼如下：

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<% XElement xml = (XElement)ViewData["xml"]; %> 
 <%Html.BeginForm(); %>  

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

　　效果：

　　1、顯示XML表單：

　　2、提交表單：

　　總結：這個是一種通過表單設計器產生動態表單最簡單的方式。也是非常通用的一種方式。在產生html的時候，你可以帶上Jquery的驗證的腳本。當然還有很多的擴展和完善。點擊下載本文代碼。

　　求助與討論：開發表單設計器是我心里的一塊石頭，估計也是很多正在開發BPM、OA之類童鞋心中的一塊石頭。最近一直在思考這個問題，從這篇文章可以看到，我我設計的表單設計器上的控件可以隨意拖放的。在生成HTML的時候，使用div的絕對布局，打算朝這個方向做，不知道可行否。下面是我想到的一些問題：

　　1、采用什么技術或者模式開發表單設計器；2、如何最好的定位；3、在設計器上如何操作表格以及主從表；4、數據源的綁定；5、數據的驗證；

　　如果你開發過表單設計器、或者有這方面的研究和心得、或者有這方面的興趣、歡迎在此一起討論。