JQuery Calendar Example

JQuery Calendar Example

A Simple Calendar In html with JQuery using Date Picker.

Code:-

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>

    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"> 

    </script>

    <script type='text/javascript'>

        $(document).ready(function () {

            $("#calendar").datepicker

            ({

                defaultDate: '01/01/' + new Date().getFullYear(),

                minDate: '01/01/' + new Date().getFullYear(),

                maxDate: '12/31/' + (new Date().getFullYear() + 1),

                numberOfMonths: [2, 6],

            });

        });

    </script>

    <style>

        #header {

            background-color:#00ff21;

            height:100px;

            width:100%;

            text-align:center;

        }

        #footer {

            background-color: #808080;

            height: 100px;

            width: 100%;

            color: white;

            text-align: center;

        }

        #calendar {

            margin-left:175px;

        }

    </style>

</head>

<body>

    <div id="header">

        <h1>Calendar</h1>

    </div>

    <div id='calendar'>

    </div>

    <div id="footer">

        <h2>All Right are reserved at Dot Net By Vickypedia</h2>

    </div>

</body>

</html>

Output :- 

First Application in AngularJS

First Application of AngularJS

Step 1 :- Start Visual Studio then  Create Empty Web Application.

Step :- Add HTML page in your Application.

Step 3 :- Add Script file / Source link in your page...

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

Step 4:- Write Code   :--

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Hello World</title>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

</head>

<body>

    <div ng-app="">

        <h1>First Example of AngularJS</h1>

        <p>Please Enter "Hello World"/Text in the TextBox:

            <input type="text" ng-model="text"></p>

        <h2 ng-bind="text"></h2>

    </div>

    <div id="footer"><h3>Powered By DotNet By Vickypedia</h3></div>

</body>

</html>

Step 5 :- Run your Application ...

Introduction of AngularJS

Introduction of AngularJS

Introduction of AngularJS

AngularJS is a very powerful JavaScript Framework. It is used in Single Page Application (SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive to user actions. AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache license version 2.0.

Definition of AngularJS

AngularJS is a structural framework for dynamic web apps.

Advantages of AngularJS

• 1-AngularJS provides capability to create Single Page Application in a very clean and maintainable way.
• 2-AngularJS provides data binding capability to HTML thus giving user a rich and responsive experience
• 3-AngularJS code is unit testable.
• 4-AngularJS uses dependency injection and make use of separation of concerns.
• 5-AngularJS provides reusable components.
• 6-AngularJS, developer write less code and get more functionality.

Disadvantages of AngularJS

Though AngularJS comes with lots of plus points but same time we should consider the following points −

• 1-Not Secure − Being JavaScript only framework, application written in AngularJS are not safe. Server side authentication and authorization is must to keep an application secure.
• 2-Not degradable − If your application user disables JavaScript then user will just see the basic page and nothing more.

The AngularJS Components

The AngularJS framework can be divided into following three major parts −

• ng-app − This directive defines and links an AngularJS application to HTML.
• ng-model − This directive binds the values of AngularJS application data to HTML input controls.
• ng-bind − This directive binds the AngularJS Application data to HTML tags.

AngularJS Environment Setup

Click on this link :-https://angularjs.org/

Download Script file & Add in your Application.

*(To see in Image.............)

Hello World Programming with Node.JS

Hello World Programming with Node.JS

1st :-  Install node.js Application....if not Install node.js                  Application on your system then visit this link...(

http://dotnetbyvickypedia.blogspot.in/2016/01/how-to-start-node-js-programming.html  )

2nd:- Open Command Prompt then type "node".

3rd :- Write Code for the "Hello World". 

           (To see in image................................)

4th :- Enjoying Programming....!!

How to start node js programming

How to start node.js programming 

1st :-visit this link( https://nodejs.org/en/download/ )

2nd:- Download the node.js Application .

3rd:- Install node.js Application on your windows.

4th:- After completed installation then open Command Prompt &              type "node".

5th:-Start Programming :-....................!!

Javascript Event( On Button Click)

JavaScript Example :-

Show POP-UP Message On Button Click

Event :- On Button Click 

Message :- "Hello World" 

Source Code:-

--------------------------------------------------------

<!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></title>

    <script type="text/javascript">

        function myFunction() {

            alert("Hello World");

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

   <h1>Javascript Example</h1>

   <p>Click On Button </p>

    <button onclick="myFunction()">

        Try it</button>

    <p id="demo">

    </p>

    </form>

</body>

</html>

--------------------------------------------------------
See Image :- 

--------------------------------------------------------

Example of using LINQ to SQL Database connection in Asp.Net

Example of using LINQ to SQL Database connection in Asp.Net

Step-1 :- Design Page like this

Source Code :-  

---------------------------------------

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>On Click Events</title>

</head>

<body>

    <form id="form1" runat="server">

    <div id="Main">

        <div>

            <table style="width:60%">

                <tr>

                    <td>

                        NAME

                    </td>

                    <td>

                        <asp:TextBox ID="txtName" runat="server"></asp:TextBox>

                    </td>

                </tr>

                <tr>

                    <td>

                        Company

                    </td>

                    <td>

                        <asp:TextBox ID="txtCompany" runat="server"></asp:TextBox>

                    </td>

                </tr>

                <tr>

                    <td>

                        City

                    </td>

                    <td>

                        <asp:TextBox ID="txtCity" runat="server"></asp:TextBox>

                    </td>

                </tr>

                <tr>

                <td></td><td><asp:Button ID="btnsave" Text="save" runat="server"

                        onclick="btnsave_Click" /></td>

                </tr>

                <tr>

                <td></td><td>

                    <asp:Label ID="lblmsg" runat="server" Text="msg" Visible="false"></asp:Label></td>

                </tr>

            </table>

        </div>

        <div>

        <p>Show the Data</p>

            <table style="width:100%">

                <tr>

                    <td>

                    </td>

                    <td>

                        <asp:GridView ID="grv1" runat="server">

                        </asp:GridView>

                    </td>

                    <td>

                    </td>

                </tr>

            </table>

        </div>

        <div id="footer">

            <p style="text-align:left">

                @ Design By Dot Net By Vickypedia</p>

        </div>

    </div>

    </form>

</body>

</html>

---------------------------------------

Step-2 :- Create Table "tblEmp"

Source Code :-  

---------------------------------------

Create Table tblEmp

(

    ID int identity(1,1) primary key,

    Name varchar(50),

    Company varchar(50),

    City varchar(50),

)

---------------------------------------

Step-3 :-  Add DBML Class in Application

Step-4 :- After then drag table "tblEmp" on DBML Class

Step-5 :-then write code for the Button "btnSave" 

              and GridView  "grv1"

Source Code :-  

---------------------------------------

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace JavaScriprt_Examples

{

    public partial class firstPage : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            if (!IsPostBack)

            {

                ShowGrid();

            }

        }

        EmpDataBaseDataContext _eDBobj = new EmpDataBaseDataContext();

        protected void btnsave_Click(object sender, EventArgs e)

        {

            tblEmp tblEmpObj = new tblEmp();

            tblEmpObj.Name = txtName.Text;

            tblEmpObj.Company = txtCompany.Text;

            tblEmpObj.City = txtCity.Text;

            _eDBobj.tblEmps.InsertOnSubmit(tblEmpObj);

            _eDBobj.SubmitChanges();

            lblmsg.Visible = true;

           lblmsg.Text = "Add Successfully";

           clearform();

       

        }

        protected void clearform()

        {

            txtName.Text = "";

            txtCompany.Text = "";

            txtCity.Text = "";

        }

        protected void ShowGrid()

        {

            var v = from m in _eDBobj.tblEmps select m;

            grv1.DataSource = v;

            grv1.DataBind();

        }

    }

}

---------------------------------------

Step-6 :- Run the Application