实现目的：通常在项目中，编辑页面在前后台需要一个一个框赋值，取值操作，小伙伴们普遍都会感觉繁琐，麻烦.；
实现思路：利用json对象化键值的思想；
好处：方便快速开发，提高开发效率，减少重复性代码；
缺点：还不完善，只支持文本框，复选框，下拉框几种控件；
根本原因：纯粹是为了学习与交流；
示例：只要传一个对象即可获得和给下面的控件赋值；
主要扩展代码：
(function ($) { $.fn.setValues = function (options) { var obj = JSON.parse(options); $("input[type='text'][datakey]").each(function () { $this = $(this); $this.val(obj[$this.attr("datakey")]); }); $("input[type='checkbox'][datakey]").each(function () { $this = $(this); $this.attr("checked", obj[$this.attr("datakey")]); }); $("select[datakey]").each(function () { $this = $(this); $nationtype = obj[$this.attr("datakey")]; var str = ""; $this.find("option[value='" + $nationtype + "']").attr("selected", true); }); } $.fn.getValues = function () { var objValues = new Object(); $("input[type='text'][datakey]").each(function () { $this = $(this); objValues[$this.attr("datakey")] = $this.val(); }); $("input[type='checkbox'][datakey]").each(function () { $this = $(this); objValues[$this.attr("datakey")] = $this.attr("checked") == "checked" ? true : false; }); return JSON.stringify(objValues); } })(jQuery);
测试页面代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="FormEditor.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>FormEditor.Demo</title> <script src="Scripts/ajaxhelper.js"></script> <script src="Scripts/jquery-1.9.1.js"></script> <script src="Scripts/formEditor.js"></script> <script> $(document).ready(function () { ajaxmethod('Handler/UsersHandler.ashx?actiontype=getnations', function (data) { var $obj = JSON.parse(data); $("select[datakey]").each(function () { $this = $(this); var str = ""; for (var i = 0; i < $obj.length; i++) { $objson = $obj[i]; str += "<option value='" + $objson["Code"] + "'>" + $objson["Name"] + "</option>"; } $this.append(str); }); ajaxmethod("Handler/UsersHandler.ashx?actiontype=getusers", function (data) { //通过插件方法赋值-参数为json对象 $(this).setValues(data); }); }); //通过插件方法取值-获得的结果为json对象 //getValues(); }); function getValues() { return alert($(this).getValues()); } </script> </head> <body> <form id="form1" runat="server"> <div class="formeditor"> 用户名：<input id="Text1" type="text" datakey="Name" /><br /> <br /> 密码：<input id="Text2" type="text" datakey="Pass" /><br /> <br /> 邮箱：<input id="Text3" type="text" datakey="Email" /><br /> <br /> 启用：<input id="Text4" type="checkbox" datakey="IsUse" /><br /> 民族：<select id="sel1" datakey="NationType"></select> <%-- 性别：<input id="Radio1" type="radio" datakey="rdoMale" />男 <input id="Radio2" type="radio" datakey="rdoFeMale" />女<br />--%> <br /> <br /> <input id="btnSave" type="button" value="保存" /><br /> </div> </form> </body> </html>
Hanlder.ashx 文件代码
using System; using System.Collections.Generic; using System.Linq; using System.Web; using Newtonsoft.Json; namespace FormEditor.Handler { /// <summary> /// UsersHandler 的摘要说明 /// </summary> public class UsersHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string actiontype = context.Request.QueryString["actiontype"]; switch (actiontype) { case "getusers": context.Response.Write(JsonConvert.SerializeObject(GetUser())); break; case "getnations": context.Response.Write(JsonConvert.SerializeObject(GetNations())); break; default: break; } } private List<Nationality> GetNations() { List<Nationality> Nation = new List<Nationality>(); Nationality n1 = new Nationality() { Code = 1, Name = "汉族" }; Nationality n2 = new Nationality() { Code = 2, Name = "回族" }; Nation.Add(n1); Nation.Add(n2); return Nation; } private Users GetUser() { Users users = new Users() { ID = 1, Email = "jackandmary@qq.com", Name = "jack", Pass = "123", Sex = 1, IsUse = false, NationType = 2 }; return users; } public bool IsReusable { get { return false; } } } }
实体类代码：
public class Users
{
public Users() { }
public int ID { get; set; }
public string Name { get; set; }
public string Pass { get; set; }
public int Sex { get; set; }
public string Email { get; set; }
public bool IsUse { get; set; }
public int NationType { get; set; }
}
public class Nationality
{
public int Code { get; set; }
public string Name { get; set; }
}
说明：暂时就多说了。
PS：楼主技术积累比较浅，但是一直保持着浓厚的兴趣，现在纠结的是对jquery的源码基本不懂，想要研究却不知道从哪里下手，再摸索。
这个功能很简单，但是楼主还是从0点开始到现在花了4个多小时，完成了一部分，以后再往更深层次优化吧，希望可以为一些新手朋友带来一点帮助！