Using Jquery JTable (believe me its the best jquery tool i came across)

JTable Basics : (DownLoad Code)

Hai Guys Welcome again and in this you going to learn about Jquery Jtable.

First Things First:  1) You need to have a database table created in ur Database
2) Data Entity Model for that Table(look for my first Topic(gridview) if u donno how to add Data Entity Model    and
3)You need to have some Jquery Files to achieve this and here they are: you can download all of them from here..

https://www.dropbox.com/s/mav3pdbwgtgxq6k/assets.rar

Now Open the Visual Studio 2013 or 2012. i have started using 2013 since yesterday it was Awesome.
Create a project as usual and  Name it as JTableDemo and ad a webform 

Now Add a Class File And name it as Member.cs

Now Add Some properties to our class 

           public int MemberId { get; set; }

         public string Name { get; set; }

                     public string EmailAddress { get; set; }

               public string Password { get; set; }

            public string Gender { get; set; } 

              public string Location { get; set; }

Add Entity Model and add our TblMembers to our Project

Select database Name 

By Clicking Finish  Butoon it will create something like this for us 

  

Okay now you all set to write Some code for Jtable.


1. Create a div and name its ID property to "JTableDemo" or what ever you may like 
Now add Some Scripts in the Head Section of ur web-form  

    <link href="assets/jquery-ui.css" rel="stylesheet" />
    <link href="assets/jtable.2.3.1/themes/jqueryui/jtable_jqueryui.css" rel="stylesheet" />
    <link href="assets/jtable.2.3.1/themes/metro/green/jtable.css" rel="stylesheet" />
    <script src="assets/jquery-1.9.1.js"></script>
    <script src="assets/jquery-ui.js"></script>

    <script src="assets/jtable.2.3.1/jquery.jtable.js"></script>
    <script src="assets/jtable.2.3.1/external/json2.js"></script>

    <script src="assets/jtable.2.3.1/extensions/jquery.jtable.aspnetpagemethods.js"></script>

Now let me explain Something important to you. Its about the scripts that we have used above 

First of all you dont need to write them just you can find them in assets folder which ihave giiven download link and then you can just Drag and Drop whats required and the important thing is 

1. You have select the style files i mean .CSS files first and then you need to load .JS Files (May be the other ways work but its just an Advice)


Now its time to write some J Query(JQ) Code. For that we need a script tag which looks like 

<script type="text/JavaScript">  </script>

in that Tag we need to write our JQ Code 


<script type="text/javascript">
        debugger;
        $(document).ready(function () {
            $("#JTableDemo").jtable({
                title: 'The JTable Demo',
                paging: true, //Enables paging
                pageSize: 10, //Actually this is not needed since default value is 10.
                sorting: true, //Enables sorting
                defaultSorting: 'Name ASC', //Optional. Default sorting on first load.
                actions:
                {

                    listAction: '/JTablePractice.aspx/MembersList',
                    createAction: '/Home/CreateNewMember',
                    updateAction: '/GettingStarted/UpdatePerson',
                    deleteAction: '/GettingStarted/DeletePerson'

                },
                fields:
                {
                    MemberId:
                    {
                        title: 'MemberId',
                        key: true,

                    },
                    Name:
                    {
                        title: 'Name',
                        width: '13%'
                    },
                    EmailAddress:
                    {
                        title: 'Email-Id',
                        width: '15%'
                    },
                    Pasword:
                    {
                        list: false
                    },
                    Gender:
                    {
                        title: 'Gender',
                        width: '8%'
                    },
                    Location:
                    {
                        title: 'Location',
                        width: '12%'
                    },


                },




            });

            $('#JTableDemo').jtable('load');
        });
    </script>



Now lemme Explain those things for you (note these are Case-Sensitive)


1.       title :  As we all know its the title of our JTable
2.   actions :  This is the coolest part of Jtable in which we define the Function                     or action that needs to be taken when we add or delete or                             update records in JTable. Cool ah?

3.      fields:     This is responsible for  the column names and the data that                         will be appeared in those columns.( name the field as it is in                         database or in the data where U'r loading the table from.


Now we are all set Run our App. Click F5 or Ctrl+F5. 

       Okay "no data Available because we haven't send any Data to the Table. See  we haven't written any classes or methods for retrieving Data from Db.

                  listAction: '/JTablePractice.aspx/MembersList',
                    createAction: '/Home/CreateNewMember',

And one thing we can even add an update and delete buttons for our Jtable and even sorting and paging implementations now that the cool thing about Jtable.  All u need to do is adding them to "actions" field.

 SEE              updateAction: '/GettingStarted/UpdatePerson',
                    deleteAction: '/GettingStarted/DeletePerson'

Note listAction, createAction, updateAction, deleteAction are predefined action names for jtable so use them as it is.


Now we will write code for retrieving Data From Database.

[WebMethod(EnableSession = true)]
        public static object MembersList()
        {
            try
            {
                //Get data from database
                using (var db = new ASPPracticesEntities())
                {
                    var MembResult = (from MemList in db.TblMembers select MemList).ToList();
                    if (MembResult.Count != 0)
                        return new { Result = "OK", Records = MembResult };
                        else return 0;
                }
            }
            catch (Exception ex)
            {
                return new { Result = "ERROR", Message = ex.Message };
            }

        }


Now Run Program and we will get the desired output

Whoa! Thats cool right 

See there You can Find delete button and Edit Button and also u can select noof rows and can goto another pages all u need to do is to write some code. Which i will update in few days.

That's all for the Gotta Go. Indians are being Demolished by South Africans. 
Had to see it. 

Bubbye 

Web Services Beginners Tutorials

Building ASP.NET web services


 Create  an ASP.NET Web Application and name it WebServiceBasics.

Right Click on it and add new item "Web Service" name it as you want DemoWebServices.asmx

 Now after clicking that it VS 2012 will create some code for us

lets get into some important things in this:

1. [WebService(Namespace = "http://tempuri.org/")]
 
               http://tempuri.org this will represent our site which is holding these web services

2.  [WebMethod]

                Each of our classes or methods will be decorated with [WebMethod] to specify thats  a web method

Now we get into some coding part

In this i will just create a web service for log-in in asp.net  using entity framework

NOTE: i have created tblPersons and added that to our solution using entity Framework (in case u missed see my first post, in that i explained about doing it)


write a method

[WebMethod]
        public bool Login(string Email, string pass)
        {
            using (var persontable = new Entities())
            {

                var UserDetails = (from persons in persontable.tblPersons
                                   where (persons.Email == Email && persons.Password == pass)
                                   select persons).ToList();
                if (UserDetails.Count() != 0)
                {
                    return true;
                }
                else
                {
                    return false;

                }

            }
        }

Now we are all set run this web service and the output will looks like

       
whoo that's our desired output see its way easy and now click on Login link in that now we'll be redirected to another page

.

Now we have to open another VS 2012 project/Solution and we can use these services (where ever you are )  all you need is just the url: http://localhost:5056/DemoWebServices.asmx

So open another visual studio project(you know what i mean)

And add a new project WebServiceUsers

And add a new form name it as login.aspx and add two text boxes and a login Button you can use toolbox or u can write it on ur own

 <table>
            <tr>
                <td>
                    Email-ID
                </td>
                <td>
                    <asp:TextBox ID="txtEmail" runat="server" ></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    Password
                </td>
                <td>
                    <asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>
                </td>
            </tr>
            <tr >
                
                <td  style="text-align:center" >
                    <asp:Button ID="btnLogin" runat="server" Text="Sign In" OnClick="btnLogin_Click" ></asp:Button>
                </td>
            </tr>
        </table>


Now add Button click code in code-behind file :

1st thing you have to do is add our already created WEB SERVICE to our project.

To do that right click on our project name and select "add a service reference"  and select advanced tab located down the box

and select web reference in the next window

Now add our webservice home page url which is (http://localhost:5056/DemoWebServices.asmx ) in the URL field in the next window and  click go to view our service

whoa  finally there's our webservice and now click Add reference

First create a new instance to our webservice and then add some code to create our login page

localhost1.DemoWebServices objWebService = new localhost1.DemoWebServices();

and now add this code in button click event in our aspx(code behind) page

 protected void btnLogin_Click(object sender, EventArgs e)
        {

            localhost1.DemoWebServices objWebService = new localhost1.DemoWebServices();
            
            string localEmail = txtEmail.Text;
            string localPassword = txtPassword.Text;
            if (objWebService.Login(localEmail, localPassword))
            {
                Response.Redirect("Home1.aspx");
            }
            else
            {
                Response.Write("Enter Correct Details");

            }
            

        }

Now ya'll set to run the program keep it in mind your web service has to be running in order to get use of that service 

Enter an email and password which you have already added in tblPersons  and sign in 

 Hey that worked.

That's all for the day. Hope you enjoyed it

Easy Way in Displaying Data in GridView

Here I will show you how to Fill a grid view Using Entity Frame work.

First open visual studio and create the stuff that's needed for us like add a solution and add an Empty web application to that :


next follow these steps:


STEP:1--->Add a web form to our Empty web application
STEP:2--->Add a ADO.NET Data Entity Model

STEP:3--> NOW GET THE CONNECTION STRING IN WEB CONFIG AND WRITE IN OUR HOME.ASPX.CS FILE
                             

Now get into the main coding part...

I have written a function BindGrid()  to bind data to our grid

and coming to BindGrid() function  first line is using( var DbMember = new PracticeEntities()) which is Entity frame work and now comes our Sql command see its a bit different from regular sql commands. Al we need to do is writing that query and convert into list and assign it to datsource

Put a break point over there and run the application

Now there's our list of  our table data

Hope you liked it. Happy Coding