手机通讯录2 (ajax)

上一篇讲了如何保存数据到localstorage  http://www.cnblogs.com/jason-xiao/archive/2012/01/04/2312173.html

这次我们来看看如何保存数据到后台

代码和前面的只有一点区别，先贴上来吧

 

var notesApp =  new Ext.Application({
    name: "NotesApp",
    useLoadMask:  true,
    launch:  function () {

         // page one
        NotesApp.views.notesListToolbar =  new Ext.Toolbar({
            id: "notesListToolbar",
            title: "Contact",
            layout: "hbox",
            items: [
            { xtype: "spacer" },
            {
                text: "New", ui: "action", handler:  function ()  {
                        var  note =  Ext.ModelMgr.create({ Id: "-1", Name: "", Phon e: "", Email:  "" }, "Note");
                    NotesApp.views.noteEditor.load(note);
                    NotesApp.views.viewport.setActiveItem("noteEditor", { type: "slide", direction: "left" });
                }
            }]
        });

        Ext.regModel("Note", {
            idProperty: "Id",
            fields: [
               { name: "Id", type: "int" },
               { name: "Name", type: "string" },
               { name: "Phone", type: "string" },
               { name: "Email", type: "string", message: "Wrong Email Format" }
            ],
            validations: [
            { type: "presence", field: "Id" },
            { type: "presence", field: "Name", message: "Name cannot be empty!" },
            { type: "format", field: "Phone", matcher: /^[0-9]+$/, message: "please enter corrent number!" },
            { type: "format", field: "Email", matcher: /^[.]*$|^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/, message: "please enter corrent email!" }
            ]
        });


        NotesApp.views.NotesStore = Ext.regStore("NotesStore", {
            model: "Note",
            sorters: { property:  "Name",  direction: "ASC" },
             proxy: { type: "ajax", url: "Data/NotesListData.aspx?method=search" , reader: { type: "json", root: "data"} }
                                    ,
            getGroupString:  function (record) {
                 if (record && record.data.Name) {
                     return record.get("Name")[0].toString();
                }
                 else {
                     return "";
                }
            }
        });

        NotesApp.views.notesList =  new Ext.List({
            id: "notesList",
            store: "NotesStore",
            grouped:  true,
            indexBar:  true,
            emptyText: "<div>note is not cached</div>",  // onItemDisclosure
            itemTpl: "<div>{Name}</div>" + "<div>{Phone}</div>",
            onItemDisclosure:  function (record) {
                 var selectedNote = record;
                NotesApp.views.noteEditor.load(selectedNote);
                NotesApp.views.viewport.setActiveItem("noteEditor", { type: "slide", direction: "left" });
            }
            ,
            listeners: { "render":
             function (thisComponent) {
                thisComponent.getStore().load();
            }
            }

        });

         // page two
        NotesApp.views.noteEditorTopToolbar =  new Ext.Toolbar({
            id: "noteEditorTopToolbar",
            title: "Edit Contact",
            layout: "hbox",
            items: [
            { text: "Home", ui: "back",
                handler:  function () {
                    NotesApp.views.viewport.setActiveItem("notesListContainer", { type: "slide", direction: "right" });
                }
            },
            { xtype: "spacer" },
            {
                text: "Save", ui: "action", handler:  function () {

                     var noteEditor = NotesApp.views.noteEditor;
                     var currentNote = noteEditor.getRecord();
                    noteEditor.updateRecord(currentNote);
                     var errors = currentNote.validate();
                     if (!errors.isValid()) {
                         var message = "<span style='color:red'>";
                        Ext.each(errors.items,  function (rec, i) {
                            message += rec.message + "<br>";
                        });
                        message += "</span>";
                        Ext.Msg.alert("<span style='color:red'>Validate</span>", message, Ext.emptyFn);
                         return;
                    }

                      Ext.Ajax.request({
                        method: "post",
                        url: "Data/NotesListData.aspx?method=updateOrInsert",
                        params: { id: currentNote.data.Id, name: currentNote.data.Name, phone: currentNote.data.Phone, email: currentNote.data.Email },
                        success :  function   (response, options) {
                            NotesApp.views.notesList.getStore().load();
                            NotesApp.views.viewport.setActiveItem("notesListContainer", { type: "slide", direction: "right" });
                        },
                         failure:  function   (response, options) {
                            Ext.Msg.alert("errors", "", Ext.emptyFn);
                        }
                    });
                }
            }
            ]

        });

        NotesApp.views.noteEditorBottomToolbar =  new Ext.Toolbar({
            id: "noteEditorBottomToolbar",
            dock: "bottom",
            layout: "hbox",
            items: [
            { xtype: "spacer" },
            { iconCls: "trash", iconMask:  true, handler:  function () {
                 var currentNote = NotesApp.views.noteEditor.getRecord();
                 var notesList = NotesApp.views.notesList;
                 var notesScore = notesList.getStore();
                  Ext.Ajax.request({
                    method: "post",
                    url: "Data/NotesListData.aspx?method=delete",
                    params: { id: currentNote.data.Id },
                    success:  function   ( response, options) {
                        NotesApp.views.notesList.getStore().load();
                        NotesApp.views.viewport.setActiveItem("notesListContainer", { type: "slide", direction: "right" });
                    },
                    failure:  function  (response, options) {
                        Ext.Msg.alert("errors", "", Ext.emptyFn);
                    }
                });
                NotesApp.views.viewport.setActiveItem("notesListContainer", { type: "slide", direction: "right" });
            }
            }
            ]
        });

        NotesApp.views.noteEditor =  new Ext.form.FormPanel({
            id: "noteEditor",
            items: [
                { xtype: "textfield", name: "Name", label: "Name", required:  true },
                { xtype: "textfield", name: "Phone", label: "Phone" },
                { xtype: "textfield", name: "Email", label: "Email" }
            ],
            dockedItems: [NotesApp.views.noteEditorTopToolbar, NotesApp.views.noteEditorBottomToolbar]
        });




        NotesApp.views.notesListContainer =  new Ext.Panel({
            id: "notesListContainer",
            layout: "fit",
            dockedItems: [NotesApp.views.notesListToolbar],
            items: [NotesApp.views.notesList]
        });

        NotesApp.views.viewport =  new Ext.Panel({
            fullscreen:  true,  // fullscreen
            layout: "card",
            cardSwitchAnimation: "slide",
            items: [NotesApp.views.notesListContainer
            , NotesApp.views.noteEditor
            ]

        });
    }
});

 

2.数据库

 3.sp

View Code

查询的sp
CREATE PROCEDURE [dbo].[up_SearchAllUser] 
AS
BEGIN
    SET NOCOUNT ON;
    SELECT * 
    FROM Users
END
保存的sp
CREATE PROCEDURE [dbo].[up_InsertOrUpdateUser]
    @Id  int =0
    ,@Name nvarchar(20)=''
    ,@Phone nvarchar(14)='' 
    ,@Email nvarchar(20)=''
AS
BEGIN
    SET NOCOUNT ON;
    IF(@Id=-1)
    BEGIN
        INSERT INTO Users(name,phone,email)
        VALUES
        (
            @Name
            ,@Phone
            ,@Email
        )
    END
    ELSE
    BEGIN
        UPDATE Users
        SET Name=@Name
        ,Phone=@Phone
        ,Email=@Email
        WHERE Id=@Id
    END
END
删除的sp
CREATE PROCEDURE [dbo].[up_DeleteUser]
    @Id  int =0
AS
BEGIN
    SET NOCOUNT ON;
    DELETE Users
    WHERE Id=@Id
END

 

4.web.config配置

<connectionStrings>
    <add name="Phone" connectionString="data source=.;database=phone;uid=sa;pwd=1234" providerName="System.Data.SqlClient"/>
  </connectionStrings>

5.建立一个页面（NotesListData.aspx），专门用来从数据库获取或者插入数据

View Code

public  partial  class Data_NotesListData : System.Web.UI.Page
{
     readonly  string connStr = System.Configuration.ConfigurationManager.ConnectionStrings[ " Phone "].ConnectionString;
     protected  void Page_Load( object sender, EventArgs e)
    {
         string data = Request[ " method "];
         if (! string.IsNullOrEmpty(data))
        {
             switch (data)
            {
                 case  " search ":
                    SearchAllUser();
                     break;
                 case  " updateOrInsert ":
                    Save();
                     break;
                 case  " delete ":
                    DeleteUser();
                     break;
                 default:
                     break;
            }
        }

    }


     protected  void Save()
    {

        SqlConnection conn =  new SqlConnection();
        conn.ConnectionString = connStr;
        SqlCommand cmd =  new SqlCommand();
        cmd.Connection = conn;
        cmd.CommandType = System.Data.CommandType.StoredProcedure;
        cmd.CommandText =  " up_InsertOrUpdateUser ";
        SqlParameter[] param =  new SqlParameter[]
        {
             new SqlParameter( " @Id ",Request[ " id "])
            , new SqlParameter( " @Name ",Request[ " name "])
            , new SqlParameter( " @Phone ",Request[ " phone "])
            , new SqlParameter( " @Email ",Request[ " email "])
        };
        cmd.Parameters.AddRange(param);
         try
        {
            conn.Open();
            cmd.ExecuteNonQuery();
             //  ClientScript.RegisterStartupScript(ClientScript.GetType(), "tip", "alert('save success!!');", true);
            SearchAllUser();


        }
         catch
        {
            ClientScript.RegisterStartupScript(ClientScript.GetType(),  " tip ",  " alert('database connection error!!'); ",  true);
        }
         finally
        {
            conn.Close();
        }
    }

     protected  void DeleteUser()
    {
        SqlConnection conn =  new SqlConnection();
        conn.ConnectionString = connStr;
        SqlCommand cmd =  new SqlCommand();
        cmd.Connection = conn;
        cmd.CommandType = System.Data.CommandType.StoredProcedure;
        cmd.CommandText =  " up_DeleteUser ";
        SqlParameter[] param =  new SqlParameter[]
        {
             new SqlParameter( " @Id ",Request[ " id "])
        };
        cmd.Parameters.AddRange(param);
         try
        {
            conn.Open();
            cmd.ExecuteNonQuery();
             //  ClientScript.RegisterStartupScript(ClientScript.GetType(), "tip", "alert('save success!!');", true);
           SearchAllUser();
        }
         catch
        {
            ClientScript.RegisterStartupScript(ClientScript.GetType(),  " tip ",  " alert('database connection error!!'); ",  true);
        }
         finally
        {
            conn.Close();
        }
    }

     private  void SearchAllUser()
    {
        SqlConnection conn =  new SqlConnection();
        conn.ConnectionString = connStr;
        SqlCommand cmd =  new SqlCommand();
        cmd.Connection = conn;
        cmd.CommandType = System.Data.CommandType.StoredProcedure;
        cmd.CommandText =  " up_SearchAllUser ";
        conn.Open();
        SqlDataReader dr = cmd.ExecuteReader();

        List<UserInfo> userList =  new List<UserInfo>();

         while (dr.Read())
        {
            UserInfo userInfo =  new UserInfo();
            userInfo.Id = Convert.ToInt32(dr[ " Id "]);
            userInfo.Phone = dr[ " Phone "] ==  null ?  "" : dr[ " Phone "].ToString();
            userInfo.Name = dr[ " Name "] ==  null ?  "" : dr[ " Name "].ToString();
            userInfo.Email = dr[ " Email "] ==  null ?  "" : dr[ " Email "].ToString();
            userList.Add(userInfo);

        }
        conn.Close();

        RenderToJson(userList);

         //  ClientScript.RegisterStartupScript(ClientScript.GetType(), "searchUser", "searchUser();", true);

    }

     protected  void RenderToJson( object obj)
    {
        JavaScriptSerializer oSerializer =  new JavaScriptSerializer();
         string sJson = oSerializer.Serialize(obj);
        sJson =  string.Concat( " {\"data\": ", sJson +  " } ");
        Response.Clear();
        Response.ContentType =  " application/x-json ";
        Response.Write(sJson);
        Response.End();
    }
}
[Serializable]
public  class UserInfo
{
     public UserInfo()
    {
         //
         //  TODO: Add constructor logic here
         //
    }
     int id;
     string name;
     string phone;
     string email;

     public  int Id
    {
         get {  return id; }
         set { id = value; }
    }
     public  string Name
    {
         get {  return name; }
         set { name = value; }
    }
     public  string Phone
    {
         get {  return phone; }
         set { phone = value; }
    }
     public  string Email
    {
         get {  return email; }
         set { email = value; }
    }
}