Dave's Notebook

jQuery - Retrieving HTML Fragments

jQuery

sunset-bird A couple of weeks ago I mentioned that I had built a tooltip using jQuery.  We focused mostly on the positioning of the tooltip at the time because, historically, that’s where most of the work has been. But there are other time-saving features that also make the tooltip code I wrote a lot more flexible. For example, in the past, the javascript code we wrote for tooltips often required us to place the HTML for the tooltip in the HTML page we wanted the tooltip on.  This has two drawbacks. First, if you need the tooltip on multiple pages, you need to include the HTML on multiple pages.  You could, of course, use master pages in ASP.NET or includes of some sort in other web development languages to get around this, but the fact remains that you still need to do this. Second, the HTML is not as modular as it might be.  This isn’t as big of an issue, since we could argue that most of our HTML is not as modular as it might be, but when I show you how you can overcome this with jQuery, I think you will recognize the improvement. When I sat down to develop this tooltip, I created an HTML page that has the HTML for the tooltip, and nothing else, in it.  This allowed me to concentrate on the HTML and forget about all the javascript issues.  Once I had the tooltip looking the way I wanted, I copied out the HTML fragment that represented the tooltip, leaving out the HTML that had the head tag, body tag, and other code I needed to make the HTML page an HTML page.  I pasted this code into another HTML file, but this time the HTML file ONLY has the fragment. The other thing you’ll want to do is to dynamically create the positional DIV that you will use to hold the tooltip.  This is another place where we typically had to put the content in our HTML page.  Instead we will put this information in the jQuery script.  While I could have included this in the fragment, doing it this way actually makes coding the tooltip easier:

Read More

jQuery - Events

jQuery

As well as being able to change the class associated with an element or a set of elements on a screen, jQuery also allows you to fire events.  You might want to do this, for example, if you want to simulate the clicking of a button. Of course, if you are going to fire an event, you’ll probably need some sort of event listener setup to handle that. We will address firing events first since it has the least amount of code needed. All you need to do is select the element or elements using the selectors we’ve already discussed and then call the method trigger(‘eventname’). So, to click a button, your code might look something like this:

Read More

ASP.NET MVC - Controller to View

ASP.NET MVC

ka_vol1_100 A couple of weeks ago we looked at ASP.NET MVC routing in the MVC framework.  The routing controls which method in which controller gets called.

The obvious next question is, how do we get from the controller to the view?

First, we need to look at the general layout of our Views.

If you open up the sample project that we created, you’ll see that there are a few directories that have been created.  The one we want to take a look at today is the View directory.

You’ll see that under each View directory is a directory that has the same name as each of the controllers in the Controller directory as well as a directory named ‘Shared’ that has nothing to do with MVC directly.  Don’t worry about figuring that one out right now.

Under each of the directories that map to the controller, you’ll see that there is an ASPX file that maps to each of the methods in the controllers, or is otherwise called from those controllers.

The easiest way to get from the Controller action to the View it corresponds to is to return View() from that action, as in:

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

This would then call ~/Home/About

But what if the new page needs to have data sent along to it?

In this case, you can assign the data to the ViewData property.  The ViewData property works a lot like a Session object in that it is keyed.

So, to pass data you would use

ViewData[“Key”] = objectData;

You can see that the sample project does this in the HomeController.Index method.

1
2
3
4
5
public ActionResult Index()
{
    ViewData["Message"] = "Welcome to ASP.NET MVC!";
    return View();
}

And you can see that the Index.aspx file picks it up later:

1
2
3
4
5
<h2><%= Html.Encode(ViewData["Message"])%></h2>
<p> To learn more about ASP.NET MVC visit
    <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
      http://asp.net/mvc</a>.
</p>

Returning View() is not the only way of specifying the View we want to display from the Controller.  You can also return Redirect(), RedirectAction(), RedirectToRoute().

CSharp Enum

c#

tp_vol4_002 It is often tempting when working with your code to test against static values in your system.  For example:

1
2
3
4
5
6
7
8
if (i == 1)
{
    // do something
}
else if (i == 2)
{
    // do something
}

Read More

jQuery Expand/Collapse Using Head Tags

jQuery

animal-010

I’ve spent a good chunk of the last two days working on an interesting project for one of my clients that I think the rest of the jQuery community could benefit from.

The task started when my client came to me with an existing script that was being used in a DotNetNuke system to expand and collapse content under head tags that was produced by an article editing system similar to the Text/HTML module.

Read More

Recents

Archives