• 1. What's jQuery? How to use in your Application?
• 2. What is CDN and its use?
• 3. JavaScript Query Selectors
• 4. JavaScript Query Events
• 5. JavaScript Query Effects
• 6. JavaScript Query HTML/CSS
• 7. JavaScript Query Ajax
• 8. JavaScript Query Methods
• 9. JavaScript Query Examples

 public class TestClass
    {
        public int UserID { get; set; }
        public string Fullname { get; set; }
        public string EmailAddress { get; set; }
    }

  private static List<testclass> FillDataModel()
        {
            List<testclass> testList = new List<testclass>();
            for (int i = 0; i < 10; i++)
            {
                TestClass test = new TestClass();
                test.UserID = i;
                test.Fullname = "Name " + (i + 1);
                test.EmailAddress = (i + 1) + "@yahoo.com";
                testList.Add(test);

            }
            return testList;
        }

  List<testclass> testList = FillDataModel();
            var jsonSerialiser = new JavaScriptSerializer();
            var json = jsonSerialiser.Serialize(testList);
            HiddenField jsonField = new HiddenField
            {
                ID = "data"
            };
            jsonField.Value = json;
            this.Form.Controls.Add(jsonField);

 function LetsTestJson()
        {
            var field = document.getElementById('data');
            var data = JSON.parse(field.value);
            for (var i = 0; i < data.length; i++) {
                var values = "ID : " + data[i].UserID + "\nFull Name : " + data[i].Fullname + "\nEmail : " + data[i].EmailAddress;
                alert(values);
            }
            
        }

This walkthrough will get you started with an application that uses the Entity Framework (EF) to read and write data from a SQLite database. It is intended to be similar to the Code First to a New Database walkthrough.

There are currently two SQLite providers for EF that I know of: System.Data.SQLite andDevart's dotConnect for SQLite. Devart's provider has a much richer set of features, but it is also a commercial product. In the spirit of FOSS, we will be using the System.Data.SQLite provider for this walkthrough. I encourage you to keep the Devart provider in mind, however, if your project requires that extra level of support.

Create the Application

For simplicity, we will be using a Console Application, but the basic steps are the same regardless of project type.

1. Open Visual Studio
2. Select File -> New -> Project...
3. Select Console Application
4. Name the project
5. Click OK

Create the Model

For our model, we'll be borrowing pieces from the Chinook Database (a cross-platform, sample database). Specifically, we will be using Artists and Albums.

Add the following two classes to your project.

public class Artist
{
    public Artist()
    {
        Albums = new List();
    }
 
    public long ArtistId { get; set; }
    public string Name { get; set; }
 
    public virtual ICollection Albums { get; set; }
}
 
public class Album
{
    public long AlbumId { get; set; }
    public string Title { get; set; }
 
    public long ArtistId { get; set; }
    public virtual Artist Artist { get; set; }
}

Create a Context

1. Select Tools -> Library Package Manager -> Package Manager Console
2. Inside the Package Manager Console (PMC) run Install-Package EntityFramework

class ChinookContext : DbContext
{
    public DbSet Artists { get; set; }
    public DbSet Albums { get; set; }
 
    protected override void OnModelCreating(DbModelBuilder modelBuilder)
    {
        // Chinook Database does not pluralize table names
        modelBuilder.Conventions
            .Remove();
    }
}

Install the Provider

1. Inside PMC, run Install-Package System.Data.SQLite.x86

Add the Database

1. Download and extract the SQLite version of the Chinook Database
2. Select Project -> Add Existing Item...
3. Browse to the folder where you extracted the database
4. Select All Files from the dropdown next to File name
5. Select the Chinook_Sqlite_AutoIncrementPKs.sqlite file
6. Click Add
7. Select the file in Solution Explorer
8. In Properties, set Copy to Output Directory to Copy if newer

Start Coding

using (var context = new ChinookContext())
{
    var artists = from a in context.Artists
                  where a.Name.StartsWith("A")
                  orderby a.Name
                  select a;
 
    foreach (var artist in artists)
    {
        Console.WriteLine(artist.Name);
    }
}

        using (var context = new ChinookContext())
{
    context.Artists.Add(
        new Artist
        {
            Name = "Anberlin",
            Albums =
            {
                new Album { Title = "Cities" },
                new Album { Title = "New Surrender" }
            }
        });
    context.SaveChanges();
}

Conclusion

The $() factory function:

Example:

    


   
   
   


   

      

This is a paragraph.

This is second paragraph.
This is third paragraph.


   

How to use Selectors?

• $('*'): This selector selects all elements in the document.
  
• $("p > *"): This selector selects all elements that are children of a paragraph element.
  
• $("#specialID"): This selector function gets the element with id="specialID".
  
• $(".specialClass"): This selector gets all the elements that have the class of specialClass.
  
• $("li:not(.myclass)"): Selects all elements matched by <li> that do not have class="myclass".
  
• $("a#specialID.specialClass"): This selector matches links with an id of specialID and a class of specialClass.
  
• $("p a.specialClass"): This selector matches links with a class of specialClass declared within <p> elements.
  
• $("ul li:first"): This selector gets only the first <li> element of the <ul>.
  
• $("#container p"): Selects all elements matched by <p> that are descendants of an element that has an id of container.
  
• $("li > ul"): Selects all elements matched by <ul> that are children of an element matched by <li>
  
• $("strong + em"): Selects all elements matched by <em> that immediately follow a sibling element matched by <strong>.
  
• $("p ~ ul"): Selects all elements matched by <ul> that follow a sibling element matched by <p>.
  
• $("code, em, strong"): Selects all elements matched by <code> or <em> or <strong>.
  
• $("p strong, .myclass"): Selects all elements matched by <strong> that are descendants of an element matched by <p> as well as all elements that have a class of myclass.
  
• $(":empty"): Selects all elements that have no children.
  
• $("p:empty"): Selects all elements matched by <p> that have no children.
  
• $("div[p]"): Selects all elements matched by <div> that contain an element matched by <p>.
  
• $("p[.myclass]"): Selects all elements matched by <p> that contain an element with a class of myclass.
  
• $("a[@rel]"): Selects all elements matched by <a> that have a rel attribute.
  
• $("input[@name=myname]"): Selects all elements matched by <input> that have a name value exactly equal to myname.
  
  
• $("input[@name^=myname]"): Selects all elements matched by <input> that have a name value beginning with myname.
  
• $("a[@rel$=self]"): Selects all elements matched by <p> that have a class value ending with bar
  
  
• $("a[@href*=domain.com]"): Selects all elements matched by <a> that have an href value containing domain.com.
  
• $("li:even"): Selects all elements matched by <li> that have an even index value.
  
• $("tr:odd"): Selects all elements matched by <tr> that have an odd index value.
  
• $("li:first"): Selects the first <li> element.
  
• $("li:last"): Selects the last <li> element.
  
• $("li:visible"): Selects all elements matched by <li> that are visible.
  
• $("li:hidden"): Selects all elements matched by <li> that are hidden.
  
• $(":radio"): Selects all radio buttons in the form.
  
• $(":checked"): Selects all checked boxex in the form.
  
• $(":input"): Selects only form elements (input, select, textarea, button).
  
• $(":text"): Selects only text elements (input[type=text]).
  
• $("li:eq(2)"): Selects the third <li> element
  
• $("li:eq(4)"): Selects the fifth <li> element
  
• $("li:lt(2)"): Selects all elements matched by <li> element before the third one; in other words, the first two <li> elements.
  
• $("p:lt(3)"): selects all elements matched by <p> elements before the fourth one; in other words the first three <p> elements.
  
• $("li:gt(1)"): Selects all elements matched by <li> after the second one.
  
• $("p:gt(2)"): Selects all elements matched by <p> after the third one.
  
• $("div/p"): Selects all elements matched by <p> that are children of an element matched by <div>.
  
• $("div//code"): Selects all elements matched by <code>that are descendants of an element matched by <div>.
  
• $("//p//a"): Selects all elements matched by <a> that are descendants of an element matched by <p>
  
• $("li:first-child"): Selects all elements matched by <li> that are the first child of their parent.
  
• $("li:last-child"): Selects all elements matched by <li> that are the last child of their parent.
  
• $(":parent"): Selects all elements that are the parent of another element, including text.
  
• $("li:contains(second)"): Selects all elements matched by <li> that contain the text second.