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.

[sourcecode language=”csharp”]
public void DeleteRSVP(RSVP rsvp)
{
db.RSVPs.DeleteOnSubmit(rsvp);
}
[/sourcecode]

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.

[sourcecode language=”csharp”]
// 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! ");
}
[/sourcecode]

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.



Extending NerdDinner: Using AJAX to cancel RSVPs
Tagged on:         

2 thoughts on “Extending NerdDinner: Using AJAX to cancel RSVPs

Leave a Reply

Your email address will not be published. Required fields are marked *