1. 程式人生 > >Asp.net mvc json前後臺傳輸

Asp.net mvc json前後臺傳輸

一、JSON到後臺

首先是資料從前臺傳遞資料到後臺controller 操作,使用方式還是通過ajax 來提交資料

json 資料如下:

 //獲取提交的json資料
    function GetSubmitData() {

        var jsondata = '{'

        + '"TaskID":' + '"asdfasdfa2323",'
        + '"TaskName":' + '"asdfasdfa",'
        + '"TaskNum":' + '"JBRSP",'
        + '"TaskUserType":' + '"1",'
        + '"TaskUser":' + '"1212212",'
        + '"TaskOrder":' + '"1",'
        + '"RejectType":' + '"1",'
        + '"RejectStepTaskID":' + '"",'
        + '"LimitConditionStep":[{'
        + '"ALCField":' + '"asdfasd",'
        + '"ALCContrast":' + '">",'
        + '"ALCValue":' + '"200",'
        + '"NextTaskID":' + '"322323",'
        + '}]}'

        return JSON.parse(jsondata)
    }

提交的ajax 操作如下:

//提交資料
    function SubmitInfo()
    {
        var jsonObj = GetSubmitData();

        $.ajax({
            url: '@Url.Action("CreateTask", "WFTask")',
            data: jsonObj,
            type: 'POST',
            contentType: 'application/x-www-form-urlencoded',
            sucess: function (result) {
                alert(result);
            }
        });
    }

後臺獲取資料的時候是通過request.Form 來獲取的,但這裡有個問題request.From 對複雜資料內容是通過索引的方式來獲取的程式碼如下:

/// <summary>
        /// 把 Request.From 中的資料轉化為WFTaskView物件
        /// </summary>
        /// <param name="request"></param>
        /// <returns></returns>
        private WF_TaskView ConvertTaskView(HttpRequestBase request)
        {
            WF_TaskView obj = new WF_TaskView();

            int requestCount = request.Form.Count;

            obj.TaskID = request.Form["TaskID"].ToString();
            obj.TaskNum = request.Form["TaskNum"].ToString();
            obj.TaskName = request.Form["TaskName"].ToString();
            obj.TaskUserType = request.Form["TaskUserType"].ToString();
            obj.TaskUser = request.Form["TaskUser"].ToString();
            obj.TaskOrder = request.Form["TaskOrder"].ToString();
            obj.RejectType = request.Form["RejectType"].ToString();
            obj.RejectStepTaskID = request.Form["RejectStepTaskID"].ToString();

            List<LimitConditionStep> limitList = new List<LimitConditionStep>();

            if (requestCount == 8) //提交的內容沒有跳轉點
            {
                return obj;  
            }
            else //多個跳轉點
            {
                //迴圈次數
                int rcount = (requestCount - 8) / 4;

                for (int i = 0; i < rcount; i++)
                {
                    LimitConditionStep limitobj = new LimitConditionStep();

                    limitobj.ALCField = request.Form["LimitConditionStep[" + i + "][ALCField]"].ToString();
                    limitobj.ALCContrast = request.Form["LimitConditionStep[" + i + "][ALCContrast]"].ToString();
                    limitobj.ALCValue = request.Form["LimitConditionStep[" + i + "][ALCValue]"].ToString();
                    limitobj.NextTaskID = request.Form["LimitConditionStep[" + i + "][NextTaskID]"].ToString();                    

                    limitList.Add(limitobj);
                }

                obj.LimitConditionStep = limitList;
            }

            return obj;
        }        

我的json 中的內部子元素是LimitConditionStep,然後是索引,後面是欄位名稱,就可以獲取到對應的資料

 

二、後臺JSON傳遞到前臺

後臺通過方法內json轉換就能把前端獲取的資料返回出來,程式碼如下

  /// <summary>
        /// 獲取當前流程已存在的節點
        /// </summary>
        /// <returns></returns>
        public JsonResult GetWFTask()
        {
            List<WF_Task> rtasklist = dal.GetWFTask(processId);

            return Json(rtasklist);
        }

前端資料請求,需要把獲取到的資料放到陣列中,程式碼如下:

 //當前結點
    function GetCurrentTask()
    {
        //當前結點
        var taskArray = new Array();

        //駁回節點
        $.ajax({
            type: 'POST',
            url: '../WFTask/GetWFTask',
            async: false,
            dataType: 'json',
            success: function (response) {
                for (var i = 0; i < response.length; i++) {
                    var option = {};
                    option.id = response[i]["TaskID"];
                    option.text = response[i]["TaskName"];

                    taskArray.push(option);
                }
            }
        });

        return taskArray;
    }

在使用ligerUI中的cobox 資料繫結的時候需要在html中新增上:

       <input type="text" id="sel_AuditUser" />
                <input type="hidden" id="sel_AuditUserValue" />

下拉框控制元件賦值如下:

        //繫結資料到駁回cobox
        $("#sel_RejectStepTaskID").ligerComboBox({
            data: taskArray,
            valueFieldID: 'sel_RejectTypeValue'
        });
        

三,效果圖