Post
Ask Question

An Open Source Project in jQuery: R NoteBook

This is an an Open Source jQuery Project. I made this project in jQuery. Here I will explain how to make our project in jQuery. The name of my project is R-NoteBook.

The following is my jQuery and aspx code:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <title>R-NoteBook - A jQuery Open Source Project </title>  
  7.   
  8.     <script src="jquery-1.10.2.min.js" type="text/javascript"></script>  
  9.   
  10.     <style type="text/css">  
  11.         .tblNoteResult  
  12.         {  
  13.             border: solid 7px Red;  
  14.         }  
  15.         .tblNoteResult td  
  16.         {  
  17.             padding: 5px;  
  18.             border: 1px solid #2D4CB1;  
  19.             font-family:Verdana;  
  20.             font-size:8pt;  
  21.             background-color:#E6EFF2;  
  22.         }  
  23.         .tblNoteResult th  
  24.         {  
  25.             padding: 5px;  
  26.             border: 1px solid green;  
  27.             background-color:Green;  
  28.             color:#FCE514;  
  29.             font-family:Verdana;  
  30.             font-size:12pt;              
  31.         }  
  32.            
  33.     </style>  
  34.   
  35.     <script type="text/javascript">  
  36.   
  37.         function bindData() {  
  38.             $.ajax({  
  39.                 type: "POST",  
  40.                 url: "Default.aspx/getData",  
  41.                 data: "{}",  
  42.                 contentType: "application/json; charset=utf-8",  
  43.                 datatype: "jsondata",  
  44.                 async: "true",  
  45.                 success: function(response) {  
  46.                     if ($('#tblRNoteBookResult').length != 0)  
  47.                     { $("#tblRNoteBookResult").remove(); }  
  48.   
  49.                     var table = "<table class='tblNoteResult' id=tblRNoteBookResult cellpadding='10' cellspacing='4' width='90%' align='center'><thead> <tr><th align='left'>Note Title</th><th align='left'>Note Description</th><th align='left'>Posted On</th><th align='left'>Posted By</th></thead>  <tbody>";  
  50.                     for (var i = 0; i <= response.d.length - 1; i++) 
  51.                     {  
  52.                         var row = "<tr>";  
  53.   
  54.                         row += '<td width=20%>' + response.d[i].NoteTitle + '</td>';  
  55.                         row += '<td width=50%>' + response.d[i].NoteDesc + '</td>';  
  56.                         row += '<td width=15%>' + response.d[i].PostedDate + '</td>';  
  57.                         row += '<td width=15%>' + response.d[i].PostedBy + '</td>';  
  58.                         row += '</tr>';  
  59.                         table += row;  
  60.                     }  
  61.                     table += '</tbody></table>';  
  62.                     $('#divRNoteBookData').html(table);  
  63.                     $("#divRNoteBookData").slideDown("slow");  
  64.                 },  
  65.                 error: function(response) {  
  66.                     alert(response.status + ' chandan ' + response.statusText);  
  67.                 }  
  68.             });  
  69.         }  
  70.   
  71.   
  72.         $(document).ready(function() {  
  73.             bindData();  
  74.             $('#btnSubmit').click(function() {  
  75.                 var NoteTitle = $("#txtTitle").val();  
  76.                 var NoteDescription = $("#txtDescription").val();  
  77.                 var PostedBy = $("#txtName").val();  
  78.   
  79.                 $.ajax({  
  80.                     type: "POST",  
  81.                     url: "Default.aspx/saveData",  
  82.                     data: "{Title:'" + NoteTitle + "',Description:'" + NoteDescription + "',PostedBy:'" + PostedBy + "'}",  
  83.                     contentType: "application/json; charset=utf-8",  
  84.                     datatype: "jsondata",  
  85.                     async: "true",  
  86.                     success: function(response) {  
  87.                         var myObject = eval('(' + response.d + ')');  
  88.   
  89.                         if (myObject > 0) {  
  90.                             alert("Note Saved Successfully.");  
  91.                             // Binding All Note  
  92.                             bindData();  
  93.                             // Clear All Text Box Values  
  94.                             $("#txtTitle").val("");  
  95.                             $("#txtDescription").val("");  
  96.                             $("#txtName").val("");  
  97.   
  98.                         }  
  99.                         else {  
  100.   
  101.                         }  
  102.   
  103.                     },  
  104.                     error: function(response) {  
  105.                         alert(response.status + ' ' + response.statusText);  
  106.                     }  
  107.                 });  
  108.             });  
  109.         });    
  110.     </script>  
  111.   
  112. </head>  
  113. <body>  
  114.     <form id="form1" runat="server">  
  115.     <table cellpadding="2" cellspacing="2" width="60%" align="center" style="border: Solid 5px Green;  
  116.         font-weight: bold; font-size: 12pt; background-color: Skyblue; color: Blue;">  
  117.         <tr>  
  118.             <td align="center" colspan="2" style="background-color: Yellow; font-family: Verdana;  
  119.                 color: Red;">  
  120.                 Write Your Daily Note  
  121.             </td>  
  122.         </tr>  
  123.         <tr>  
  124.             <td>  
  125.                 Your Name #:  
  126.             </td>  
  127.             <td>  
  128.                 <asp:TextBox runat="server" ID="txtName" Width="350px" />  
  129.             </td>  
  130.         </tr>  
  131.         <tr>  
  132.             <td>  
  133.                 Note Title #:  
  134.             </td>  
  135.             <td>  
  136.                 <asp:TextBox runat="server" ID="txtTitle" Width="350px" />  
  137.             </td>  
  138.         </tr>  
  139.         <tr>  
  140.             <td>  
  141.                 Note Description #:  
  142.             </td>  
  143.             <td>  
  144.                 <asp:TextBox runat="server" ID="txtDescription" Width="350px" Height="100px" TextMode="MultiLine" />  
  145.             </td>  
  146.         </tr>  
  147.         <tr>  
  148.             <td>  
  149.             </td>  
  150.             <td>  
  151.                 <asp:Button ID="btnSubmit" runat="server" Text="Save Note" Width="120px" />  
  152.             </td>  
  153.         </tr>  
  154.         <tr>  
  155.             <td colspan="2">  
  156.             </td>  
  157.         </tr>  
  158.     </table>  
  159.     <div id="divRNoteBookData">  
  160.     </div>  
  161.     </form>  
  162. </body>  
  163. </html>  
Now my aspx.cs code:
  1. using System;  
  2. using System.Configuration;  
  3. using System.Data;  
  4. using System.Linq;  
  5. using System.Web;  
  6. using System.Web.Security;  
  7. using System.Web.UI;  
  8. using System.Web.UI.HtmlControls;  
  9. using System.Web.UI.WebControls;  
  10. using System.Web.UI.WebControls.WebParts;  
  11. using System.Xml.Linq;  
  12. using System.Web.Services;  
  13. using System.Data.SqlClient;  
  14. using System.Collections.Generic;  
  15.   
  16. public partial class _Default : System.Web.UI.Page  
  17. {  
  18.     protected void Page_Load(object sender, EventArgs e)  
  19.     {  
  20.   
  21.     }  
  22.   
  23.     [WebMethod]  
  24.     public static int saveData(string Title, string Description, string PostedBy)  
  25.     {  
  26.         try  
  27.         {  
  28.             SqlConnection con = new SqlConnection(@"DATA SOURCE=MyPC\SqlServer2k8;INTEGRATED SECURITY=TRUE;DATABASE=R-NoteBook");  
  29.             SqlDataAdapter da = new SqlDataAdapter("INSERT INTO MyNote(Title,Description, PostedBy) VALUES('" + Title + "', '" + Description + "', '" + PostedBy + "')", con);  
  30.             DataSet ds = new DataSet();  
  31.             da.Fill(ds);  
  32.             return 1;  
  33.         }  
  34.         catch  
  35.         {  
  36.             return -1;  
  37.         }  
  38.     }  
  39.   
  40.     [WebMethod]  
  41.     public static RNoteBook[] getData()  
  42.     {  
  43.         RNoteBookCollection RNBC = new RNoteBookCollection();  
  44.         try  
  45.         {  
  46.             SqlConnection con = new SqlConnection(@"DATA SOURCE=MyPC\SqlServer2k8;INTEGRATED SECURITY=TRUE;DATABASE=R-NoteBook");  
  47.             if (con.State == ConnectionState.Closed)  
  48.             {  
  49.                 con.Open();  
  50.             }  
  51.             SqlDataReader dr;  
  52.             SqlCommand cmd;  
  53.             string FetchData = "Select * From MyNote ORDER BY Posted_Date DESC";  
  54.             cmd = new SqlCommand(FetchData, con);  
  55.             dr = cmd.ExecuteReader();  
  56.   
  57.             if (dr.Read())  
  58.             {  
  59.                 while (dr.Read())  
  60.                 {  
  61.                     RNoteBook NB = new RNoteBook();  
  62.                     NB.NoteTitle = dr["Title"].ToString();  
  63.                     NB.NoteDesc = dr["Description"].ToString();  
  64.                     NB.PostedBy = dr["PostedBy"].ToString();  
  65.                     NB.PostedDate = dr["Posted_Date"].ToString();  
  66.                     RNBC.Add(NB);  
  67.                 }  
  68.             }  
  69.             return RNBC.ToArray();  
  70.         }  
  71.         catch  
  72.         {  
  73.             return RNBC.ToArray();  
  74.         }  
  75.     }  
  76. }  
  77.   
  78. public class RNoteBook  
  79. {  
  80.     public string NoteTitle { get; set; }  
  81.     public string NoteDesc { get; set; }  
  82.     public string PostedBy { get; set; }  
  83.     public string PostedDate { get; set; }  
  84. }  
  85. public class RNoteBookCollection : List<RNoteBook>  
  86. {  
  87.     public void Add(RNoteBook RNB)  
  88.     {  
  89.         base.Add(RNB);  
  90.     }  
  91. }  
The following is my DataTable design:

design view
Image 1.

I have copied the script of my database into the App_Data folder in the application.

app data
Image 2.

Now run the application. You can enter your note and click on the Save Note button.

Note
Image 3.

Note pade
Image 4.

Here in this project you can see that to save data and to fetch data I used a JSON request. I made 2 web methods on Defaulr.aspx.cs. 


Similar Articles