初識ajax技術

標籤：輸入   需要   而且   ted   cut   base   focus   returns   擷取   

首先我介紹一下為什麼我需要用到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的選中事件）

 

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

初識ajax技術