locked
Sticky Notes to DataBase RRS feed

  • Question

  • User194385433 posted

    Hi,

    How to create sticky notes and save into the database using asp.net.

    Thanks,

    Thursday, December 1, 2016 3:25 PM

All replies

  • User-707554951 posted

    Hi sureshtalla,

    From your description, I make an example, you could refer to it:

     <link  href="http://fonts.googleapis.com/css?family=Reenie+Beanie:regular" rel="stylesheet" type="text/css"/> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/json2/0.1/json2.js"></script>
    
    <style type="text/css">
        ul.sticky_notes{ list-style:none; }
    ul.sticky_notes li{
    	width:250px;
    	height:200px;
    	padding:20px;
    	margin:20px;
    	float:left;
      -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);  
      -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);  
      box-shadow: 5px 5px 7px rgba(33,33,33,.7); 
      -webkit-transform:rotate(-6deg);  
      -o-transform:rotate(-6deg);  
      -moz-transform:rotate(-6deg);  
      font-family: 'Short Stack', cursive;
    }
    ul.sticky_notes li:nth-child(odd){  
      -o-transform:rotate(4deg);  
      -webkit-transform:rotate(4deg);  
      -moz-transform:rotate(4deg);  
      ;  
      top:5px;  
    }  
    ul.sticky_notes li:nth-child(2n){  
      -o-transform:rotate(-3deg);  
      -webkit-transform:rotate(-3deg);  
      -moz-transform:rotate(-3deg);  
      ;  
      top:-5px;  
    }  
    ul.sticky_notes li:nth-child(6n){  
      -o-transform:rotate(5deg);  
      -webkit-transform:rotate(5deg);  
      -moz-transform:rotate(5deg);  
      ;  
      top:-10px;  
    }
    .yellow{ background:#ffc; }
    .green{	background:#cfc; }
    .blue { background:#ccf; }
    .red{ background:#f24a4a; }
    .purple{ background:#eaafe3; }
    .orange{ background:#f28e50; }
    ul.sticky_notes li:hover{   
      -webkit-transform: scale(1.5);  
      -moz-transform: scale(1.5);  
      -o-transform: scale(1.5);  
      ;  
      z-index:10;  
      -moz-box-shadow:0px 10px 7px rgba(0,0,0,.7);  
      -webkit-box-shadow: 0px 10px 7px rgba(0,0,0,.7);  
      box-shadow:0px 10px 7px rgba(0,0,0,.7); 
      -webkit-transition: all 300ms ease-in 50ms; /* property duration timing-function delay */
        -moz-transition: all 300ms ease-in 50ms;
        -o-transition: all 300ms ease-in 50ms;
        transition: all 300ms ease-in 50ms;
        cursor:pointer;
    }
    </style>
        <script type="text/javascript">
           
            $(document).ready(function () {
                $('#refreshNotes').click(function () {
                    refreshNotes();
                });
                $('#btnSave').click(function () {
                    var sticker = {};
                    sticker.Title = $("#Title").val();
                    sticker.Description = $("#Description").val();
                     $.ajax({
                        type: "POST",
                        url: "Sticky Notes to DataBase.aspx/Savesticker",
                        data: '{sticker:' + JSON.stringify(sticker) + '}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {
                            alert("User has been added successfully.");                    
                        }
                    });
                    return false;
                });
               
            });
            function refreshNotes() {
                var tableRows = $('#newTasks tr');
                $('.sticky_notes li').remove();
                var title = $("#Title").val();
                var description = $("#Description").val();
                if (title != undefined && description != undefined) {
                    createNotes(title, description);
                }
            };
            function createNotes(title, description) {
                var header = '<h2>' + title + '</h2>';
                var desc = '<p>' + description + '</p>';
    
                var colours = new Array();
                colours[0] = 'green';
                colours[1] = 'blue';
                colours[2] = 'yellow';
                colours[3] = 'red';
                colours[4] = 'purple';
                colours[5] = 'orange';
                $('.sticky_notes').append('<li class="' + colours[randomFromTo(0, (colours.length - 1))] + '">' + header + description + '</li>');
            };
            function randomFromTo(from, to) {
                return Math.floor(Math.random() * (to - from + 1) + from);
            }
        </script>
    
    
    Title:<input id="Title" type="text" />      
            Description:<input id="Description" type="text" />
            <p><input type="button" id="refreshNotes" value="Create sticky notes" /></p>
            <br />
            <br />
           <ul class="sticky_notes">
           </ul>
     
        </div>
                 <asp:Button ID="btnSave" Text="Save" runat="server" />

    CodeBehind:

    using System.Data.SqlClient;
    using System.Configuration;
    using System.Web.Services;
    using System.Web.Script.Services;
    
     [WebMethod]
            [ScriptMethod]
            public static void Savesticker(Sticker sticker)
            {
                string constr = ConfigurationManager.ConnectionStrings["Model2"].ConnectionString;
                using (SqlConnection con = new SqlConnection(constr))
                {
                    using (SqlCommand cmd = new SqlCommand("INSERT INTO Sticker(Title,Description )VALUES(@Title, @Description)"))
                    {
                        cmd.CommandType = System.Data.CommandType.Text;
                        cmd.Parameters.AddWithValue("@Title", sticker.Title);
                        cmd.Parameters.AddWithValue("@Description", sticker.Description);
                        cmd.Connection = con;
                        con.Open();
                        cmd.ExecuteNonQuery();
                        con.Close();
                    }
                }
            }
          public class Sticker
            {
        public string Title { get; set; }
        public string Description { get; set; }
    }

    Output Screenshot as below:

    For more information, please refer to the following links:

    https://paulund.co.uk/create-sticky-notes-to-do-list-in-css-and-jquery

    http://www.aspsnippets.com/Articles/Send-Pass-multiple-parameters-to-WebMethod-in-jQuery-AJAX-POST-in-ASPNet.aspx

    Best regards

    Cathy

    Friday, December 2, 2016 6:22 AM