Developing ASP. WebForm applications with bootstrap+avalonjs+entityframework (top)

This article will show you how to use Bootstrap+avalonjs+entityframework to develop an ASP. NET WebForm application, divided into two articles. The main introduction of the implementation of the next chapter is the main interface.

Open Visual Studio Web Express2013 Create a new blank application contactsample--Contact Example

(1) database

Introduced interface file Bootstrap,js file jquery and Avalon, build contact page contact.aspx.

Open the database, design the database contactsample, the database is relatively simple, a self-increment ID, a contact name Contactnname, contact phone tel, and address.

In VS Solution Explorer, I added the model folder, stored the system generated data, right click on the model, select Add New Item, select the ADO data Model in data

If you don't have this module in your new add-on, you can click http://msdn.microsoft.com/en-us/data/ee712906 to see how to add it.

In the wizard, choose Generate code from the database.

Set the database connection, note that the contactcontext is used in the settings in Web. config, and you will see using him to get the database objects in the following code.

Using version 6.0

Introduction of a unique Table contactlists

When the introduction succeeds, the system automatically generates the relevant code.

Now, let's open the Contact.aspx.cs page and add three ways: Get a contact, add and delete contacts.

In the code, [WebMethod] is added to the front of the function, which allows the client to invoke the backend code. In addition, the code is static

  [WebMethod]        public static contactlists[] Getcontactlists ()        {            var db = new Contactcontext ();            var data = from item in DB. Contactlists                       item.id Descending                       Select item;            return data. ToArray ();         }        [WebMethod]        public static void DeleteContact (contactlists data)        {            var db = new Contactcontext ();            var sg = db. Contactlists.firstordefault (Contact = Contact.id = = data.id);            if (sg! = null)            {                db. Contactlists.remove (SG);                Db. SaveChanges ();            }        }        [WebMethod]        public static object Addcontact (contactlists data)        {             var db = new Contactcontext ();            Db. Contactlists.add (data);            Db. SaveChanges ();             return data.id;        }

(b) JS Model

Before using Avalon, for convenience, we define a contact model, which defines the JS function

   function ContactItem (data) {                this. id = data.id;                  this. ContactName = data.contactname;                 this. Tel = data.tel;                 this. Address = data.address;            }

First implement the function of displaying data when the page opens, define a contactpanel, and all subsequent Avalon are here for this panel to operate.

Second, use a table to display the data. For the loop of data, Ms-repeat-el is used.

 <div class= "Contactpanel" ms-controller= "Contactpanel" "> <table > <t Body > <tr> <th>ID</th> <th> Contact name </th&                     Gt  <th> Contact Phone </th> <th> Contact address </th> </tr> &LT;TR Ms-repeat-el= "Contactlists" > <td> <span ms-text= "El.id"/&                    Gt                    </td> <td> <input ms-value= "El.contactname"/>                     </td> <td > <input ms-value= "El.tel"/> </td> <td > <input ms-value= "el.address"/ > </td> <td > <iNput type= "button" value= "delete" ms-click= "Delcontact (EL)"/> </td> </tr&gt            ; </tbody> </table> </div>

Now, it can be processed in the ready of document.

            $ (document). Ready (                function ()                {                    $.ajax ({                        type: "POST",                        URL: ' contact.aspx/getcontactlists ',                        contentType: "Application/json; Charset=utf-8 ",                        dataType:" JSON ",                        success:function (results) {                            var contactlists = $.map (RESULTS.D, function (item) {                                return new ContactItem (item)                            });                             Model.contactlists.pushArray (contactlists);                        },                        error:function (err) {                            alert (err.status + "-" + (Err.statustext);})                });            

  In the above model is defined as follows

 var model = Avalon.define ("Contactpanel", function (VM) {vm.id = "0";                Vm.contactname = "";                Vm.tel = "";                 Vm.address = "";                Vm.contactlists = [];                      Vm.addcontact = function () {var Newresult = $ ("#addaPanel input"). Serialize ();                                        var newcontact = decodeURI (objtostring (Newresult));                        $.ajax ({type: "POST", url: ' Contact.aspx/addcontact ', Data: "{data:" + NewContact + "}", ContentType: "Application/json;                            Charset=utf-8 ", success:function (Result) {Vm.contactlists.unshift ( New ContactItem ({ID:RESULT.D, contactn                              Ame:vm.contactname, Tel:vm.tel,  Address:vm.address}));                            Vm.contactname = "";                            Vm.tel = "";                        Vm.address = "";                    }, Error:function (err) {alert ("Add Failed")}                  }); } vm.delcontact = function (EL) {$.ajax ({type: " POST ", url: ' contact.aspx/deletecontact ', data:" {data: "+json.stringify (el.$ Model) + "}", ContentType: "Application/json;                         Charset=utf-8 ", success:function (Result) {Vm.contactlists.remove (EL);                        }, Error:function (err) {alert ("delete failed");                }                    }); }            });

Finally, the code uses objtostring. He is a custom function because it turns the object into a string.

  function objtostring (data) {                data = Data.replace (/&/g, "\", \ "");                data = Data.replace (/=/g, "\": \ "");                data = "{\" "+ Data +" \ "}";                return data;            }

Now, running the page, a simple data display, adding and removing features is done.

(c) Source code download

Http://files.cnblogs.com/mqingqing123/ContactSample.rar

Developing ASP. WebForm applications with bootstrap+avalonjs+entityframework (top)