ASP.NET MVC 2最简单生成动态表单思路 -技术开发专区

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

作者：朱祁林编辑：胡铭娅 2010-07-30 09:31 来源：海纳

【IT168 技术开发】在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:

　　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的验证的脚本。当然还有很多的扩展和完善。　　

关注我们