Extending NerdDinner: Using AJAX to cancel RSVPs

4 Dec

This is my first post on ASP.NET MVC.  So I decided to choose something small to start with. I’m going to add functionality to the Nerddinner application that will enable users to cancel their RSVPs using a simple AJAX call to a controller.

Okay, if you totally have no idea or clue about what I’m talking about, have a look here, download and read this pdf here and then see the definition below from wikipedia.

The ASP.NET MVC Framework uses a Model-view-controller pattern. Microsoft added this framework to ASP.NET. It allows software developers to build a Web application as a composition of three roles: ModelView and Controller. A Model represents the state of a particular aspect of the application. Frequently, a model maps to a database table with the entries in the table representing the state of the table. A Controller handles interactions and updates the model to reflect a change in state of the application. A View extracts necessary information from a model and renders a user interface to display that

I personally love ASP.NET MVC. Having a strong background in windows development, I totally get it. I didn’t get webforms at all. I tried, but it was too much for me. When I saw MVC for the first time I couldn’t help saying “hellow beautiful!” Its simple and straight forward.

Okay enough talking lets see some code now.  I’ll skip all the deep explanations by assuming that you have read the e-book and probably have built the nerddinner application.  So I’ll go straight to the code and details.

This is how a particular dinner looks like after you log in but before you RSVP.

When you click the link to RSVP you see a smooth animation confirming you reservation, like the image below shows.

And when you come back to the dinner, if you are logged in you’ll just see a notice that you are registered for the event but no option whatsoever for you to Cancel your RSVP, incase you change your mind or you couldn’t make it.

Cancelling RSVPs

Our aim is to enable the user to cancel their RSVP. And we’ll do this using a simple AJAX call to an Action method in the dinners controller.

Steps.

We’ll accomplish this in as a  few as three steps.

1. Create a DeleteRSVP method in dinner repository

The method takes a RSVP as a parameter and deletes it from the database.

Here’s the code,  one line thanks to LINQ to SQL.

public void DeleteRSVP(RSVP rsvp)
{
db.RSVPs.DeleteOnSubmit(rsvp);
}

2. Add an ActionResult method in the DinnersController.  Name it Cancel

The method takes a dinner ID and checks to see if the current user RSVP’d for the dinner. If yes, it cancels the RSVP (by calling our DeleteRSVP method above) and returns a simple message as content. We’ll use some javascript code to display the message to the user with some animation.  See the code below.

// AJAX: /Dinners/RSVPCancel/1

[Authorize, AcceptVerbs(HttpVerbs.Post)]
public ActionResult Cancel(int id)
{
Dinner dinner = dinnerRepository.GetDinner(id);

if (dinner.IsUserRegistered(User.Identity.Name))
{
RSVP rsvp = dinner.RSVPs.Single(r =>       r.AttendeeName.Equals(User.Identity.Name,       StringComparison.InvariantCultureIgnoreCase));
dinnerRepository.DeleteRSVP(rsvp);
dinnerRepository.Save();
}
return Content("Sorry to hear you can't make it! ");
}

3. Add an Ajax.ActionLink to the partial view RSVPStatus.

The Ajax.ActionLink will call our CancelRSVP in the dinners controller and display an animation notifying the user that we are sorry to see them go.  See the full code for the view at the end of the post

Thats it.  Now if a user is logged in and registered for a dinner, they’ll see a link offering to cancel the RSVP (like on this image below.)

When they click the link, our view will call the cancel action method in our dinners controller and cancel the RSVP on the fly, without a full refresh of the page . The user will get an animated notification as shown on the image below.

So thats all. Simple functionality which I think would take longer and be more dificult to implement in web forms..well, at least for me. Till next time, yours truly.

Full Code for the RSVPStatus View. Sorry for the image quality wordpress wouldn’t allow me to post anything with even one line of javascript.



About these ads

2 Responses to “Extending NerdDinner: Using AJAX to cancel RSVPs”

Trackbacks/Pingbacks

  1. How Template Fields Are Used With The GridView Control In The ASP.NET Web Development Environment | Country Music Blog - December 4, 2009

    [...] Extending NerdDinner: Using AJAX to cancel RSVPs « Programming and … [...]

  2. ASP.NET MVC Archived Blog Posts, Page 1 - December 15, 2009

    [...] to VoteExtending NerdDinner: Using AJAX to cancel RSVPs (12/4/2009)Friday, December 04, 2009 from nickmasao.wordpress.comThis is my first post on ASP. NET MVC. So I [...]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: