|
在BPM、OA等系統(tǒng)中,都會存在一個表單設(shè)計器。有些是通過操作gridview來完成一個表單的設(shè)計;有些是通過類似VS拖拽的方法完成一個表單的設(shè)計。很明顯后面一種優(yōu)越于前面一種。無論是哪種,最后都會產(chǎn)生一些XML之類的表單結(jié)構(gòu)的數(shù)據(jù)。
這篇文章將講述,在表單設(shè)計器設(shè)計好表單之后,在ASP.NET MVC中如何將表單結(jié)構(gòu)的xml轉(zhuǎn)換成實際應(yīng)用系統(tǒng)中的表單??聪旅嬉粋€xml文件,我們假設(shè)它是由一個表單設(shè)計器設(shè)計出來的。
<?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>
下面,我將把它轉(zhuǎn)化成實際的ASP.NET mvc系統(tǒng)中的表單。首先,使用LinqtoXML將上面的XML文件轉(zhuǎn)換成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轉(zhuǎn)換成真正的HTML表單。
在表單設(shè)計器中很難的一塊就是控件的定位。我從我提供的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。下面通過循環(huán)產(chǎn)生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技術(shù):ASP.NET MVC 2生成動態(tài)表單的一種最簡單的思路,轉(zhuǎn)載需保留來源!
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯(lián)系我們修改或刪除,多謝。