Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

jQuery - An Open Source Project - R NoteBook

Article:
Viewed:  1135 
Posted On:  10/11/2014 10:09:28 AM 
This is my first jQuery project. Here in this project to fetch data and to insert data I used jQuery.  

This is an An Open Source jQuery Project. I made this project in jQuery.  Here I am going to explain how we can make our project in jQuery. Name of my project is R-NoteBook.

Below 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);
    }
}
 

Below is my DataTable design:

1.png

Image 1.

I have copied the script of my database inside App_Data folder  In Application.

4.png

Image 2.

Now Run the application.

You can enter your note and click on Save Note button

2.png

Image 3.

3.png

Image 4.

Here in this project you can see To Save Data and to fetch data I used JSON request. I made 2 web method on Defaulr.aspx.cs.

  Comment:
 
By Jim  On  3/22/2015 5:29:22 AM
I am learning this technolgy and this is very good. Would the author please contact me direct - jimd.jack@gmail.com JJ
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us