An Open Source Project in jQuery: R NoteBook

Rahul Kumar Saxena
Oct 12, 2014

6.7k
0
2
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

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:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>R-NoteBook - A jQuery Open Source Project </title>
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<style type="text/css">
.tblNoteResult
{
border: solid 7px Red;
}
.tblNoteResult td
{
padding: 5px;
border: 1px solid #2D4CB1;
font-family:Verdana;
font-size:8pt;
background-color:#E6EFF2;
}
.tblNoteResult th
{
padding: 5px;
border: 1px solid green;
background-color:Green;
color:#FCE514;
font-family:Verdana;
font-size:12pt;
}
</style>
<script type="text/javascript">
function bindData() {
$.ajax({
type: "POST",
url: "Default.aspx/getData",
data: "{}",
contentType: "application/json; charset=utf-8",
datatype: "jsondata",
async: "true",
success: function(response) {
if ($('#tblRNoteBookResult').length != 0)
{ $("#tblRNoteBookResult").remove(); }
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>";
for (var i = 0; i <= response.d.length - 1; i++)
{
var row = "<tr>";
row += '<td width=20%>' + response.d[i].NoteTitle + '</td>';
row += '<td width=50%>' + response.d[i].NoteDesc + '</td>';
row += '<td width=15%>' + response.d[i].PostedDate + '</td>';
row += '<td width=15%>' + response.d[i].PostedBy + '</td>';
row += '</tr>';
table += row;
}
table += '</tbody></table>';
$('#divRNoteBookData').html(table);
$("#divRNoteBookData").slideDown("slow");
},
error: function(response) {
alert(response.status + ' chandan ' + response.statusText);
}
});
}
$(document).ready(function() {
bindData();
$('#btnSubmit').click(function() {
var NoteTitle = $("#txtTitle").val();
var NoteDescription = $("#txtDescription").val();
var PostedBy = $("#txtName").val();
$.ajax({
type: "POST",
url: "Default.aspx/saveData",
data: "{Title:'" + NoteTitle + "',Description:'" + NoteDescription + "',PostedBy:'" + PostedBy + "'}",
contentType: "application/json; charset=utf-8",
datatype: "jsondata",
async: "true",
success: function(response) {
var myObject = eval('(' + response.d + ')');
if (myObject > 0) {
alert("Note Saved Successfully.");
// Binding All Note
bindData();
// Clear All Text Box Values
$("#txtTitle").val("");
$("#txtDescription").val("");
$("#txtName").val("");
}
else {
}
},
error: function(response) {
alert(response.status + ' ' + response.statusText);
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<table cellpadding="2" cellspacing="2" width="60%" align="center" style="border: Solid 5px Green;
font-weight: bold; font-size: 12pt; background-color: Skyblue; color: Blue;">
<tr>
<td align="center" colspan="2" style="background-color: Yellow; font-family: Verdana;
color: Red;">
Write Your Daily Note
</td>
</tr>
<tr>
<td>
Your Name #:
</td>
<td>
<asp:TextBox runat="server" ID="txtName" Width="350px" />
</td>
</tr>
<tr>
<td>
Note Title #:
</td>
<td>
<asp:TextBox runat="server" ID="txtTitle" Width="350px" />
</td>
</tr>
<tr>
<td>
Note Description #:
</td>
<td>
<asp:TextBox runat="server" ID="txtDescription" Width="350px" Height="100px" TextMode="MultiLine" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Save Note" Width="120px" />
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
<div id="divRNoteBookData">
</div>
</form>
</body>
</html>

Now my aspx.cs code:

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Web.Services;
using System.Data.SqlClient;
using System.Collections.Generic;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static int saveData(string Title, string Description, string PostedBy)
{
try
{
SqlConnection con = new SqlConnection(@"DATA SOURCE=MyPC\SqlServer2k8;INTEGRATED SECURITY=TRUE;DATABASE=R-NoteBook");
SqlDataAdapter da = new SqlDataAdapter("INSERT INTO MyNote(Title,Description, PostedBy) VALUES('" + Title + "', '" + Description + "', '" + PostedBy + "')", con);
DataSet ds = new DataSet();
da.Fill(ds);
return 1;
}
catch
{
return -1;
}
}
[WebMethod]
public static RNoteBook[] getData()
{
RNoteBookCollection RNBC = new RNoteBookCollection();
try
{
SqlConnection con = new SqlConnection(@"DATA SOURCE=MyPC\SqlServer2k8;INTEGRATED SECURITY=TRUE;DATABASE=R-NoteBook");
if (con.State == ConnectionState.Closed)
{
con.Open();
}
SqlDataReader dr;
SqlCommand cmd;
string FetchData = "Select * From MyNote ORDER BY Posted_Date DESC";
cmd = new SqlCommand(FetchData, con);
dr = cmd.ExecuteReader();
if (dr.Read())
{
while (dr.Read())
{
RNoteBook NB = new RNoteBook();
NB.NoteTitle = dr["Title"].ToString();
NB.NoteDesc = dr["Description"].ToString();
NB.PostedBy = dr["PostedBy"].ToString();
NB.PostedDate = dr["Posted_Date"].ToString();
RNBC.Add(NB);
}
}
return RNBC.ToArray();
}
catch
{
return RNBC.ToArray();
}
}
}
public class RNoteBook
{
public string NoteTitle { get; set; }
public string NoteDesc { get; set; }
public string PostedBy { get; set; }
public string PostedDate { get; set; }
}
public class RNoteBookCollection : List<RNoteBook>
{
public void Add(RNoteBook RNB)
{
base.Add(RNB);
}
}