问卷调查功能中的题目编辑功能

一、最近做了一个问卷调查模块，感觉问题编辑功能做的还可以，收藏一下，供以后参考。（项目使用的是第三方MVC框架）

二、主要思路：1、前台用jQuery操作，动态控制表单、添加选项。2、为了减少后台拼HTML（不好维护），把一些动态添加的表单内容放在前台，设置style的display为none，但某些HTML还是要在后台拼。

Add页面：

<style type="text/css">
    .tdTitle
    {
        width: 120px;
        text-align: right;
    }
</style>
<link href="~css/EduCss/Int.css" rel="stylesheet" type="text/css" />
<script src="~js/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
<script type="text/javascript">
    var items = "";
    var hasItems = true;

    _run(function () {
        items = "<tr id='trItems'>" + $("#trItems").html() + "</tr>";

        //选择题目类型事件
        $("select[name='edu_QnSubject.TypeId'").change(function () {
            var selText = $(this).find("option:selected").text();
            if ((selText == "单选" || selText == "多选") && !hasItems) {
                $("#trItemsTop").after(items);
                hasItems = true;
            }
            if ((selText != "单选" && selText != "多选") && hasItems) {
                $("#trItems").remove();
                hasItems = false;
            }
        });
    });

    //添加选项
    function addItem() {
        $("#divItems").append($("#divItemContainer").html());
    }

    //删除选项
    function removeItem(obj) {
        $(obj).parent().remove();
    }
</script>
<div style="font-family: 'Microsoft YaHei', serif;">
    <form method="post" action="#{ActionLink}" class="formPanel">
    <div style="overflow: auto;">
        <table style=" 100%; margin: 15px auto;" border="0">
            <tr>
                <td class="tdTitle">
                    <span style="color: Red;">*</span>题目名称:
                </td>
                <td>
                    <input type="text" name="edu_QnSubject.Title" class="SIMPO_Txt_200" class="tipInput"
                        tip="" />
                    <span class="valid" msg="必填" rule="" mode=""></span>
                </td>
            </tr>
            <tr>
                <td class="tdTitle">
                    <span style="color: Red;">*</span>题目类型:
                </td>
                <td>
                    #{edu_QnSubject.TypeId}
                </td>
            </tr>
            <tr>
                <td class="tdTitle">
                    <span style="color: Red;">*</span>题目序号:
                </td>
                <td>
                    <input type="text" name="edu_QnSubject.Sort" class="SIMPO_Txt_200" class="tipInput"
                        tip="" />
                    <span class="valid" msg="必填" rule="" mode=""></span>
                </td>
            </tr>
            <tr id="trItemsTop">
                <td class="tdTitle">
                    题目分值:
                </td>
                <td>
                    <input type="text" name="edu_QnSubject.Score" class="SIMPO_Txt_200" class="tipInput"
                        tip="" />
                </td>
            </tr>
            <tr id="trItems">
                <td class="tdTitle" style="vertical-align: top;">
                    <span style="color: Red;">*</span>题目选项:
                </td>
                <td>
                    <div id="divItems">
                        <div class="divItem" id="divItemTemplate">
                            <input type="text" name="edu_QnSubject.Items" class="SIMPO_Txt_200" style=" 200px;" />
                            <span class="valid" msg="必填" rule="" mode=""></span>
                        </div>
                        <div class="divItem">
                            <input type="text" name="edu_QnSubject.Items" class="SIMPO_Txt_200" style=" 200px;
                                margin-top: 3px;" />
                            <span class="valid" msg="必填" rule="" mode=""></span>
                        </div>
                    </div>
                    <a href="javascript:void(0);" title="添加选项" onclick="addItem()">
                        <img src="~img/add.gif" />添加</a>
                </td>
            </tr>
            <tr>
                <td class="tdTitle">
                    题目正确值:
                </td>
                <td>
                    <input type="text" name="edu_QnSubject.RightVal" class="SIMPO_Txt_200" class="tipInput"
                        tip="" />
                </td>
            </tr>
            <tr>
                <td class="tdTitle">
                    备注:
                </td>
                <td>
                    <textarea name="edu_QnSubject.Remarks" style="height: 50px;  260px;"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td>
                    <input type="submit" value="录入" class="SIMPO_Text_Blue" id="Submit1" />
                    <input type="button" class="SIMPO_Text_Blue" onclick="parent.clearDivEdit()" value="取消" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</div>
<div id="divItemContainer" style="display: none;">
    <div class='divItem'>
        <input type='text' name='edu_QnSubject.Items' class="SIMPO_Txt_200" style=' 200px;
            margin-top: 3px;' /><span class='valid' msg='必填' rule='' mode=''></span><a href='javascript:void(0);'
                title='删除选项' onclick='removeItem(this)'><img src='~img/delete.gif' />删除</a></div>
</div>

 Edit页面：

<style type="text/css">
    .tdTitle
    {
        width: 120px;
        text-align: right;
    }
</style>
<link href="~css/EduCss/Int.css" rel="stylesheet" type="text/css" />
<script src="~js/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
<script type="text/javascript">
    var selText;
    var items = "";
    var hasItems = true;

    _run(function () {
        items = $("#tbodyTrItems").html();
        selText = $("select[name='edu_QnSubject.TypeId'").find("option:selected").text();
        if (selText == "单选" || selText == "多选") {
            hasItems = true;
        }
        else {
            hasItems = false;
        }

        //选择题目类型事件
        $("select[name='edu_QnSubject.TypeId'").change(function () {
            selText = $(this).find("option:selected").text();
            if ((selText == "单选" || selText == "多选") && !hasItems) {
                $("#trItemsTop").after(items);
                hasItems = true;
            }
            if ((selText != "单选" && selText != "多选") && hasItems) {
                $("#trItems").remove();
                hasItems = false;
            }
        });
    });

    //添加选项
    function addItem() {
        $("#divItems").append($("#divItemContainer").html());
    }

    //删除选项
    function removeItem(obj) {
        $(obj).parent().remove();
    }
</script>
<div style="font-family: 'Microsoft YaHei', serif;">
    <form method="post" action="#{ActionLink}" class="formPanel">
    <div style="overflow: auto;">
        <table style=" 100%; margin: 15px auto;" border="0">
            <tr>
                <td class="tdTitle">
                    <span style="color: Red;">*</span>题目名称:
                </td>
                <td>
                    <input type="text" name="edu_QnSubject.Title" class="SIMPO_Txt_200" value="#{edu_QnSubject.Title}"
                        class="tipInput" tip="" />
                    <span class="valid" msg="必填" rule="" mode=""></span>
                </td>
            </tr>
            <tr>
                <td class="tdTitle">
                    <span style="color: Red;">*</span>题目类型:
                </td>
                <td>
                    #{edu_QnSubject.TypeId}
                </td>
            </tr>
            <tr>
                <td class="tdTitle">
                    <span style="color: Red;">*</span>题目序号:
                </td>
                <td>
                    <input type="text" name="edu_QnSubject.Sort" class="SIMPO_Txt_200" value="#{edu_QnSubject.Sort}"
                        class="tipInput" tip="" />
                    <span class="valid" msg="必填" rule="" mode=""></span>
                </td>
            </tr>
            <tr id="trItemsTop">
                <td class="tdTitle">
                    题目分值:
                </td>
                <td>
                    <input type="text" name="edu_QnSubject.Score" class="SIMPO_Txt_200" value="#{edu_QnSubject.Score}"
                        class="tipInput" tip="" />
                </td>
            </tr>
            #{allItems}
            <tr>
                <td class="tdTitle">
                    题目正确值:
                </td>
                <td>
                    <input type="text" name="edu_QnSubject.RightVal" class="SIMPO_Txt_200" value="#{edu_QnSubject.RightVal}"
                        class="tipInput" tip="" />
                </td>
            </tr>
            <tr>
                <td class="tdTitle">
                    备注:
                </td>
                <td>
                    <textarea name="edu_QnSubject.Remarks" style="height: 50px;  260px;">#{edu_QnSubject.Remarks}</textarea>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td>
                    <input type="submit" value="录入" class="SIMPO_Text_Blue" id="Submit1" />
                    <input type="button" class="SIMPO_Text_Blue" onclick="parent.clearDivEdit()" value="取消" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</div>
<table style="display: none;">
    <tbody id="tbodyTrItems">
        <tr id="trItems">
            <td class="tdTitle" style="vertical-align: top;">
                <span style="color: Red;">*</span>题目选项:
            </td>
            <td>
                <div id="divItems">
                    <div class="divItem" id="divItemTemplate">
                        <input type="text" name="edu_QnSubject.Items" class="SIMPO_Txt_200" style=" 200px;" />
                        <span class="valid" msg="必填" rule="" mode=""></span>
                    </div>
                    <div class="divItem">
                        <input type="text" name="edu_QnSubject.Items" class="SIMPO_Txt_200" style=" 200px;
                            margin-top: 3px;" />
                        <span class="valid" msg="必填" rule="" mode=""></span>
                    </div>
                </div>
                <a href="javascript:void(0);" title="添加选项" onclick="addItem()">
                    <img src="~img/add.gif" />添加</a>
            </td>
        </tr>
    </tbody>
</table>
<div id="divItemContainer" style="display: none;">
    <div class='divItem'>
        <input type='text' name='edu_QnSubject.Items' class="SIMPO_Txt_200" style=' 200px;
            margin-top: 3px;' /><span class='valid' msg='必填' rule='' mode=''></span><a href='javascript:void(0);'
                title='删除选项' onclick='removeItem(this)'><img src='~img/delete.gif' />删除</a></div>
</div>

Controller代码：

#region 添加
/// <summary>
/// 添加页面
/// </summary>
public void Add(int qnTemplateId)
{
    set("ActionLink", to(Create, qnTemplateId));
    dropList("edu_QnSubject.TypeId", EnumHelper.GetValTextDic(typeof(SubjectType)), ((int)SubjectType.Single).ToString());
}

/// <summary>
/// 添加
/// </summary>
public void Create(int qnTemplateId)
{
    Edu_QnSubject qnSubject = ctx.PostValue<Edu_QnSubject>();//取表单
    qnSubject.template = edu_QnTemplateService.findById<Edu_QnTemplate>(qnTemplateId); ;
    Result result = edu_QnSubjectService.insert(qnSubject);//保存数据表数据库
    if (result.HasErrors)
    {
        echoError("保存出错");
        return;
    }
    echoToParent(lang("operationSuccess"));
}
#endregion

#region 修改
/// <summary>
/// 编辑
/// </summary>
public void Edit(int id)
{
    set("ActionLink", to(Update, id)); //设置点击提交按钮动作

    Edu_QnSubject qnSubject = edu_QnSubjectService.findById<Edu_QnSubject>(id);

    bind(qnSubject);//绑定数据库中取出的数据

    dropList("edu_QnSubject.TypeId", EnumHelper.GetValTextDic(typeof(SubjectType)), qnSubject.TypeId.ToString());

    #region 拼HTML
    StringBuilder sbHtml = new StringBuilder("");
    if ((SubjectType)qnSubject.TypeId == SubjectType.Single || (SubjectType)qnSubject.TypeId == SubjectType.Multi) // 如果是单选或多选
    {
        sbHtml.Append(@"<tr id='trItems'>
                            <td class='tdTitle' style='vertical-align: top;'>
                                <span style='color: Red;'>*</span>题目选项:
                            </td>
                            <td>
                                <div id='divItems'>");
        string[] items = qnSubject.Items.Split(',');
        for (int i = 0; i < items.Length; i++)
        {
            string item = items[i];
            if (i == 0)
            {
                sbHtml.Append(@"<div class='divItem' id='divItemTemplate'>
                                    <input type='text' name='edu_QnSubject.Items' class='SIMPO_Txt_200'value='" + item + @"' style=' 200px;' />
                                    <span class='valid' msg='必填' rule='' mode=''></span>
                                </div>");
            }
            else if (i == 1)
            {
                sbHtml.Append(@"<div class='divItem'>
                                    <input type='text' name='edu_QnSubject.Items' class='SIMPO_Txt_200' value='" + item + @"' style=' 200px; margin-top:3px;' />
                                    <span class='valid' msg='必填' rule='' mode=''></span>
                                </div>");
            }
            else
            {
                sbHtml.Append(@"<div class='divItem'>
                                    <input type='text' name='edu_QnSubject.Items' class='SIMPO_Txt_200' value='" + item + @"' style=' 200px; margin-top:3px;' />
                                    <span class='valid' msg='必填' rule='' mode=''></span><a href='javascript:void(0);' title='删除选项' onclick='removeItem(this)'><img src='/static/img/delete.gif' />删除</a>
                                </div>");
            }
        }
        sbHtml.Append("</div>");//end of divItems
        sbHtml.Append(@"<a href='javascript:void(0);' title='添加选项' onclick='addItem()'><img src='/static/img/add.gif' />添加</a>
                        </td></tr>");
    }
    #endregion

    set("allItems", sbHtml.ToString());
}

/// <summary>
/// 更新
/// </summary>
public void Update(int id)
{
    Edu_QnSubject oldQnTemplate = edu_QnSubjectService.findById<Edu_QnSubject>(id);//从数据库中取旧数据

    Edu_QnSubject qnTemplate = (Edu_QnSubject)ctx.PostValue(oldQnTemplate);//取表单
    Result result = edu_QnSubjectService.update(qnTemplate);//保存数据表数据库

    if (result.HasErrors)
    {
        echoError("保存出错");
        return;
    }
    echoToParent(lang("operationSuccess"));
}
#endregion

#region 删除
/// <summary>
/// 删除
/// </summary>
public void Delete(int id)
{
    string templateId = ctx.Post("templateId");
    edu_QnSubjectService.delete<Edu_QnSubject>(id);
    redirectUrl(Link.To(Index, int.Parse(templateId)));
}

/// <summary>
/// 批量删除
/// </summary>
[DbTransaction]
public void BatchDelete(int templateId)
{
    string choiceIds = ctx.Post("subjectIds");//获取ID集合

    //拼接条件
    string condition = string.Format("Id in ({0})", choiceIds);

    //批量删除
    edu_QnSubjectService.deleteBatch<Edu_QnSubject>(condition);
    redirectUrl(Link.To(Index, templateId));
}
#endregion

 效果：