Tuesday, April 27, 2010

How To Render Thead and Tbody tag in GridView

In this post i am going to share tips and tricks about how to generate Thead and Tbody in gridview because default GridView in asp.net generate table>tr>th type of structure. uncomment this statement and see the result //Uncomment this line for THEAD and TBODY //grdPage.HeaderRow.TableSection = TableRowSection.TableHeader;

<%@ 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></title>
</head>
<body>
<form id="form1" runat="server">
<div>
   <asp:GridView ID="grdPage" runat="server">
   </asp:GridView>
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

   grdPage.DataSource = new Person().GetAll();
   grdPage.DataBind();
   //Uncomment this line for  THEAD and TBODY
   //grdPage.HeaderRow.TableSection = TableRowSection.TableHeader;
}

}
class Person
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public int Age { get; set; }
public List<Person> GetAll()
{

   List<Person> list = new List<Person>()
   {
       new Person{Id=1,FirstName="Barak",LastName="Obama",Age=41},
       new Person{Id=2,FirstName="Scott",LastName="Allen",Age=43},
       new Person{Id=3,FirstName="Bill",LastName="Gates",Age=21},
       new Person{Id=4,FirstName="Name",LastName="LastName",Age=21},
   };
   return list;
}

}

How to validate form field using Jquery in asp.net

In this post i am going to show how to validate form field using Jquery in asp.net aspdotnetcodebook
<%@ 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></title>

    <script src="scripts/jquery.js" type="text/javascript"></script>

    <style type="text/css">
        .label
        {
            float: left;
            width: 120px;
        }
        .textbox
        {
            width: 200px;
        }
        .error
        {
            color: red;
            padding-left: 10px;
        }
        div
        {
            padding: 5px;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function() {
            $('.error').hide();
            $('#btnLogin').click(function(event) {
                $('.textbox').each(function() {
                    var data = $(this).val();
                    var len = data.length;
                    if (len < 1) {
                        $(this).parent().find('.error').show();
                    }
                    else {
                        $(this).parent().find('.error').hide();
                    }
                });
                event.preventDefault();
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <body>
            <div>
                <span class="label">User Id *</span>
                <asp:TextBox ID="txtUserName" runat="server" CssClass="textbox"></asp:TextBox>
                <span class="error">This field cannot be blank</span></div>
            <div>
                <span class="label">Password *</span><asp:TextBox CssClass="textbox" ID="txtPassword"
                    TextMode="Password" runat="server"></asp:TextBox><span class="error"> This field cannot
                        be blank</span></div>
            <asp:Button ID="btnLogin" runat="server" Text="Login" />
        </body>
    </div>
    </form>
</body>
</html>