·您现在的位置: 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> ASP.NET前后台交互之JSON数据

ASP.NET前后台交互之JSON数据

作者:佚名      ASP.NET网站开发编辑:admin      更新时间:2022-07-23

asp.net前后台交互之JSON数据

  最近由于项目需要做一个Ajax的搜集单表单的多重数据的需求,所以就采用了前端JQuery保存Object对象之后转换成JSON的数据源传递给后台处理的这样的形式,相信有不少人大多时候是接收后台给出的JSON数据格式,拿到前端来显示的形式。当然这也是我个人的经历简介而已,高手勿喷,写这篇文章的目的也是为了以后忘记了能够帮助会议。或许真的能够帮助到某些像我一个涉世不深的菜鸟。O(∩_∩)O

  以下是部分关键代码  

  首先是HTML代码:

    <fieldset>        <legend>基本信息</legend>        <div class="add_main" id="wrapper_add">            <div id="errorInfo" class="error container"></div>            <table width="100%" border="0" cellpadding="0" cellspacing="0" class="addForm">                <tr>                    <th>目标对象:</th>                    <td>                        <asp:TextBox ID="obj_tbx" ClientIDMode="Static" CSSClass="input" runat="server" Width="280px"></asp:TextBox>                    </td>                    <th width="18%">工作组:</th>                    <td width="32%">                        <asp:DropDownList ID="Group_ddl" ClientIDMode="Static" runat="server" Width="120px"></asp:DropDownList>                    </td>                </tr>                <tr>                    <th width="18%">项目分类:</th>                    <td width="32%">                        <asp:DropDownList ID="PRojectType_ddl" ClientIDMode="Static" runat="server" Width="200px"></asp:DropDownList>                    </td>                    <th width="18%">等级积分:</th>                    <td width="32%">                        <asp:DropDownList ID="score_ddl" ClientIDMode="Static" runat="server" Width="120px"></asp:DropDownList>                    </td>                </tr>                <tr>                </tr>                <tr>                    <th>目标地址:</th>                    <td colspan="3">                        <uc1:City ID="City1" runat="server" />                        <input id="adress_tbx" type="text" class="input" style="width: 280px;" />                        <a href="javascript:void(0);" onclick="Address_Click()">添加地址</a>                        <div id="result">                        </div>                </tr>                <tr>                    <th>要求完成时间:</th>                    <td colspan="3">                        <asp:TextBox ID="request_tbx" CssClass="ipt_date" ClientIDMode="Static" runat="server" onclick="WdatePicker()" Width="120px"></asp:TextBox>                    </td>                </tr>                <tr>                    <th valign="top">特别要求:</th>                    <td colspan="3">                        <asp:TextBox ID="special_tbx" ClientIDMode="Static" runat="server" Height="100px" TextMode="MultiLine" Width="501px"></asp:TextBox>                    </td>                </tr>            </table>        </div>    </fieldset>    <fieldset>        <legend>附件资料</legend>        <uc1:Uploadify ID="Uploadify1" runat="server" />        <table id="tb_fileview" style="display: none;" width="100%" border="0" cellpadding="0" cellspacing="0" class="list">            <thead>                <tr>                    <th>文件名称</th>                    <th>文件大小</th>                    <th>操作</th>                </tr>            </thead>            <tbody>            </tbody>        </table>    </fieldset>    <div class="add_button">        <input type="button" class="btn_yes" name="btn_release" id="btn_release" onclick="SubmitTask_Click()" value="发布任务" />        <input type="button" class="btn_yes" name="btn_add" id="btn_update" style="display: none;" onclick="UpdateSubtasks_Click()" value="更新任务" />        <input type="button" class="btn_yes" name="btn_add" id="btn_add" onclick="AddSubtasks_Click()" value="添加子任务" />    </div>

  Javascript代码:

<script type="text/javascript" charset="utf-8">        var TaskAddressArray = new Array();//任务地址集合        var TaskArray = new Array();//任务集合        //Array Remove - By James (MIT Licensed)          Array.prototype.remove = function (from, to) {            var rest = this.slice((to || from) + 1 || this.length);            this.length = from < 0 ? this.length + from : from;            return this.push.apply(this, rest);        };        ///获取任务对象信息        function gettaskmodel(Addresslist) {            var taskmodel = new Object();            taskmodel.Goal = $("#obj_tbx").val();//目标对象            taskmodel.Group = $("#Group_ddl").val();//工作组值            taskmodel.GroupName = $("#Group_ddl").find("option:selected").text();//工作组名称            taskmodel.ProjectType = $("#ProjectType_ddl").val();//项目分类值            taskmodel.ProjectTypeName = $("#ProjectType_ddl").find("option:selected").text();//项目分类名称            taskmodel.Score = $("#score_ddl").val();//等级积分值            taskmodel.ScoreName = $("#score_ddl").find("option:selected").text();//等级积分名称            taskmodel.CarryDate = $("#request_tbx").val();//要求完成时间            taskmodel.Special = $("#special_tbx").val();//特殊要求            taskmodel.Address = Addresslist;//任务地址集合            taskmodel.UploadFile = eval($("#hdJSON").val());//获取上传文件            return taskmodel;        }        ///获取地址对象信息        function gettaskaddressmodel() {            var taskaddress = new Object();//调查地址            taskaddress.province = $("#ddl_province").val();//省份代码            taskaddress.provinceName = $("#ddl_province").find("option:selected").text();//省份名称            taskaddress.city = $("#ddl_city").val();//城市代码            taskaddress.cityName = $("#ddl_city").find("option:selected").text();//城市名称            taskaddress.counties = $("#ddl_counties").val();//区域代码            taskaddress.countiesName = $("#ddl_counties").find("option:selected").text();//区域名称            taskaddress.detail = $("#adress_tbx").val();//详细地址            return taskaddress;        }        //清空表单        function ClearForm() {            $("#obj_tbx").val("");            $(".addForm select").find("option[value='']").attr("selected", true);            $("#request_tbx").val("");            $("#special_tbx").val("");            $("#adress_tbx").val("");            $("#hdJSON").val("");            $("#tb_fileview").attr("style", "display:none");            $("#tb_fileview").find("tbody").html("");            TaskAddressArray = [];//清空地址数组            ShowAddress();        }        //表单赋值        function SetForm(index) {            $("#obj_tbx").val(TaskArray[index].Goal);            $("#Group_ddl").find("option[value='" + TaskArray[index].Group + "']").attr("selected", true);            $("#ProjectType_ddl").find("option[value='" + TaskArray[index].ProjectType + "']").attr("selected", true);            $("#score_ddl").find("option[value='" + TaskArray[index].Score + "']").attr("selected", true);            $("#request_tbx").val(TaskArray[index].CarryDate);            $("#special_tbx").val(TaskArray[index].Special);            $("#hdJSON").val(JSON.stringify(TaskArray[index].UploadFile));            TaskAddressArray = TaskArray[index].Address;            ShowAddress();            ShowUpLoadFile(index);            $("#btn_release,#btn_add").attr("style", "display:none");            $("#btn_update").removeAttr("style").attr("onclick", "UpdateForm(" + index + ")");        }        //更新列表        function UpdateForm(index) {            var TaskModel = gettaskmodel(TaskAddressArray);            ClearForm();            TaskArray.splice(index, 1, TaskModel);            ShowTaskView();            $("#btn_release,#btn_add").removeAttr("style");            $("#btn_update").removeAttr("onclick").attr("style", "display:none");        }        //添加地址事件        function Address_Click() {            var TaskAddressModel = gettaskaddressmodel();            if (TaskAddressModel.province == "" || TaskAddressModel