Change css of a control using jquery

To Change CSS using jquery there are two ways:
1.Using SwithClass
2.Using remoceClass and addClass
example:

     <div class=''Red"></div>

To remove the css of above div we can use $("#div").removeClass(''Red");//Red is the css class
To add new css we can use  $("#div").removeClass("Yellow");//Yellow is the css Class

when we want to change css class of an element there is an another option in jquery i.e switchClass

eg : $("#div").switchClass("Previousclass","NewClass","1000","behaviour");

it works faster than add and remove class .

enjoy coding

Gridview with edit and delete button in asp.net using jquery

Hello friends,Today I am going to write codes for grid view with jquery to get employee list,edit employee and delete.

It will be help full to show data in grid .

So, Let's Start-
We are going to do three things here .

1. Get employees details from database and show as a grid .
2. Modify the employees details.
3. Delete records.

In this post we will cover only first scenario :
 Our final output will be like below:

Now lets start:

On the aspx page write the following code:

In the above code:

<table id="gridEmployee"> has been taken to bind employee list as a gridview.

and there is button above ,On the click event of this button call a javascript function : onclick="getEmployeeList()"

Now add the below script to get http request from server side:

<script type="text/javascript">

    function getEmplyeeList() {

         $(document).ready(function () {

                $.ajax({

                type: "POST",

                contentType: "application/json; charset=utf-8",

                url: "blogtest.aspx/getEmployee",// Url of web method

                data: "{}",

                cache: false,

                dataType: "json",

                success: function (data) {

                     $("#gridEmployee").empty(); // to clear table on each button click

// define header for the grid

                    $("#gridEmployee").append("<tr class='ui-state-default ui-corner-all'><td  class='td' >Employee id</td><td class='td'>Employee Name</td><td class='td'>Age</td><td class='td'>Department</td><td class='td'>Edit</td><td class='td'>Delete</td></tr>");

                    

 // bind employee data in the grid

                    for (var i = 0; i < data.d.length; i++) {

                       

                        $("#gridEmployee").append('<tr><td class=ui-state-highlight ui-corner-all>' +   

data.d[i].employeeId + '</td><td class=ui-state-highlight ui-corner-all>' + data.d[i].employeeName + '</td><td 

class=ui-state-highlight ui-corner-all>' + data.d[i].age + '</td><td class=ui-state-highlight ui-corner-all>' + data.d[i].deparment + '</td><td class=ui-state-highlight ui-corner-all><img src="images/edit.jpg"  onclick="ModifyEmployee(\'' + data.d[i].employeeId + '\',\'' + data.d[i].employeeName + '\',\'' + data.d[i].age + '\',\'' + data.d[i].deparment + '\')"/></td><td class=ui-state-highlight ui-corner-all> <img src="images/delete.jpg"  onclick="ModifyEmployee(\'' + data.d[i].employeeId + '\',\'' + data.d[i].employeeName + '\',\'' + data.d[i].age + '\',\'' + data.d[i].deparment + '\')"/></td></tr>');

                    }

              },

                error: function (result) {

                  

                     alert('error');

                }

            });

        });

    }

</script>

Now create a web method named :getEmployee , in .cs page

  [WebMethod(EnableSession = true)]

    public static List<members> getEmployee()

    {

        //You can get data from database and bind in the below list 

        List<members> employeeList = new List<members>();

        employeeList.Add(new members { employeeId = "1", employeeName = "Manoj",age="25 years",deparment="Information Technology" });

        employeeList.Add(new members { employeeId = "2", employeeName = "Vishal", age = "28 year", deparment = "Account" });

        employeeList.Add(new members { employeeId = "3", employeeName = "Sourav", age = "29 years", deparment = "Finance" });

        employeeList.Add(new members { employeeId = "4", employeeName = "Prabhat", age = "30 years", deparment = "Information Technology" });

        employeeList.Add(new members { employeeId = "5", employeeName = "Vijay", age = "38 years", deparment = "HR" });

        employeeList.Add(new members { employeeId = "6", employeeName = "Prashant", age = "36 year", deparment = "Sales & Marketing" });

     

    }

That's it. Now we have completed our first scenario .In the next post we will learn how to modify and delete the records.

If any confusion please contact me : mkumar.soft@gmail.com

Happy coding..

How to populate dropdown using jquery

Hi !

I have started to post some code stuff using jquery in asp.net .

Today, I am writing about how to fill drop down using jquery and how to get dropdown selected value.

I have tried to simplify my coding so that it could be understandable.If you have any confusion , contact me at : mkumar.soft@gmail.com.

So, lets start:

We have two scenario: 

1. Fill dropdown using Jquery

2. Work on value selection of dropdown.

For this let's create a task:

We have a list of country and state and need to fill country dropdown on page load and on the selection of country ,state should be filled on the basis of selected country code.

For this we need to add jquery reference on our page ,like :-

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">

Another simple work need to be done :

                                   add  two dropdowns on the aspx page:

   <select id="ddlCountry"></select>

   

   <select id="ddlstate"></select>

//asp dropdown can be also added here 

Our next step is to create a web method as below to get country list:

    [WebMethod]

    public static List<Country> GetCountries()

    { 

         //You can get data from data base and add in list

        List<Country> countries = new List<Country>();

        countries.Add(new Country { ID = "1", CountryName = "India" });

        countries.Add(new Country { ID = "2", CountryName = "Singapore" });

        countries.Add(new Country { ID = "3", CountryName = "Malaysia" });

        return countries;

    }

//create a class Named country with required public member:-

public class Country

{

    public string CountryID;

    public string CountryName;

//state id and state Name will be used in state binding

    public string StateId;

    public string StateName;

   

}

Now it's time to populate country list in dropdown using jquery. let's see:

<script type="text/javascript">

                $(document).ready(function() {

                $.ajax({

                type: "POST",

                contentType: "application/json; charset=utf-8",

                url: "jquerytest.aspx/GetCountries",

                data: "{}",

                dataType: "json",

                success: function(data) {

                $.each(data.d, function(text, value) {

                $("#ddlCountry").append($("<option>     </option>").val(value.CountryID).html(value.CountryName));

                });

                },

                error: function(result) {

                alert("Error");

                }

                });

                });

                

   </script>             

 Copy and paste the above code .That's it .Country list will populate in ddlcountry dropdown.

Now Our second scenario :-to get state name on the basis of selected country name.

for this we are going to create another function and call it on ONCHANGE() event of dropdown.

<select  id="ddlCountry" onchange="return ddlselected()" / >

<script type="text/javascript">

 function ddlselected()

 {

 var a=$("#ddlCountry option:selected").val();   //To get selected value of ddlCountry  

 $(document).ready(function() {

                $.ajax({

                type: "POST",

                contentType: "application/json; charset=utf-8",

                url: "jquerytest.aspx/GetState",

                data:"{'St':'"+a+"'}",//country name as parameter

                cache:false,                

                dataType: "json",

                success: function(data) {                

                $("#ddlstate").empty();// use this to clear ddlstate before populate new data

                $.each(data.d, function(key, value) {

                $("#ddlstate").append($("<option></option>").val(value.StateId).html(value.StateName));

                });

                },

                error: function(result) {

                alert("Error");

                }

                });

                });

Now create another web method to get state name :-

    [WebMethod]

    public static List<Country> GetState(string St)

    { 

//here I am assuming that we have already get state list on the basis of sql query .

        List<Country> State = new List<Country>();

        State.Add(new Country { StateId = "1", StateName = "Bihar" });

        State.Add(new Country { StateId = "2", StateName = "UP" });

        State.Add(new Country { StateId = "3", StateName = "Delhi" });

        State.Add(new Country { StateId = "4", StateName =  St.ToString() });

        return State;

    }

That's it.  How it is simple! .

Any confusing ,Don't hesitate  to contact on :mkumar.soft@gmail.com

enjoy coding.