一起谈.NET技术,ASP.NET MVC 2生成动态表单的一种最简单的思路

简介:   在BPM、OA等系统中,都会存在一个表单设计器。有些是通过操作gridview来完成一个表单的设计;有些是通过类似VS拖拽的方法完成一个表单的设计。很明显后面一种优越于前面一种。无论是哪种,最后都会产生一些XML之类的表单结构的数据。

  在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表单:

ggg

  2、提交表单:

hhh

  总结:这个是一种通过表单设计器产生动态表单最简单的方式。也是非常通用的一种方式。在产生html的时候,你可以带上Jquery的验证的脚本。当然还有很多的扩展和完善。点击下载本文代码

  求助与讨论:开发表单设计器是我心里的一块石头,估计也是很多正在开发BPM、OA之类童鞋心中的一块石头。最近一直在思考这个问题,从这篇文章可以看到,我我设计的表单设计器上的控件可以随意拖放的。在生成HTML的时候,使用div的绝对布局,打算朝这个方向做,不知道可行否。下面是我想到的一些问题:

  1、采用什么技术或者模式开发表单设计器;2、如何最好的定位;3、在设计器上如何操作表格以及主从表;4、数据源的绑定;5、数据的验证;

  如果你开发过表单设计器、或者有这方面的研究和心得、或者有这方面的兴趣、欢迎在此一起讨论。

目录
相关文章
|
2月前
|
开发框架 前端开发 .NET
VB.NET中如何利用ASP.NET进行Web开发
在VB.NET中利用ASP.NET进行Web开发是一个常见的做法,特别是在需要构建动态、交互式Web应用程序时。ASP.NET是一个由微软开发的开源Web应用程序框架,它允许开发者使用多种编程语言(包括VB.NET)来创建Web应用程序。
59 5
|
2月前
|
开发框架 前端开发 JavaScript
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
43 7
|
3月前
|
开发框架 JSON .NET
ASP.NET Core 标识(Identity)框架系列(三):在 ASP.NET Core Web API 项目中使用标识(Identity)框架进行身份验证
ASP.NET Core 标识(Identity)框架系列(三):在 ASP.NET Core Web API 项目中使用标识(Identity)框架进行身份验证
|
2月前
|
存储 开发框架 前端开发
ASP.NET MVC 迅速集成 SignalR
ASP.NET MVC 迅速集成 SignalR
61 0
|
3月前
|
开发框架 .NET 开发工具
【Azure 应用服务】App Service 的.NET Version选择为.NET6,是否可以同时支持运行ASP.NET V4.8的应用呢?
【Azure 应用服务】App Service 的.NET Version选择为.NET6,是否可以同时支持运行ASP.NET V4.8的应用呢?
|
3月前
|
开发框架 前端开发 .NET
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
49 0
|
3月前
|
开发框架 前端开发 安全
ASP.NET MVC 如何使用 Form Authentication?
ASP.NET MVC 如何使用 Form Authentication?
|
3月前
|
开发框架 .NET 数据库连接
ASP.NET Core 标识(Identity)框架系列(一):如何使用 ASP.NET Core 标识(Identity)框架创建用户和角色?
ASP.NET Core 标识(Identity)框架系列(一):如何使用 ASP.NET Core 标识(Identity)框架创建用户和角色?
|
3月前
|
开发框架 .NET
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
129 0
|
6月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
194 0
下一篇
无影云桌面