|
在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>
NET技術:ASP.NET MVC 2生成動態表單的一種最簡單的思路,轉載需保留來源!
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。