ASP.NET MVC 2產生動態表單的一種最簡單的思路

   在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的驗證的指令碼。當然還有很多的擴充和完善。點擊下載本文代碼。

後話：從這篇文章可以看到，打算設計的表單設計器上的控制項可以隨意拖放的，位置隨意擺設的。在產生HTML的時候，使用div的絕對布局，打算朝這個方向做，不知道可行否。