Jquery EasyUI +Ajax +Json +汎用ハンドラで、データのフロントエンドとバックエンドのインタラクションを実現 --- Goodness Commune Project

<スパン 最後のブログの後、このセクションでは、主に関数の実装を参照してくださいすることですjsonデータを介して背景データが渡され、フォアグラウンドは、データを変更し、再びページがテーブル内のデータを更新した後に戻ってデータベースへ。

 図解

<スパン

例：フロントエンドのコード

   <%--Form display area--%>
    
       <%--url is the address to get the data--%>
       <%--url:'JSON.ashx/ProcessRequest'--%>
         <%-- Form title--%>
        
         <%--table content--%>
        
 Scoring item category ID
Scoring item category name
Scoring item category description
Scoring item unit score
Scoring project unit
Administrators
Post time

上記は主にテーブルのプロパティを設定するもので、各プロパティの詳細については、中国語のテキストブロックを確認することができます

以下は、追加、削除、チェックのコードです。

 var url;
        //add admin
        function newUser() {
            $('#dlg').dialog('open').dialog('setTitle', 'Add Administrator');//set the table header
            $('#fm').form('clear');//clear the form data
            document.getElementById("test").value = "add";//set indicates the interface for the backend to call different method data

        }
        //modify administrator
        function editUser() {
            $('#fm').form('clear');
            var row = $('#tt').datagrid('getSelected');
            if (row) {
                $('#dlg').dialog('open').dialog('setTitle', 'Modify Admin');
                //binding data list
                $('#firstname').val(row.ScoreStyleName);
                $('#lastname').val(row.Score);
                $('#unit').val(row.ScoreItem);
                $('#message').val(row.ScoreStyleState);
                $('#ID').val(row.ScoreStyleID);
                document.getElementById("test").value = "modify";//setting means providing an interface for the background to call different method data
                $('#fm').form('load', row);

            }
        }
        //Save the information
        function saveUser() {
            //Get the value entered in the page
            var firstname = document.getElementById("firstname").value;
            var lastname = document.getElementById("lastname").value;
            var test = document.getElementById("test").value;
            var unit = document.getElementById("unit").value;;
            var message = document.getElementById("message").value;
            var ID = document.getElementById("ID").value;
            //var t = "firstname=" + firstname + "&lastname=" + lastname + "&unit=" + unit + "&message=" + message + "&ID=" + ID;


            $('#fm').form('submit', {
                //set the address and pass the parameters to the backend
                url: "JSONData.ashx?firstname=" + firstname + "&lastname=" + lastname + "&unit=" + unit + "& message=" + message + "&test=" + test + "&ID=" + ID,
                onSubmit: function () {
                    return $(this).form('validate');
                },
                // Determine if the result is correct
                success: function (result) {
                    if (result.indexOf("T") == 0) {

                        alert('Congratulations, information added successfully!')
                        $('#dlg').dialog('close'); // close the window
                        $('#tt').datagrid('reload');
                    }
                    else {
                        alert('Save failed, please check!')
                    }
                    var result = eval('(' + result + ')');
                    if (result.success) {
                        $('#dlg').dialog('close'); // close the dialog
                        $('#tt').datagrid('reload');
                        $.message.alert('alert', 'saved successfully!' , 'info');

                        // reload the user data
                    } else {
                        // $.messager.show({
                        // title: 'Error',
                        // msg: result.msg
                        //});
                    }
                }
            });
        }
        // Remove the administrator
        function removeUser() {
            document.getElementById("test").value = "delete" //set to indicate the interface for the backend to call different method data
            var test = document.getElementById("test").value;
            var row = $('#tt').datagrid('getSelected');
            if (row) {
                $.messager.confirm('Prompt', 'Are you sure you want to delete this message?' , function (r) {
                    if (r) {
                        $('#fm').form('submit', {
                            url: "JSONData.ashx?ID=" + row.ScoreStyleID + "&test=" + test,
                            onSubmit: function () {
                            },
                            // Determine if the result is correct
                            success: function (result) {
                                if (result.indexOf("T") == 0) {
                                    $('#dlg').dialog('close');
                                    alert('Congratulations, message deleted successfully!')
                                    // close the dialog
                                    $('#tt').datagrid('reload');
                                    // $('#fm').form('submit');
                                }
                                else {
                                    alert('Add failed, please retry!')
         

 次に、バックエンドの一般的なハンドラー (主にデータベースからデータを読み取る役割を担う) のコードです。

1つ目は、フォアグラウンドでどのメソッドがリクエストされているかを判断することです。

/// 

        /// Conditional query announcement
        /// 

        /// 

        public void ProcessRequest(HttpContext context)///context contains the values passed back and forth between the foreground and background
        {//Determine which of the foreground request is to add, delete, and check
            string command = context.Request.QueryString["test"];//the marker value passed by the foreground
            if (command == "add")
            {// Call the add method
                Add(context);
            }
            else if (command == "delete")
            {//Call the delete method
                Delete(context);
            }
            else if (command == "modify")
            {//Call the modify method
                Modify(context);
            }
            else
            {//Call the query method
                Query(context);
            }
        }

 クエリ内のメソッド。

 //================================================================
            //Get paging and sorting information: page size, page number, sort method, sort field
            int pageRows, page;
            pageRows = 10;
            page = 1;
            string order, sort, oderby; order = sort = oderby = "";
            if (null ! = context.Request.QueryString["rows"])
            {
                pageRows = int.Parse(context.Request.QueryString["rows"].ToString().Trim());

            }
            if (null ! = context.Request.QueryString["page"])
            {

                page = int.Parse(context.Request.QueryString["page"].ToString().Trim());

            }
            if (null ! = context.Request.QueryString["sort"])
            {

                order = context.Request.QueryString["sort"].ToString().Trim();

            }
            if (null ! = context.Request.QueryString["order"])
            {

                sort = context.Request.QueryString["order"].ToString().Trim();

            }


            //===================================================================
            //combined query statement: condition + sort
            StringBuilder strWhere = new StringBuilder();
            if (key ! = "")
            {
                strWhere.AppendFormat(" ScoreStyleName like '%{0}%' and ", key);
            }
            if (category ! = "")
            {
                strWhere.AppendFormat(" AdminID= '{0}' and ", category);
            }
            if (startTime ! = "")
            {
                strWhere.AppendFormat(" PublishDate >= '{0}' and ", startTime);
            }
            if (endTime ! = "")
            {
                strWhere.AppendFormat(" PublishDate <= '{0}' and ", endTime);
            }

            //delete the extra and
            int startindex = strWhere.ToString().LastIndexOf("and");//get the position of the last and
            if (startindex >= 0)
            {
                strWhere.Remove(startindex, 3);//delete the extra and keyword
            }
            if (sort ! = "" && order ! = "")
            {
                //strWhere.AppendFormat(" order by {0} {1}", sort, order);//add sort
                oderby = order + " " + sort;
            }
            //DataSet ds = Bnotice.GetList(strWhere.ToString()); //call unpaged getlist

            //call the paged GetList method
            DataSet ds = scorebll.GetListByPage(strWhere.ToString(), oderby, (page - 1) * pageRows + 1, page * pageRows);
            int count = scorebll.GetRecordCount(strWhere.ToString());//Get the number of entries
            string strJson = ToJson.Dataset2Json(ds, count);//Convert DataSet data to Json data
            Write(strJson);//return to the front page
            Context.Response.End();

<スパン       このプロセスは非常に長く、デバッグの過程で、様々な問題が発生し、主にブラウザのキャッシュの問題は、長い時間を遅らせ、ロングは、この機能は、Ajax、はるかに深く理解するための一般的な処理の手順の実装を介して、強力なサポートを与えた。

<スパン       Json+ajaxのデータインタフェースはリフレッシュされず、ページは顧客のニーズに近く、クエリの効率は大幅に改善されます。

<スパン

  次回は、ページネーション（自分で情報を見つけて知識をまとめる学習）とクエリデータのページネーションについて、その知識と事例を紹介します。ご期待ください......。