Shalvin Interests: 2016

Tuesday, August 30, 2016

Bootstrap MVC Layout with Left navigation bar

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
        
    <div class="nav navbar-fixed-top">
        @Html.ActionLink("Shalvin Institute Management", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
    </div>

    <div class="row">
        <div class="row col-md-2">
            <div class="navbar navbar-inverse">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                       
                    </div>

                    <div class="row">
                        <ul class="nav">
                            <li>@Html.ActionLink("Home", "Index", "Home")</li>
                            <li>@Html.ActionLink("About", "About", "Home")</li>
                            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="row col-md-10">
            @RenderBody()
        </div>
    </div>
    
    <div class="container body-content">
       
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Shalvin P D</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Bootstrap TextBox with DropDown

<div>Name <div class ="dropdown">
     <input type="text" data-toggle="dropdown"/>
           <ul class ="dropdown-menu">
               <li>Shalvin</li>
               <li>Bibbin</li>
           </ul>
</div>

Thursday, August 25, 2016

Abstract Class C#

An Abstract class is a class with incomplete functionality.
It shall or shall not have abstract methods. As in the case with Interface you can't create an object of Abstract class.

abstract class Person
{
        public abstract void Print();
        public void Blog()
        {
            Console.WriteLine("ShalvinPD.blogspot.com");
        }
}

class Shalvin : Person
{
        public override void Print()
        {
            Console.WriteLine("Shalvin P D");
        }
}
   
class Program
{
        static void Main(string[] args)
        {
            //Error cannot create an object of Abstract Class
            //Person p = new Person();

            Shalvin s = new Shalvin();
            s.Print();
            s.Blog();
            Console.ReadLine();
        }
}

Here I am having an Abstract class called person with an abstract method called Print and an ordinary method called blog. In the sub class I am overriding the abstract Print method.

Method overriding C#

class  Person
    {
        public virtual  void Print()
        {
            Console.WriteLine("Hello Person");
        }
    }

    class Shalvin : Person
    {
        public override void Print()
        {
            Console.WriteLine("Hello Shalvin");
        }
        
    }

   class ShalvinPD : Shalvin
    {

    }
    class Reshma : Person
    {
        public override void Print()
        {
            Console.WriteLine("Hello Reshma");
        }
    }

    class Program
    {
        static void Main(string[] args)
        {
            Person p = new Person();
            p.Print();

            Shalvin s = new Shalvin();
            s.Print();

            ShalvinPD spd = new ShalvinPD();
            spd.Print();

            Reshma r = new Reshma();
            r.Print();

            Console.ReadLine();
        }
    }
}

Sunday, June 26, 2016

Android SQLite Database Connnectivity

import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.VideoView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void btnAddClick(View view) {

        EditText editText = (EditText)findViewById(R.id.etName);
        String strExpense = editText.getText().toString();
        SQLiteDatabase sqLiteDatabase = openOrCreateDatabase("ExpenseDB",  MODE_PRIVATE, null);

        String create = "CREATE Table IF NOT EXISTS Expenses (ExpenseId integer primary key autoincrement, ExpenseName varchar(40));";
        sqLiteDatabase.execSQL(create);

        String insert = "INSERT INTO Expenses (ExpenseName) values ('" + strExpense + "');";
        sqLiteDatabase.execSQL(insert);
        Toast.makeText(MainActivity.this, "Record Saved", Toast.LENGTH_SHORT).show();
        editText.setText("");

        }

    public void btnShowClick(View view) {
        SQLiteDatabase sqLiteDatabase = openOrCreateDatabase("ExpenseDB",  MODE_PRIVATE, null);

        String strSelect  = "select * from Expenses;";
        Cursor cursor = sqLiteDatabase.rawQuery(strSelect, null);
        TextView textView = (TextView)findViewById(R.id.tvExpense);
        if(cursor.getCount() > 0)
        {
            cursor.moveToFirst();
            do {
                String expense = cursor.getString(1);
                textView.setText(textView.getText() + "\n" + expense);
            }while (cursor.moveToNext());
        }
    }
}

Android WebView

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        WebView webView = (WebView)findViewById(R.id.webView);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setWebViewClient(new WebViewClient());
        webView.loadUrl("http://shalvinpd.blogspot.com");
    }

Saturday, June 25, 2016

Android Style

colors.xml

<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorYellow">#FFFF00</color>
</resources>

styles.xml

 <style name="buttonStyle">
        <item name="android:background">@color/colorYellow</item>
    </style>

<Button
        style="@style/buttonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello"
        android:id="@+id/button"
        android:layout_centerVertical="true"
        android:layout_alignParentStart="true" />

Friday, June 24, 2016

Android LinearLayout weight_sum and weight properties

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   android:orientation="vertical"
    tools:context="com.blogspot.shalvinpd.linearlayouteg.MainActivity"
    android:weightSum="2">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1"
        android:text="Hello World!"
        android:background="@color/colorPrimary"/>

    <TextView
        android:layout_width="match_parent"
        android:background="@color/colorAccent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Hello World!" />
</LinearLayout>

Sunday, May 22, 2016

Filling Android ListView and Spinner with Array data

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="Expense">
        <item>Chilly Chicken</item>
        <item>Tea</item>
        <item>Yipee Noodles</item>
        <item>Tea</item>
    </string-array>
</resources>

Here I am creating an xml file called Expense.xml inside values folder.

   protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_expense_details);

        String[] expense = getResources().getStringArray(R.array.Expense);

        ArrayAdapter<String> Adapter = new ArrayAdapter<String>(this, android.R.layout.simple_dropdown_item_1line, android.R.id.text1, expense);

        Spinner spExpense = (Spinner)findViewById(R.id.spExpense);
        spExpense.setAdapter(Adapter);
    }
}

An array called expense is created which contains data from Expense.xml.
That data is bound to Spinner control.

String[] expense = getResources().getStringArray(R.array.Expense);
        ArrayAdapter<String> Adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, android.R.id.text1, expense );

        ListView lv = (ListView)findViewById(R.id.lvwExpense);
        lv.setAdapter(Adapter);

Here I am using ListView.

Wednesday, May 4, 2016

Android Development with Android Studio Part 1 : Views

Android Studio is the preferred IDE for writing Android Apps. It was announced in Google IO 2013. There are other options like Eclipse, IntelliJ Idea, etc. Android Studio is based on IntelliJ Idea Community Edition.

In this blog In will be concentrating on Android Studio.

Next screen will ask you to select Android SDK.

In the next screen you can select an Activity. Here I am starting with Basic Activity. Later on we will see other Activities like Google Maps Activity.

In the next screen you can specify a name for your activity.

Then the IDE will appear.

On clicking the Preview option you can see the preview.

Views and ViewGroups

View is a rectangular area in Angular. Examples of Views are TextView, Button, ImageView, etc. Views are defined in XML.

ViewGroup is a grouping of Views. Popular ViewGroups are LinearLayout, etc.

Here I have changed the ViewGroup to LinearLayout and its orientation to vertical.

wrap_content

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Shalvin P D Blog : Shalvinpd.blogspot.com Interests : Microsoft .Net, SharePoint, AngularJS, Android"
        android:background="@android:color/holo_blue_bright" />

layout_width

<TextView
        android:text="Shalvin P D Blog :shalvinpd.blogspot.com"
        android:background="@android:color/holo_blue_bright"
        android:layout_width="140dp"
        android:layout_height="50dp"/>

layout_width is defined in dp which stands for Density Independent Pixel. So that the unit is the same irrespectity of the pixel density of the Android device.

textSize

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Shalvin P D Blog : Shalvinpd.blogspot.com Interests : Microsoft .Net, SharePoint, AngularJS, Android"
        android:background="@android:color/holo_blue_bright"
        android:textSize="32sp"/>

The textSize is specified using sp. sp stands for Scale Independent Pixel and is used only for Fonts. The concept is similar to dp.

Event Handling

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   android:orientation="vertical"
    tools:context="com.blogspot.shalvinpd.helloevents.MainActivity">

    <EditText
        android:id="@+id/etName"
        android:layout_width="wrap_content"
        android:layout_height="40sp" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello"
        android:id="@+id/btnHello"
        android:onClick="btnHello_Click"
        android:layout_centerVertical="true"
        android:layout_toEndOf="@+id/textView" />
</LinearLayout>

 public void btnHello_Click(View view)
    {
        EditText et = (EditText)(findViewById(R.id.etName));
        Toast.makeText(this, "Hello " + et.getText().toString(), Toast.LENGTH_SHORT).show();
    }

Saturday, April 30, 2016

Android with Android Studio

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.administrator.myapplication.MainActivity">

    <Button
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:text="New Button"
        android:textSize="40dp"
        android:id="@+id/button"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="223dp"
        android:onClick="Click"
        />
</RelativeLayout>p

package com.example.administrator.myapplication;

import android.app.Activity;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button b=(Button)findViewById(R.id.button);
    }
    public void Click(View v)
    {
        Toast.makeText(this,"Toast",Toast.LENGTH_SHORT).show();
    }
}

Sunday, April 17, 2016

ExtJS 6 Getting Started

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="ext-all.js"></script>
    <script type="text/javascript">
        Ext.define("MyApp.Session",
            {
                config: {
                    Name: '',
                    Specialization: ''
           }
           });

        var session = Ext.create("MyApp.Session",
            {});
        session.setName('Shalvin P D');
        session.setSpecialization('Microsoft .Net')
        alert(session.getName() + " - " + session.getSpecialization());
    </script>
</head>
<body>

Creating Component

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="ext-all.js"></script>
    <script type="text/javascript">
        var myComponent = Ext.create('Ext.Component', {
            html:'Hello World ExtJS Shalvin'
        });

        Ext.application({
            name: 'MyApp',
            launch:function()
            {
                Ext.create('Ext.container.Viewport', {
                    items: [
                        myComponent
                    ]
                });
            }
        });
    </script>
</head>
<body>

</body>
</html>

Data

<pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; background-color: #eee;font-size: 12px;border: 1px dashed #999999;line-height: 14px;padding: 5px; overflow: auto; width: 100%"><code>&lt;!DOCTYPE html&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;script src=&quot;ext-all.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
        Ext.application({
            name: 'MyApp',
            launch: function () {
                Ext.create('Ext.container.Viewport', {
                    items: [
                        {
                            padding: 40,
                            tpl: 'Trainer : {name} {location}',
                            data:{
                                name: 'Shalvin P D',
                                location:'Kochi'
                            }
                        }
                       
                    ]
                });
            }
        });
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;/body&gt;
&lt;/html&gt;


</code></pre>

Thursday, April 14, 2016

AngularJS with Asp .Net MVC

<script src="~/Scripts/angular.js"></script>

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body ng-app>
    <div> 
        {{2 + 2}}
    </div>
</body>
</html>

Friday, April 8, 2016

Android Views

TextView

<TextView
    android:text="Shalvin P D 1!"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="56sp"
    android:fontFamily="sans-serif-light"
    android:textColor="@android:color/black"
    android:background="#ccddff"
    android:padding="20dp"/>

LayoutView

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

    
    <TextView
    android:text="Shalvin P D 1!"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="56sp"
    android:fontFamily="sans-serif-light"
    android:textColor="@android:color/black"
    android:background="#ccddff"
    android:padding="20dp"/>
    
     <TextView
    android:text="Shalvin P D 2!"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="56sp"
    android:fontFamily="sans-serif-light"
    android:textColor="@android:color/black"
    android:background="#ccddff"
    android:padding="20dp"
   />
    
</LinearLayout>

RelativeLayour

<RelativeLayout 
   android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

        <TextView android:text="Shalvin P D."
           android:layout_width="wrap_content"
           android:textColor="#555555"
            android:layout_height="wrap_content"
           android:layout_alignParentTop="true"
            android:textSize="30sp"/>

        <TextView android:text="Shalvin P D."
            android:layout_width="wrap_content"
            android:textColor="#555555"
            android:layout_alignParentBottom="true"
            android:layout_height="wrap_content"
            android:textSize="30sp"
            />

 </RelativeLayout>

Event Handling

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   android:orientation="vertical"
    tools:context="com.blogspot.shalvinpd.helloevents.MainActivity">

   

    <EditText
        android:id="@+id/etName"
        android:layout_width="wrap_content"
        android:layout_height="40sp" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello"
        android:id="@+id/btnHello"
        android:onClick="btnHello_Click"
        android:layout_centerVertical="true"
        android:layout_toEndOf="@+id/textView" />


</LinearLayout>

public void btnHello_Click(View view)
    {
        EditText et = (EditText)(findViewById(R.id.etName));
        Toast.makeText(this, "Hello " + et.getText().toString(), Toast.LENGTH_SHORT).show();
    }

Tuesday, March 29, 2016

JQuery Ajax : Consuming Array of JSON

In this blog I am going to demonstrate consuming a Web Service which exposes the data from a table as JSON.

public class Contacts
{
    public int ContactId { get; set; }
    public string ContactName { get; set; }
    public string Email { get; set; }
    public string Phone { get; set; }
}

using System;
using System.Collections.Generic;
using System.Web.Services;
using System.Data.SqlClient;
using System.Web.Script.Serialization;

/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
 [System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {

    public WebService () {

        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }

    [WebMethod]
    public void GetContacts() {
        List<Contacts> glCG = new List<Contacts>();

        SqlConnection cnn = new SqlConnection(@"Data Source=.\sqlexpress;Initial Catalog=SimpleContactManagement;Integrated Security=True");
        cnn.Open();
        SqlCommand cmd = new SqlCommand("select * from Contacts", cnn);
        SqlDataReader dr = cmd.ExecuteReader();

        while(dr.Read())
        {
            int intConId = Int32.Parse(dr["ContactId"].ToString());
            Contacts c = new Contacts
            {
                ContactId = intConId,
                ContactName = dr["ContactName"].ToString(),
                Email = dr["Email"].ToString(),
               Phone = dr["Phone"].ToString()
            };
            glCG.Add(c);
        }

        JavaScriptSerializer sc = new JavaScriptSerializer();
        Context.Response.Write(sc.Serialize(glCG));
    }
    
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.12.1.js"></script>
    <script>
        $(document).ready(function () {
            getData();
        });

        function getData()
        {
            $.ajax(
                {
                    url: 'WebService.asmx/GetContacts',
                    dataType: "json",
                    method: 'post',
                    success: function (data) {
                        var contactsTable = $('#tblContacts tbody');
                        contactsTable.empty();

                        $(data).each(function (index, con) {
                            contactsTable.append('<tr><td>' + con.ContactId +
                                '</td><td>' + con.ContactName +
                                '</td><td>' + con.Email +
                                '</td><td>' + con.Phone +
                                '</td></tr>');
                        });
                    }
                });

            }
    </script>
</head>
<body>
    <table id="tblContacts">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Email</th>
                <td>Phone</td>
            </tr>
         </thead>
        <tbody>

        </tbody>
    </table>
</body>
</html>

JQuery Ajax and Json Array

using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Web.Services;
using System.Web.Script.Serialization;

[WebMethod]
    public void GetEmployees()
    {
        List<Employee> glEmployee = new List<Employee>();
        SqlConnection cnn = new SqlConnection(@"Data Source=.\sqlexpress;Initial Catalog=AjaxDb;Integrated Security=True");
        cnn.Open();
        SqlCommand cmd = new SqlCommand("select * from tblEmployee", cnn);
        SqlDataReader dr = cmd.ExecuteReader();
        while( dr.Read())
        {
            int intEmpId = Int32.Parse(dr["Id"].ToString());
            int intSalary = Int32.Parse(dr["Salary"].ToString());
            Employee emp = new Employee
            {
                Id = intEmpId,
                Name = dr["Name"].ToString(),
                Gender = dr["Gender"].ToString(),
                Salary = intSalary
            };
        glEmployee.Add(emp);

        }
      
        JavaScriptSerializer jsc = new JavaScriptSerializer();
        Context.Response.Write(jsc.Serialize(glEmployee));
    }

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.12.1.js"></script>
    <script>
    $(document).ready(function () {
        getData()
    });
  
    function getData()
    {
        $.ajax({
            url: 'WebService.asmx/GetEmployees',
            dataType: "json",
            method: 'post',
            success: function (data) {
                var employeeTable = $('#tblEmployee tbody');
                employeeTable.empty();

                $(data).each(function (index, emp) {
                    employeeTable.append('<tr><td>' + emp.Id + '</td><td>'
                        + emp.Name + '</td><td>' + emp.Gender
                        + '</td><td>' + emp.Salary + '</td></tr>');
                });
            },
            error: function (err) {
                alert(err);
            }
        });
    }
    </script>
</head>
<body>
    <table id="tblEmployee" border="1" style="border-collapse:collapse">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Gender</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>
</html>

Tuesday, March 15, 2016

JQuery Basic Filters and Asp .Net GridView

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.12.1.js"></script>
    <script>
        $(document).ready(function () {

            $("#btnMark").click(function (evt) {
                var target = $("#ddl").val();

                $(".Highlight").removeClass("Highlight");

                switch (target) {
                    case "FR":
                        $("tr:first").addClass("Highlight");
                        break;
                    case "LR":
                        $("tr:last").addClass("Highlight");
                        break;
                    case "OD":
                        $("tr:odd").addClass("Highlight");
                        break;
                    case "EV":
                        $("tr:even").addClass("Highlight");
                        break;

                }

                evt.preventDefault();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:Label ID="Label1" runat="server" Text="Mark Rows"></asp:Label>
        <asp:DropDownList ID="ddl" runat="server">
            <asp:ListItem Value="FR">First Row</asp:ListItem>
            <asp:ListItem Value="LR">Last Row</asp:ListItem>
            <asp:ListItem Value="OD">Odd</asp:ListItem>
            <asp:ListItem Value="EV">Even</asp:ListItem>
        </asp:DropDownList>
&nbsp;&nbsp;
        <asp:Button ID="btnMark" runat="server" Text="Mark" />
        <br />
    
    </div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
            <Columns>
                <asp:BoundField DataField="FirstName" HeaderText="First Name" />
                <asp:BoundField DataField="LastName" HeaderText="Last Name" />
                <asp:BoundField DataField="Country" HeaderText="Country" />
            </Columns>
        </asp:GridView>
    </form>
</body>
</html>

NorthwindEntities ctx = new NorthwindEntities();
    protected void Page_Load(object sender, EventArgs e)
    {
        GridView1.DataSource = ctx.Employees.ToList();
        DataBind();
    }

Asp .Net RadioButtonList and JQuery

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-1.12.1.js"></script>
    <script>
        $(document).ready(function()
        {
            $("#btnSubmit").click(
                function (evt) {
                    var result = $('input[type="radio"]:checked');
                    if(result.length > 0)
                    {
                        $("#Panel1").html(result.val() + " is checked");
                    }
                    return false;
                });
        });
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:RadioButtonList ID="RadioButtonList1" runat="server">
            <asp:ListItem>Male</asp:ListItem>
            <asp:ListItem>Female</asp:ListItem>
        </asp:RadioButtonList>
        <br />
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
    
    </div>
        <asp:Panel ID="Panel1" runat="server">
        </asp:Panel>
    </form>
</body>
</html>

JQuery Basic Selectors

<html>
<head>
    <title></title>
    

    <script src="jquery-1.12.1.js"></script>
    <script>
        $(document).ready(
            function () {
                $("#btnNoRow").click(function()
                {
                    alert($('tr').length);
                });

                $("#btnNoData").click(function () {
                    alert($('td').length);
                });

                $("#btnRed").click(function () {
                   $('tr').css('background-color', 'red')
                });

                $("#btnTable").click(function () {
                    alert($('table').html())
                });

                $("#btnData").click(function () {
                    alert($('table').text())
                });
            });
    </script>
</head>
<body>
    <table border="1">
        <tr>
            <td>Shalvin</td>
            <td>Praseed</td>
            <td>Vaisakh</td>
        </tr>
        <tr>
            <td>Biju</td>
            <td>Joshy</td>
            <td>Akhil</td>
        </tr>
        <tr>
            <td>Merin</td>
            <td>Soorya</td>
            <td>Sreelakshmi</td>
        </tr>
        <tr>
            <td>Simi</td>
            <td>Simon</td>
            <td>Shibin</td>
        </tr>
        <tr>
            <td>JavaScript</td>
            <td>JQuery</td>
            <td>AngularJS</td>
        </tr>
    </table>
    <br /><br />
    <div>
        DIV 1
        <br />
        <a href="http://shalvinpd.blogspot.com">Shalvin P D</a>
    </div>
    <br /><br />
    <a href="http://google.com">Google</a>
    <br /><br />
    <div>DIV 2</div>
    <br /><br />
    <span>SPAN 1</span>
    <br /><br />
    <div>DIV 3</div>

    <input id="btnNoRow" type="button" value="No of Table Rows" />

    <input id="btnNoData" type="button" value="No of Table Datas" />

    <input id="btnRed" type="button" value="Make Table Red" />

    <input id="btnTable" type="button" value="Show Table" />

    <input id="btnData" type="button" value="Show Table Data" />
</body>
</html>

Tuesday, February 23, 2016

JavaScript Basics

GetElementById

<html>
<head>
    <title></title>
    <script>
        window.onload = function()
        {
            document.getElementById("Hello").innerHTML = "Shalvin P D";
        }
    </script>
</head>
<body>
    <div id="Hello"></div>
</body>
</html>

Check whether Cookie is enabled

<script>
        window.onload = function () {
            if (navigator.cookieEnabled) {
                alert("This browser supports cookies");
            }
            else {
                alert("This browser does not support cookies");
            }
        }
    </script>

typeof

 function NumberEg()
        {
             var fare = 22.50;
            alert(typeof fare);
        }

output : numeric

Strings

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script>
        function ConcatEg()
        {
            alert("Shalvin" + ' P D');
        }

        function Embed()
        {
            alert("Shalvin \"P  D\"");
        }

        function EmbedSingleQuote()
        {
            alert('Merin\'s assignment');
        }

        function LengthEg()
        {
            var name = 'Simi Simon';
            alert(name.length);
        }

        function TrimEg()
        {
            var name = ' Shibin ';
            alert('[' + name.trim() + ']');
            alert('[' + name + ']');
        }
        function toLowerEg() {
            var name = 'Sreelakshmi S';
            alert(name.toLocaleLowerCase());
        }
        function toUpperCaseEg() {
            var name = 'soorya';
            alert(name.toUpperCase());
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <p>
        <br />
        <asp:Button OnClientClick ="ConcatEg()" ID="btnSD" runat="server" Text="Single and Double Quote" />
    </p>
    <p>
        <asp:Button OnClientClick ="Embed()" ID="btnEmbed" runat="server" Text="Embed Double Quotes" />
    </p>
    <p>
        <asp:Button OnClientClick ="EmbedSingleQuote()" ID="btnEmbedSingle" runat="server" Text="Embed Single Quote" />
    </p>
    <p>
        <asp:Button OnClientClick="LengthEg()" ID="btnLength" runat="server" Text="Length" />
    </p>
    <p>
        <asp:Button Text="trim" runat="server" OnClientClick ="TrimEg()" />
    </p>
    <p>
    <asp:Button OnClientClick="toLowerEg()" Text="toLower" runat="server" />

        </p>
    <p>
    <asp:Button Text="toUpperCase" OnClientClick="toUpperCaseEg()" runat="server" />
        </p>
</asp:Content>

JavaScript Arrays

<script>
        var friends = [];
        friends[0] = 'Praseed';
        friends[1] = 'Pai'

        window.onload = function()
        {
              document.write(friends[0]);
        }
    </script>

Push for adding items to Array

<script>
        var friends = [];
        friends[0] = 'Praseed';
        friends[1] = 'Pai'
        friends.push('Vaisakh');

        window.onload = function()
        {
            document.write(friends[0] + "<br/>");
            document.write(friends[2]);
        }
    </script>

Pop

 <script>
        var friends = [];
        friends[0] = 'Praseed';
        friends[1] = 'Pai'
        friends.push('Vaisakh');
        friends.pop();

        window.onload = function()
        {
            document.write(friends[0] + "<br/>");
            document.write(friends[2]);
        }
    </script>

Iterating an Array

<script>
        var friends = [];
        friends[0] = 'Praseed';
        friends[1] = 'Pai'
        friends.push('Vaisakh');
        
        window.onload = function()
        {
            for (var i = 0; i < friends.length; i++) {
                document.write(friends[i] + "<br/>");
            }
        }
    </script>

Asp .Net JavaScript Example

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="ArrayPushDisplayShalvin.aspx.cs" Inherits="ArrayPushDisplayShalvin" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
 <script>
     var Friends = ['Shalvin', 'Reny', 'Praseed'];
     window.onload = function () {
         SetFocusOnTextBox();
         Display();
     }
     function Display()
     {
         var lbl = document.getElementById("lblMessage");
         lbl.innerHTML = "";
         for (var i = 0; i < Friends.length; i++) {
             lbl.innerHTML += Friends[i] + "<br/>";
             //lbl.innerText += Friends[i] + "<br/>";
     }
         return false;
     }
     function Save()
     {
         var s = document.getElementById("txtName");
         Friends.push(s.value);
         Display();
         s.value = "";
         s.focus();
         return false;
     }

     function SetFocusOnTextBox()
     {
         var s = document.getElementById("txtName");
         s.focus();
     }

     function Delete() {
         Friends.pop();
         Display();
         return false;
     }
 </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <p>
        Name
        <asp:TextBox ID="txtName" runat="server" ClientIDMode="Static"></asp:TextBox>
    </p>
    <p>
        <asp:Button ID="btnSave" OnClientClick ="return Save()" runat="server" Text="Save " ClientIDMode="Static" />
&nbsp;
        <asp:Button ID="btnDeleteFromLast" runat="server" 
            OnClientClick ="return Delete()"
            ClientIDMode="Static" Text="Delete from Last" />
&nbsp;
        <asp:Button ID="btnDisplay" runat="server" Text="Display" 
            OnClientClick ="return Display()" ClientIDMode="Static" OnClick="btnDisplay_Click" />
    </p>
    <p>
        <asp:Label ID="lblMessage" runat="server" 
            ClientIDMode="Static"></asp:Label>
        <br />
    </p>
</asp:Content>

JavaScript Objects

I am creating an object.

<head>
    <script>
        var Contact = {};
        Contact.Name = "Shalvin P D";
        window.onload = function () {
            alert(Contact.Name);
        }
    </script>
</head>
<body>
</body>

Another way of doing the same:

<head>
    <title></title>
    <script >
        var Contact = {Name : "Shalvin P D"};
            window.onload = function () {
            alert(Contact.Name);
        }
    </script>
</head>
<body>

</body>

Let's have few more properties

<head>
    <title></title>
    <script >
        var Contact = {Name : "Shalvin P D", Location : "Kochi"};
            window.onload = function () {
            alert("I am " + Contact.Name + " located at " + Contact.Location);
        }
    </script>
</head>
<body>

</body>

If I try to alert something like Contact.Specialization we get undefined. Because Specialization doesn't exist in Contact.

Bracket Notation

<head>
       <script>
        var Contact = {};
        Contact["Name"] = "Shalvin P D";
        window.onload = function () {
            alert(Contact.Name);
        }
    </script>
</head>

Iterating through properties using for in

<script>
        var Contact = {Name : "Shalvin P D", Location : "Kochi", Specialization:".Net"};
        window.onload = function () {
            for (var key in Contact) {
               document.write(key + "<br/>");
            }
        }
</script>

Iterating through property values

  <script>
        var Contact = {Name : "Shalvin P D", Location : "Kochi", Specialization:".Net"};
        window.onload = function () {
            for (var key in Contact) {
                document.write(Contact[key]);
            }
        }
    </script>

Wednesday, February 17, 2016

AngularJS Part 3 : Filters

<body ng-app="">
    <ul ng-init="name=['Shalvin','Reny John Jose', 'John James','Prakash Jacob Mathew']">
        <li ng-repeat="x in name">{{x | uppercase }}</li>

    </ul>
 </body>

<body ng-app="">
    Name <input type="text" ng-model="namef" />
    <ul ng-init="name=['Shalvin','Reny John Jose', 'John James','Prakash Jacob Mathew','Anson']">
        <li ng-repeat="x in name | filter:namef">{{x}}</li>
    </ul>
</body>

Filter and OrderBy

<body ng-app="">
    Name <input type="text" ng-model="namef" />
    <ul ng-init="name=['Shalvin','Reny John Jose', 'John James','Prakash Jacob Mathew','Anson']">
        <li ng-repeat="x in name | filter:namef | orderBy:x">{{x}}</li>
    </ul>
</body>

Saturday, February 6, 2016

AngularJS Part 2 : Controllers

<html ng-app="myApp">
<head >
    <title></title>
    <script src="Scripts/angular.js"></script>
</head>
<body ng-controller="HomeCtrl">
         <div>
            <ul>
                <li ng-repeat="x in Friends">{{x}}</li>
            </ul>
         </div>
    <script>
        var app = angular.module("myApp", [])
        .controller("HomeCtrl", function ($scope) {
            $scope.Friends = ['Shalvin', 'Pankaj', 'Praseed'];
        });
    </script>
</body>
</html>

Controller in separate JavaScript file
App.js

var app = angular.module("myApp", [])
.controller("HomeCtrl", function ($scope) {
    $scope.Friends = ['Shalvin', 'Pankaj', 'Praseed'];
});

index.htm

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head>
    <title></title>
    <script src="../Scripts/angular.js"></script>

    <script src="Apps/App.js"></script>
</head>
<body ng-controller="HomeCtrl">
    <ul>
        <li ng-repeat="x in Friends">{{x}}</li>
    </ul>
</body>

Controller Complex Array
AppComplex.js

var app = angular.module("myApp", [])
.controller("HomeCtrl", function ($scope) {
    $scope.Friends = [{ Name: 'Shalvin', Location: 'Kochi' },
        {Name:'Pankaj', Location :'NCR'},
        {Name:'Praseed', Location:'Alwaye'}];
});

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head>
    <title></title>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/AppComplex.js"></script>
</head>
<body ng-controller="HomeCtrl">

    <ul>
        <li ng-repeat="x in Friends">{{x.Name}} located  at {{x.Location}}</li>
    </ul>
</body>
</html>

Friday, January 22, 2016

SQL for Todo

create database ShalvinTodo

use ShalvinTodo

create table Tasks(TaskId int identity(1,1) primary key, TaskName varchar(40), Status varchar(15))

insert into Tasks values ('Wath AngularJS Video', 'Ongoing')
insert into Tasks values ('.Net Saturday Class', 'Ongoing')
insert into Tasks values ('User session', 'Not started')
insert into Tasks values ('Shopping', 'Not started')

select * from Tasks

select * from Tasks where Status = 'Ongoing'

select TaskName from Tasks

select TaskName, Status from Tasks

delete from Tasks where TaskId = 3

update Tasks set Status = 'Finished' where TaskId = 2