asp.net 动态创建DIV

需求：用户添加角色时，需要添加兼职。兼职角色，动态添加。角色信息从数据库中读取。

前台代码：动态添加

<div title="兼职">
                        <div id="divAddElseRole">
                            <div style="margin-top: 10px;">
                                <label style="margin-left: 55px;">所属组织:</label>
                                <label id="currentAddOrganization">教育学院</label>
                                <label style="margin-left: 85px;">当前角色:</label>
                                <label id="currentAddRole">管理员</label>
                                <a href="#" class="easyui-linkbutton" style="margin-left: 90px;" data-options="plain:true" onclick="AddElseRole()">【添加兼职】</a>
                                <hr />
                            </div>
                        </div>
                    </div>

//添加用户时，添加兼职
        function AddElseRole() {
            //获得现有的下拉框
            var ElseRoles = document.getElementsByClassName("selectElseRoles");
            //如果没有下拉框，则select从0开始编号
            var roleData;
            var message = document.getElementById("WarnMessage");
            if (ElseRoles.length == 0) {
                $("#divAddElseRole").append("<div style='margin-top:5px;margin-bottom:5px;'><label style='margin-left:60px;'>兼职角色</label> <select class='selectElseRoles' id ='selectElseRole1' style='width:134px;height:20px;margin-left:110px;' onchange='changeElseRole(this)'></select>  <a style='margin-left:85px;cursor:pointer' onclick='DeleteElseRole(this)'>【删除】</a>  <hr /></div>");
                $('#selectElseRole1').empty();
                $('<option value=\"0\">请选择</option>').appendTo($('#selectElseRole1'));
                $.ajax({
                    url: "/User/LoadItemsRole",
                    dataType: "json",
                    data: { userId: userId },
                    success: function (data) {
                        $.each(data, function (i, item) {
                            roleData = data;
                            $("<option></option>").val(item["Value"]).text(item["Text"]).appendTo($('#selectElseRole1'));
                        });
                    }
                });
            } else {
                //如果上一个下拉框没有选择兼职，则不让其添加下一个下拉框
                if (ElseRoles[ElseRoles.length - 1].selectedIndex == 0) {
                    message.innerHTML = "<span style='font-size: 15px'>请选择兼职！</span>";
                    $("#dlgWarn").dialog("open");
                    return;
                };
                //添加的下拉框的编号。从最后一个下拉框开始累加
                var intBianHao = parseInt(ElseRoles[ElseRoles.length - 1].id.substring(14));
                var bianhao = (intBianHao + 1).toString();
                $("#divAddElseRole").append("<div style='margin-top:5px;margin-bottom:5px;'><label style='margin-left:60px;'>兼职角色</label> <select class='selectElseRoles' id ='selectElseRole" + bianhao + "' style='width:134px;height:20px;margin-left:110px;' onchange='changeElseRole(this)'></select>  <a style='margin-left:85px;cursor:pointer' onclick='DeleteElseRole(this)'>【删除】</a>  <hr /></div>");
                var selectElseRoleId = "selectElseRole" + bianhao;
                $('#' + selectElseRoleId).empty();
                $('<option value=\"0\">请选择</option>').appendTo($('#' + selectElseRoleId));
                $.ajax({
                    url: "/User/LoadItemsRole",
                    dataType: "json",
                    data: { userId: userId },
                    success: function (data) {
                        $.each(data, function (i, item) {
                            $("<option></option>").val(item["Value"]).text(item["Text"]).appendTo($('#' + selectElseRoleId));
                        });
                    }
                });
            };
        }

 //删除兼职
        function DeleteElseRole(o) {
            o.parentNode.parentNode.removeChild(o.parentNode);
        }

用户信息存到数据库：

//点击保存，将用户添加到数据库中
        function saveAddUser() {
            var userLoadName = (document.getElementById('userAddLoadName').value).trim();
            var userRealName = (document.getElementById('userAddRealName').value).trim();
            var userPassword = (document.getElementById('userAddPassword').value).trim();
            var userOrganization = document.getElementById("selectOrganizationId").value;
            var selectUserRole = document.getElementById('selectAddUserRole').value;
            var userTel = document.getElementById('userAddTel').value;
            var userEmail = document.getElementById('userAddEmail').value;
            var userElseRoles = document.getElementsByClassName("selectElseRoles");
            var userElseRole = "";
            if (userElseRoles.length <= 0) {
                userElseRole = "";
            } else {
                for (var i = 0; i < userElseRoles.length; i++) {
                    userElseRole += userElseRoles[i].value + ",";
                };
            };
            var message = document.getElementById("DataGridMessage");
            $.ajax({
                type: "post",
                url: "/User/AddUser/",
                data: { "userLoadName": userLoadName, "userRealName": userRealName, "userPassword": userPassword, "userOrganization": userOrganization, "userTel": userTel, "userEmail": userEmail, "selectUserRole": selectUserRole, "userElseRole": userElseRole },
                traditional: true,
                success: function (isAdd) {
                    if (isAdd) {
                        $('#dlgAddUser').dialog('close');
                        //$('#dg').datagrid('reload');

                        message.innerHTML = "<span style='font-size: 15px'>添加成功！</span>";
                        $("#dlgDataGrid").dialog("open");
                    } else {
                        message.innerHTML = "<span style='font-size: 15px'>添加失败！</span>";
                        $("#dlgDataGrid").dialog("open");
                    }
                }
            });
        }

#region 添加用户
        public bool AddUser()
        {
            //通过工厂获得用户服务接口
            IUser iuser = ServiceFactory.GetUserService();
            IAllUser iAllUser = ServiceFactory.GetAllUserService();

            string schoolNo = "144421";
            string systemName = "authority";
            
            //实例化用户实体
            User user = new User()
            {
                UserId = System.Guid.NewGuid(),
                UserName = Request["userLoadName"],
                RealName = Request["userRealName"],
                Password = Request["userPassword"],
                OrgId = new Guid(Request["userOrganization"]),
                Tel = Request["userTel"],
                Email = Request["userEmail"]
            };
            string selectUserRole = Request["selectUserRole"];
            string userRoleId = Request["userElseRole"];
            string[] userRoleIds;
            if (userRoleId != "")
            {
                userRoleIds = userRoleId.Split(',');
            }
            else
            {
                userRoleIds = null;
            };
            iAllUser.Add(user, schoolNo, systemName);
            bool isAdd = iuser.AddUser(user, selectUserRole, userRoleIds);
            
            return isAdd;
        }
        #endregion