初識ajax技術_ZenDei技術網路在線

首先我介紹一下為什麼我需要用到ajax技術 1.頁面上有個text類型的輸入框，當我點擊提交的時候，可以把文本框中的值傳遞到後臺去 2.後臺接收傳遞的參數 3.連接資料庫，把傳遞來的內容添加到資料庫里 4.再調用方法把返回值又傳遞到前臺，前臺直接展示我們輸入的內容前臺 html代碼 @model ...

首先我介紹一下為什麼我需要用到ajax技術

1.頁面上有個text類型的輸入框，當我點擊提交的時候，可以把文本框中的值傳遞到後臺去

2.後臺接收傳遞的參數

3.連接資料庫，把傳遞來的內容添加到資料庫里

4.再調用方法把返回值又傳遞到前臺，前臺直接展示我們輸入的內容

前臺

html代碼

@model List<Mvc3Demo.Models.Catagory>
@{
    ViewBag.Title = "Catagory";
}
<div style="margin: 50px">
    <h2 style="display: inline">
        分類</h2>
    <select class="cata">
        @{
            //Model指的是分類列表，遍歷這個列表
            foreach (var item in Model)
            {
     //下拉框，名字是分類名稱（CatagoryName），值是分類編號（ID）
            <option value="@item.ID">@item.CatagoryName</option>
            }
        }
    </select>
    <h2 style="display: inline; margin-left: 20%">
        添加分類</h2>
    <div style="display: inline-block">
            <input id="cataName" type="text" value="請輸入分類名稱" onfocus="this.value=''" onblur="if(this.value==''){this.value='請輸入分類名稱'}" />
            <a href="javascript:void(0);" style="height: 25px" onclick="addcata();">提交</a>
    </div>
</div>

View Code

jquery代碼

<script type="text/javascript">

function addcata()
{
//獲取到我們輸入框中輸入的內容
var catagoryname = $("#cataName").val();
        //ajax的jquery申明
        $.ajax({
            //以post的形式傳遞，至於和get有什麼區別，我還沒學到這兒
            type: 'post',
            //Home為控制器，AddCata為控制器中的ActionResul方法
            url: "/Home/AddCata",
            //把catagoryname當做參數傳遞
            data: { catagoryname: catagoryname }, 
            //數據類型為json，控制器中返回的就不是view，而是json
            dataType: 'json',
            success: function (dataInfo) {
                $(".cata").append("<option value='" + dataInfo.ID + "'>" + dataInfo.CatagoryName + "</option>");
                $(".cata").find("option[value='" + dataInfo.ID + "']").attr("selected", "selected");
            }
        });
    }
}

</script>

View Code

後臺

Medol代碼

namespace Mvc3Demo.Models
{
     public class Catagory
    {
        public string CatagoryName { get; set; }
        public int ID { get; set; }
    }
}

Model

Controller代碼

namespace Mvc3Demo.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Catagory()
        {
            Service service = new Service();
            //調用Service中的GetCatagory方法，獲取分類列表
            List<Catagory> list = service.GetCatagory();
            //返回視圖
            return View(list);
        }
      
         public ActionResult AddCata(string catagoryname)
        {
            Service service = new Service();
            //調用AddCatagorys方法，把數據添加進去
            service.AddCatagorys(catagoryname);
            //再調用GetCatas方法，獲取到分類列表
            List<Catagory> list = service.GetCatagories();
            //找到分類列表最後一個分類，也就是剛剛添加的分類
            Catagory catagory = list[list.Count - 1];
            //返回Json
            return Json(catagory);
        } 
    }
}

Controller

Service類文件里的內容

namespace Mvc3Demo.bll
{
    public class Service()
    {
        /// <summary>
        /// 從資料庫查詢分類列表
        /// </summary>
        /// <returns>分類列表</returns>
        public List<Catagory> GetCatagories()
        {
            string myConn = "server=伺服器名;uid=sa;pwd=密碼;database=資料庫名";//連接資料庫字元串
            using (SqlConnection myConnection = new SqlConnection(myConn))//定義一個數據連接實例
            {
                myConnection.Open();//打開連接
                string mySelect = "select id, catagoryName from dbo.Catagorys;";//從Catagorys表中查詢id和catagoryName的sql語句
                SqlCommand myCommand = new SqlCommand(mySelect, myConnection);//實例一個資料庫指令
                DataSet ds = new DataSet();//創建 DataSet 表的新實例，
                SqlDataAdapter adapter = new SqlDataAdapter(myCommand);//創建 SqlDataAdapter 填充的新實例，帶有參數，
                adapter.Fill(ds); //將數據填充表ds
                List<Catagory> list = new List<Catagory>();//實例化一個分類列表

                if (ds.Tables != null && ds.Tables.Count > 0)//判斷表不為空，並且表的數量大於0
                {
                    DataTable dt = ds.Tables[0];//取第一張表
                    if (dt != null && dt.Rows != null && dt.Rows.Count > 0)//判斷第一張表不為空，並且表行不為空，表行數不為空
                    {
                        foreach (DataRow row in dt.Rows)//遍歷表每一行
                        {
                            object objId = row["id"];//objId存放資料庫中的id
                            int id = DataConvert.ToInt32(objId);//把objId轉換成int類型，存放在id中
                            object objName = row["catagoryName"];//objName存放資料庫中的catagoryName
                            string name = string.Empty;//聲明一個name置空
                            if (objName == null)//判斷objName為空
                                continue;//跳出本次迴圈
                            name = objName.ToString();//把objName轉換成string類型
                            list.Add(new Catagory() { ID = id, CatagoryName = name});//把id和name添加到分類列表中
                        }
                    }
                }
                return list;//返回分類列表
            }
        }
        
        /// <summary>
        /// 向資料庫添加數據
        /// </summary>
        /// <param name="catagoryname">頁面添加的分類名</param>
        /// <returns>成功與否</returns>
        public bool AddCatagorys(string catagoryname)
        {
            string myConn = "server=伺服器名;uid=sa;pwd=密碼;database=資料庫名";//連接資料庫字元串
            using (SqlConnection myConnection = new SqlConnection(myConn))//定義一個數據連接實例
            {
                myConnection.Open();//打開連接
                string myInsert = "insert into dbo.Catagorys values (@catagoryName);";//向資料庫Catagorys表中添加分類
                SqlCommand myCommand = new SqlCommand(myInsert, myConnection);//實例一個資料庫指令
                myCommand.Parameters.Add(new SqlParameter() { ParameterName = "catagoryName", Value = catagoryname });//添加參數集合的方法

                try//異常處理
                {
                    int i = myCommand.ExecuteNonQuery();//執行資料庫，返回受影響的行數
                    if (i > 0)
                    {
                        return true;
                    }
                    return false;
                }
                catch (Exception ex)
                {
                    return false;
                }
            }
        }
    }
}

Service

資料庫的設計就是作為主鍵的自增長id int類型，catagoryName是varchar(50)類型

1.從資料庫獲取分類數據信息，後臺Controller中的Catagory的Action調用了Service中的GetCatagory方法，返回了一個list，這個list就是分類列表，通過return View(list)把list作為參數返還給頁面，前臺頁面html第一行的@model List<Mvc3Demo.Models.Catagory> 意思就是我們可以直接訪問Controller中通過強類型傳遞過來的分類列表。

2.向資料庫添加分類信息，網頁上點擊提交，有一個onclick事件，執行addcata方法，而且通過var catagoryname = $("#cataName").val();獲取到輸入的值，然後再利用ajax技術，把catagoryname作為參數傳遞給後臺(post)，執行Home控制器中的AddCata的Action，這個Action調用了Service中AddCatagorys方法，當然這個AddCatagorys方法再影響的行數>1的情況（sql語句執行成功）下就返回一個true，然後再AddCata的Action中，我們再一次調用GetCatagory方法，獲取到分類，那最後一個分類就是我們剛剛添加進去的分類，也就是list[list.count-1]，然後返回json，並把參數最後這個分類傳遞到前臺 return Json(catagory)。

3.前臺接收到後臺傳遞過來的數據dataInfo之後，然後在類名為cata的元素之後添加（jquer的append方法）新的分類，並且還可以把新添加的分類設置為選中（select的選中事件）

註：此篇隨筆只供參考使用，而且也有很多小瑕疵，最主要的不是代碼，邏輯才是最重要的。