Tag Archives: jQuery

jQuery: special selectors

November 13, 2012 – 3:37 PM

We’ve seen how to select document elements based on their tags, ids, classes and attributes. jQuery also provides a number of specialized selectors and filters.

We’ll use the same HTML code as before for our examples. Here it is:

<body>
  <h2>jQuery Selectors</h2>
  <table>
    <tr>
      <th colspan="2">Comic Summary</th>
    </tr>
    <tr class="headerRow">
      <th id="comicHeader" class="header cell">Comic</th>
      <th id="numberHeader" class="header cell">Number</th>
    </tr>
    <tr>
      <td class="cell">Thor</td>
      <td class="cell">34</td>
    </tr>
    <tr>
      <td class="cell">Superman</td>
      <td class="cell">158</td>
    </tr>
    <tr>
      <td colspan="2">
        Which is best?<br />
        <label> <input type="radio" name="dcMarvel" /> DC</label>
        <label> <input type="radio" name="dcMarvel" /> Marvel</label>
      </td>
    </tr>
    <tr>
      <td colspan="2">
      What are your favourites?
        <ul>
          <li><label><input type="checkbox" />Batman</label></li>
          <li><label><input type="checkbox" />Superboy</label></li>
          <li><label><input type="checkbox" />Fantastic Four</label></li>
          <li><input type="checkbox" />Iron Man</li>
          <li><input type="checkbox" />Incredible Hulk</li>
          <li><input type="checkbox" />Green Lantern</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="text" id="jqtest" /></td>
    </tr>
  </table>
</body>

Selecting by position

There are several ways of selecting elements based on their position in a list. The filters :first and :last (all filters begin with a colon (:)) select the first and last elements in the selected context, respectively. For example, if we wrote $(‘li:first’) we would select the first li element on the page (which is the Batman checkbox). Similarly, $(‘li:last’) selects Green Lantern.

The :first and :last filters ignore the depth of nesting of elements and just pick out the absolute first and last matching elements. Thus $(‘label:first’) gives the DC radio button and $(‘label:last’) gives the Fantastic Four checkbox.

If we omit a selector before the filter, jQuery uses the entire page as the context. Thus $(‘:first’) selects the <html> tag which encloses the whole page, and $(‘:last’) selects the text input tag at the bottom.

The :first-child filter selects the first element in the context that is a child of another element. $(‘label:first-child’) gives the first three labels in the checkbox list because each of these labels is the first child of a li tag. Note that it does not include the DC radio button since, although this button is the first label child of the td tag, it’s not the first child: the br tag has that honour. If we delete the br tag, then the DC button is included; the text ‘Which is best?’ within the td does not count as a child since it just part of the td tag.

As you might expect, $(‘label:last-child’) selects labels that are last children of another node. In this case we get the first three checkbox labels (since they are the only children, they are both first and last children) and the Marvel radio button.

$(‘label:only-child’) selects labels that are the sole child of another node; here that means the first three checkbox labels.

There are also filters :even and :odd which select even and odd elements from the context, using a zero-based index. Thus $(‘li:even’) selects Batman, Fantastic Four and Incredible Hulk and $(‘li:odd’) selects Superboy, Iron Man and Green Lantern.

We have :eq(n), :gt(n), and :lt(n) for finding elements that are at index location n, or greater than or less than n. Again, n is zero-based. Thus $(‘li:gt(2)’) selects Fantastic Four, Incredible Hulk and Green Lantern.

Finally, there is the :nth-child(n) selector, which is a bit unusual, in that its index argument starts at 1 rather than 0. (This is for compatibility with CSS, but if you’re working with jQuery it can be a bit of a pain, since all the other index-based selectors start with a 0 index.) $(‘li:nth-child(2)’) gives Superboy.

There are a couple of other versions of :nth-child(). One takes an argument of ‘even’ or ‘odd’ which returns the even or odd elements in the list, except of course because the list now starts with 1, these give complementary results to using just ‘even’ or ‘odd’ on their own. That is $(‘li:nth-child(odd)’)  gives the same result as $(‘li:even’) and vice versa.

The final form of :nth-child() takes a simple formula as its argument. We can write :nth-child(Xn+Y)  where X  and Y are integers. This will return every Xth element, starting with element Y. Thus $(‘li:nth-child(3n+2)’) returns every 3rd element starting with element 2, giving Superboy and Incredible Hulk.

Custom filters

There are quite a few filters that do their selection based on the type or state of element you’re interested in. Filters that select specific types of element are :button, :checkbox, :file (equivalent to ‘input [type=file]’), :header (selects <h1>…<h6>), :image (same as ‘input [type=image]’), :input (any form input element), :password, :radio, :submit (same as ‘input [type=submit]’), :reset and :text (same as ‘input [type=text]’). These should all be fairly self-explanatory, but give them a try using the HTML above and the header block given earlier, and use the Console in Chrome or Firefox to see what you get.

Somewhat more interesting are the filters that act on the state of an element. The :checked filter selects radio buttons or checkboxes that are checked.

This seems a good place to introduce the tricky :not() filter. As you can guess, it returns the inverse of whatever selector is passed to it as its argument, but you have to be a bit careful. For example, you might think that since :checked gives all radio buttons and checkboxes that checked, :not(:checked) should give you all radio buttons and checkboxes that are not checked. In fact, what it does give you is all elements that are not checked, which means every element on the page (including non-radio buttons and non-checkboxes) except radio buttons and checkboxes that are checked.

If you want just the non-checked checkboxes, you can write $(‘:checkbox:not(:checked)’), since that restricts the context to just checkboxes before applying the :not filter. If for some reason you actually do want both unchecked radio buttons and checkboxes, you can write $(‘:radio:not(:checked), :checkbox:not(:checked)’) being careful not to leave out the comma in the middle.

The :contains() filter can also trap you. Its argument is some text, and it returns all elements that contain that text. The trap lies in the fact that if any element within the context is an ancestor of the element that contains the text, that element also gets included in the results. For example, if we wrote $(‘:contains(best)’), then the td element containing this text would be selected, but so would the html, body, table, tbody and tr elements that are that td’s ancestors. To get just the td element, we would have to write $(‘td:contains(best)’).

If we want to select tag types that have another tag type as their ancestor, we have already seen that we write, for example $(‘tr li’) to find li elements that are children of tr elements. The :has() filter can do the inverse; it finds elements that have a particular type of element as a descendent.

$(‘tr:has(li)’) returns the tr element containing the checkbox list. Again, note that the child element can be at any depth below the parent.

The remaining filters are all fairly obvious. They are :disabled, :enabled, :hidden, :visible, :selected and :parent. The :parent filter returns elements that are parents, not the parents of elements. If you want to find the parents of a set of elements, you need to use the parent() function rather than a filter. Thus $(‘li’).parent() finds the ul element that is the parent of all the li tags.

By growescience | Posted in JavaScript | Also tagged | Comments (0)

jQuery selections: id, class and attributes

November 10, 2012 – 5:27 PM

In the last post, we saw how to select page elements by searching for tag names. Sometimes, we’d like to select elements based on other criteria. There are several ways of labelling or marking tags.

For the purposes of an example, we’ll modify the body of the page given in the previous post, so it now becomes:

<body>
  <h2>jQuery Selectors</h2>
  <table>
    <tr>
      <th colspan="2">Comic Summary</th>
    </tr>
    <tr class="headerRow">
      <th id="comicHeader" class="header cell">Comic</th>
      <th id="numberHeader" class="header cell">Number</th>
    </tr>
    <tr>
      <td class="cell">Thor</td>
      <td class="cell">34</td>
    </tr>
    <tr>
      <td class="cell">Superman</td>
      <td class="cell">158</td>
    </tr>
    <tr>
      <td colspan="2">
        Which is best?<br />
        <label> <input type="radio" name="dcMarvel" /> DC</label>
        <label> <input type="radio" name="dcMarvel" /> Marvel</label>
      </td>
    </tr>
    <tr>
      <td colspan="2">
      What are your favourites?
        <ul>
          <li><label><input type="checkbox" />Batman</label></li>
          <li><label><input type="checkbox" />Superboy</label></li>
          <li><label><input type="checkbox" />Fantastic Four</label></li>
          <li><input type="checkbox" />Iron Man</li>
          <li><input type="checkbox" />Incredible Hulk</li>
          <li><input type="checkbox" />Green Lantern</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="text" id="jqtest" /></td>
    </tr>
  </table>
</body>

First, a tag may be given an id attribute. The HTML standard specifies that no two visible page elements may have the same id. The key word here is ‘visible’; you can define several page elements with the same id, so long as only one of them (or none of them) is visible at any given time. In the example above, we’d added an id to each of the th tags in the table.

Secondly, most page elements can be assigned a class to which they belong. The name ‘class’ is a bit misleading if you’re familiar with object oriented programming, since an HTML class doesn’t have many of the properties of a true OOP class. In HTML, a class is really little more than a label which can be used to identify groups of tags on a page. In the above HTML, we’ve assigned all the td elements to have the class ‘cell’. Unlike the id, the class of a tag need not be unique; in fact, it usually won’t be, since the idea is normally to identify a set of tags that have a common property.

A tag can belong to more than one class. In the above code, the th tags are members of both the ‘header’ and ‘cell’ classes. To define multiple classes, we list the class names separated by whitespace. Both the id and class can be any valid string.

Finally, many tags have various attributes. Although these attributes are usually used to specify some properties of the tag, they can also be used as identification. Actually, both the id and the class are attributes, but there are many others for some tags. In the above example, the first th tag has a ‘colspan’ attribute, and the radio and checkbox input tags have ‘type’ attributes (the radio buttons also have a ‘name’ attribute).

One of the most common uses of these ways of labelling tags is in specifying CSS rules, but we can also use them in jQuery selectors to pick out groups of elements on which we can act. Using the above page as an example (you can use the same head as the last section if you want to try this a live browser), we can see a few examples.

Searching using the id

To use an id, prefix the the id name with a #. For example, the expression $(‘#comicHeader’) will find the th tag with that id. Note that although ids must be unique amongst visible elements, it is possible that some currently hidden tags may have the same id, and this expression will find all tags that have that id, so you may need to filter the results to be sure of getting the one you want.

If you want to restrict the search to tags of a certain name, simply prefix the id name with the tag name. Thus $(‘th#comicHeader’) will find all th tags with an id of comicHeader (which happens to give the same result as the earlier example in this case).

It’s important to note that there is no whitespace between the th and the #. If you did put a blank between them, you would then be searching for descendents of a th node that had that id, which in this case would return an empty list. If you tried $(‘tr #comicHeader’), though, you’d then get the comicHeader node again, since it’s in a node which is a descendent of a tr node.

You can search for several ids by separating them with commas. Thus $(‘#comicHeader, #numberHeader’) finds both th nodes with ids.

Searching using the class

Using the class as a search term is pretty much the same as using the id except you prefix the class name with a period (.) instead of #. Thus $(‘.cell’) finds all tags with a class of ‘cell’.

Somewhat counter-intuitively, although you can define a tag that belongs to two classes by listing the class names separated by whitespace, if you try finding all tags that belong to both of two classes in the same way, you are doomed to fail. For example, the query $(‘.header .cell’) returns an empty list. What this query is really asking for is a list of elements with a class of ‘cell’ that are descendents of a tag with class ‘header’. Thus if we tried $(‘.headerRow .cell’) we’d then get the two th tags with a class of ‘cell’.

If you do want a list of tags that belong to both of two different classes, you have to leave out the whitespace. Thus $(‘header.cell’) will give you the two th tags again.

You can combine ids and classes in the same search. Thus $(‘#comicHeader.header.cell’) looks for tags that have an id of comicHeader and classes of both ‘header’ and ‘cell’.

Searching using attributes

Finally, you can use any attribute as a search term. The syntax for this encloses the attribute and its value in square brackets. For example, to find all checkboxes, we can use $([type=checkbox]). We’ve left the quotes off ‘checkbox’, but in fact it doesn’t seem to matter whether you use them or not; thus $([type=”checkbox”]) also works.

You can also search for tags that merely have a given attribute, regardless of what value that attribute has. For example, we can get a list of all tags that have ids by writing $([id]). The notation above for searching on id or class isn’t quite just a shorthand for using the id and class attributes though. The class has its own logic that allows things like multiple class definitions and searches, as we saw above. If we tried something like $([class=header]) we’d get an empty result. The attribute search attempts to match the exact string to the attribute, and there is no tag with just ‘header’ as its class, so the search fails.

By growescience | Posted in JavaScript | Also tagged , , | Comments (1)

jQuery: simple selections

November 6, 2012 – 5:35 PM

Although JavaScript is very handy for client-side manipulation of web pages, it suffers from at least two serious drawbacks. First, it can take a lot of code to do relatively simple things (like finding a particular element within a web page). Second, different browsers (particularly Internet Explorer) often require different code to do the same thing, so writing a web page that will always behave the same in every browser can be a major headache.

jQuery solves many of these problems. It is a JavaScript API which defines a large number of functions that both reduces the amount of code needed and eliminates many of the cross-browser problems.

At the core of jQuery (as you might guess from its name) is its ability to search the web document in a myriad of ways. (It can, of course, do a lot of other things, but more on that later.) We’ll have a look at some of these search techniques here.

First, we need to draw an important distinction between the two ways a jQuery function can return its result. Most functions return a wrapped set, which is a set of page elements contained within a JavaScript data structure. It’s a set, since there are no duplicated elements within it, even if the search string could match the same element in more than one way. Some jQuery functions will return bare elements, but we won’t be concerned with any of those in this post.

Second, most jQuery functions are called from a wrapped set, do something to that set, and then return another wrapped set. Sometimes, the second set is the same as the first one (although with some modifications to its elements), but sometimes (as with a filter) the second set is a different set than the original, as it may contain different, or more or fewer, elements. Again, we won’t be worried about this much here, since we’re going to consider mostly just a single function that searches the page for specific elements. What we do with those elements is the subject of future posts.

The format for a query in jQuery is $(<query string>), where <query string> is a string that tells the function what to look for. If you know how to use cascading style sheets (CSS), you’ll be happy to hear that most of the CSS selector strings also apply in jQuery selectors. (If you’re not familiar with CSS, as I have to admit I wasn’t when I started looking at jQuery, then this is all new, but never mind.)

In order to try out some jQuery selectors, we need a page for it to work on. Here’s the body of a web page that has a few basic tags in it:

<body>
  <h2>jQuery Selectors</h2>
  <table>
    <tr>
      <th colspan="2">Comic Summary</th>
    </tr>
    <tr>
      <th>Comic</th>
      <th>Number</th>
    </tr>
    <tr>
      <td>Thor</td>
      <td>34</td>
    </tr>
    <tr>
      <td>Superman</td>
      <td>158</td>
    </tr>
    <tr>
      <td colspan="2">
        Which is best?<br />
        <label> <input type="radio" name="dcMarvel" /> DC</label>
        <label> <input type="radio" name="dcMarvel" /> Marvel</label>
      </td>
    </tr>
    <tr>
      <td colspan="2">
      What are your favourites?
        <ul>
          <li><label><input type="checkbox" />Batman</label></li>
          <li><label><input type="checkbox" />Superboy</label></li>
          <li><label><input type="checkbox" />Fantastic Four</label></li>
          <li><input type="checkbox" />Iron Man</li>
          <li><input type="checkbox" />Incredible Hulk</li>
          <li><input type="checkbox" />Green Lantern</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="text" id="jqtest" /></td>
    </tr>
  </table>
</body>

This produces the following page:

For reference, this page has the simple style (specified in a CSS file):

body {
  background-color:lightgray;
  font-family:Arial;
}

Now, suppose we want to select all <li> tags. In this case, the jQuery call is simply $(‘li’). If you want test this out, you can create your own HTML file and put the above body into it, then add the following head section (before the body, of course):

<head>
  <title></title>
  <link href="Content/jQueryDemo.css" rel="stylesheet" />
  <script src="Scripts/jquery-1.8.2.js"></script>
  <script>
    $(function () {
      $('#jqtest').keypress(
        function (event) {
          if (event.keyCode === 13) {
            $('*').css({
              backgroundColor: 'lightgray',
              border: 'none'
            });
            console.log($($(this).val()));
            $($(this).val()).css({
              backgroundColor: 'palegreen',
              border: '1pt solid darkgreen'
            });
          }
        });
    });
  </script>
</head>

This assumes that you’ve got your CSS file in Content/jQueryDemo.css and that the jquery library is in Scripts/jquery-1.8.2.js. If you have a different version of jQuery or put your files in different places, you’ll need to modify those 2 lines in the header. If you’re using Visual Studio,  you can include jQuery as described in the last post.

As for the script in the header, don’t worry about it for now. Just be assured that when you type a query string into the text box and hit return, those page elements that you’ve selected will be highlighted in green.

Also, if you’re running a browser (such as Google Chrome) that has a console, you’ll see the selected elements printed out in the console. To activate Chrome’s console, right click on the page and select ‘Inspect element’, then click the Console tab. This is well worth doing, since not all of the selected elements get highlighted, and it’s reassuring to see that these elements have in fact been selected.

If you’ve got this page running, try typing li into the text box and hitting return. You should see this:

 

The 6 li elements have been highlighted. The reason that the top 3 don’t have their text highlighted is that these checkboxes are defined using the <label> tag, while the bottom 3 have a bare checkbox with some text after it. The label is a separate element that sits on top of the list, so it doesn’t get selected. Try typing label into the box and you’ll see just the top 3 checkboxes lit up, along with the 2 radio buttons.

If you want to select both li and label elements, enter li, label. That is, a comma separated list will select all elements that match any term in the list.

Although this is fairly simple, the results are global, in that you’re selecting all tags in the entire page. Suppose you wanted to select only those inputs that are inside labels. This time, you can type in label input (without a comma). (In this case, the display won’t show any items lit up, presumably because the label overwrites the input that it contains, but if you look in the console, you’ll see that the two radio buttons and top 3 checkboxes are selected.)

This form of list first selects the left-most tags (labels here) then selects children of those tags that satisfy the second condition. We could string together more tags if we have a deeper nesting on the page. Note that the input doesn’t have to be the immediate child of the label; if a label contains an input as its descendant at any point it will be selected.

If you want to restrict your choice to only immediate children, you can write td > label. This selects label tags that are immediate children of td tags. This will give you the 2 radio buttons, but not the top 3 checkboxes, since they are buried inside a ul and li tag. To compare, try typing td label (without the >) and this time you’ll get the top 3 checkboxes as well.

That’s about enough for a first post.

 

By growescience | Posted in JavaScript | Comments (2)

JSON with ASP.NET MVC 4

October 24, 2012 – 3:44 PM

As a newcomer to JavaScript and jQuery, I wanted to write a (supposedly) simple little web site which used JSON (JavaScript Object Notation) to transmit information from a database to a web page. Surprisingly there didn’t seem to be any self-contained example or tutorial (that I could find) that showed how to do this basic operation. So here is the result of my attempt. It turns out that it is actually quite simple, once you know what to do.

First off, what is JSON? It is an alternative to XML as a way of sending information from one device to another. It’s a subset of the notation that can be used in JavaScript to define an object literal, which we saw in the last post. As an example, we might have some information on the numbers of various titles of comic books that are stored in a database. After we’ve retrieved this data from the database, we can encode it into JSON, so that it looks like this:

[
  {"Title":"Batman","Count":1},
  {"Title":"Fantastic Four","Count":2},
  {"Title":"Spider-man","Count":2},
  {"Title":"Superman","Count":1},
  {"Title":"Thor","Count":2}
]

That is, the data are stored as name-value pairs. In this case, each element in the array is actually a compound object consisting of two name-value pairs (Title and Count). We could have a simple list of single name-value pairs, or we could have deeper nesting of objects. There are various restrictions on the syntax for JSON objects, but as we’ll see, in MVC 4 you won’t usually have to write your own JSON, since there is a library routine that does it for you.

Now that we know what JSON is, how do we use it as a mediator between a database and a web page in ASP.NET MVC 4? We’ve seen that the procedure for generating web pages in MVC is as follows.

  1. Write a controller that contains a method that is called when a client requests a web page from the server.
  2. Write a view that is linked to the controller method, and which generates the markup that is returned to the client.

The controller method will usually collect some data from some other source, such as a database or some other C# code (which is usually part of the Model in MVC). This data is then packaged up, possibly in a C# object, and sent to the View, where the View formats the data and generates the HTML which is interpreted by the browser.

The procedure for using JSON doesn’t quite fit this pattern. Basically what happens is this:

  1. Client requests a web page.
  2. Controller method is called to process this request.
  3. The corresponding View is returned to the browser.
  4. The View contains some JavaScript code that makes another request to the server, this time asking for some data in JSON format.
  5. A different Controller method from that called in step 2 is called to generate the JSON, which is returned to the browser.
  6. The JavaScript code processes the JSON and generates some HTML which is displayed.

The key point is that the JSON is not meant to be displayed as raw data by the browser; rather, it is retrieved by the browser and then processed on the client side before it is displayed.

We’ll illustrate this by showing how the data above can be obtained from the database and sent to a web page using JSON. First, we’ll add a controller to our ComicShop project that we’ve been using to demostrate things:

using System.Web.Mvc;
using ComicShop.Models;
using System.Collections.Generic;

namespace ComicShop.Controllers
{
  public class JsonController : Controller
  {
    //
    // GET: /Json/

    public ActionResult Index()
    {
      return View();
    }

    private IComicRepository comicRepository;

    public JsonController()
    {
      comicRepository = new ComicRepository();
    }

    public JsonController(IComicRepository comicRepository)
    {
      this.comicRepository = comicRepository;
    }

    public ViewResult JsonSummary()
    {
      return View();
    }

    public ActionResult Summary()
    {
      IEnumerable<ComicSummary> summaries = comicRepository.GetSummaries();
      return Json(summaries, JsonRequestBehavior.AllowGet);
    }

  }
}

This controller uses the IComicRepository interface and ComicRepository class that we introduced earlier. This controller contains two methods of interest here. The one called JsonSummary() simply returns a View, which is the View that requests the JSON data (we’ll get to this View in a moment).

The Summary() method is the one that produces the JSON data. The first line in this method requests the data from the database (see the earlier post for details of how this is done; all that’s important here is that we do get this data). The data is returned as an IEnumerable<ComicSummary> list. The ComicSummary class is defined as:

namespace ComicShop.Models
{
  public class ComicSummary
  {
    public string Title { get; set; }
    public int Count { get; set; }
  }
}

That is, it contains two data fields named Title and Count.

The second line in Summary() calls the library method Json() to create the JSON data. It is passed the list of ComicSummary objects in the variable summaries. The second parameter allows Summary() to provide JSON data in response to an HTTP Get request (by default, such a response is blocked for security reasons, so this parameter is needed). This returns the JSON string we gave above.

That’s all there is to producing JSON data (as promised, you didn’t have to actually write any raw JSON yourself, since the Json() method does it for you). If you want to verify that Summary() actually works, you can call it directly from a web browser by using the URL http://localhost:36195/Json/Summary (the port number for your localhost server will probably be different; what’s important is the path /Json/Summary), and you should see the raw JSON data printed in the browser.

Note that we did not associate a View with the Summary() controller method. As far as the browser is concerned, it is receiving raw text as a response to its request to Summary, so it just displays that. We need to do something special if we want it to interpret the JSON as data and incorporate it into a ‘real’ web page.

To that end, we turn our attention to the JsonSummary() controller method, and have a look at its View. This is in the file JsonSummary.cshtml:

<h2>JsonSummary</h2>
<script>
    $.getJSON('/Json/Summary',  function (data) {
        var items = [];
        $.each(data, function (key, val) {
            items.push('<li>' + key + ': ' + val.Title + ' (' + val.Count + ')</li>');
        });

        $('<ul/>', {
            html: items.join('')
        }).appendTo('body');
    });
</script>

As you can see, most of this file is JavaScript. However, it’s not all primitive JavaScript; it makes use of jQuery, so you need to make sure your web project has jQuery installed. If you started with an Empty project, you’ll need to do this yourself; if you started with a full Internet project, it will already be included.

To add in jQuery, right-click on the Solution in SolutionExplorer and select Manage NuGet Packages. Search in the Online section and find jQuery, then click Install. JSON should already be installed – you can check this by opening up References in SolutionExplorer and seeing that Newtonsoft.Json  is included in the list.

NuGet should take care of installing these packages and should find some jQuery JavaScript files in your Scripts folder (if you didn’t have a Scripts folder, it will be created by the installation).

We’re not quite done yet, though. In order for jQuery to be used in your View, that View needs to run the jQuery script. You could include a <script> tag in the View file itself, but if you plan on using jQuery in a lot of Views, it makes more sense to put it in the common layout file which we considered earlier. This file is called _Layout.cshtml and is in the Shared folder within the Views folder. Add the call to the jquery script in the <head> section of the layout. The modified _Layout.cshtml file looks like this:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <script src="~/Scripts/jquery-1.8.2.js"></script>
    <meta name="viewport" content="width=device-width" />
    <title>Comics</title>
</head>
<body>
    <h2>Comic Shop</h2>
    <div>
        @RenderBody()
    </div>
</body>
</html>

The call to the script is on line 9. The actual version number of jquery may differ from 1.8.2 if you install it later on, but just insert whatever version you got from NuGet.

That’s all we need to get the JavaScript to run, but there’s one more thing that’s very useful, and that’s to get Intellisense working for jQuery. Complete instructions for doing this are here, provided you’re using VS 2012. My _references.js file looks like this:

/// <reference path="jquery-1.8.2.intellisense.js" />
/// <reference path="jquery-1.8.2.js" />

Right, now we can look (finally) at JsonSummary.cshtml. A lot of the code there relies on a knowledge of JavaScript and jQuery syntax, so I won’t go through it in detail. However, I’ll mention a few key points so you can adapt it for your own purposes.

First, the $.getJSON() call is a jQuery method which makes a request to the URL given as its first argument for some JSON data. In our case, we use a relative URL /Json/Summary (the leading / is important: don’t leave it out!). If this call is successful, the JavaScript function given as the second argument to $.getJSON is called. (If the call fails, this function isn’t called, and you’ll get nothing on your web page apart from the HTML that is outside the <script> tag. This can make debugging a nightmare, since you won’t know what’s wrong, but never mind.)

The argument ‘data’ sent to this function is the JSON code. This function then constructs an array called ‘items’ by iterating through ‘data’ using the jQuery $.each() method. The second argument to $.each() is another function, this time taking two arguments. The ‘key’ argument is the integer index of the element from ‘data’ that is being processed, and ‘val’ is that actual element from ‘data’. Remember from the JSON above that each element in ‘data’ is a compound object of type ComicSummary, so it contains a Title and a Count field. We access these fields to create a HTML list entry on line 6, and push this onto the items array.

The last bit of code on lines 9 to 11 creates a <ul> tag and adds the items list to it, then it adds the <ul> tag to the body of the page. The final result looks like this:

By growescience | Posted in C#, JavaScript, MVC | Also tagged | Comments (2)