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.
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: Model, View 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.
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.
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)
2. Add an ActionResult method in the DinnersController. Name it Cancel
// AJAX: /Dinners/RSVPCancel/1
public ActionResult Cancel(int id)
Dinner dinner = dinnerRepository.GetDinner(id);
RSVP rsvp = dinner.RSVPs.Single(r =&amp;gt; r.AttendeeName.Equals(User.Identity.Name, StringComparison.InvariantCultureIgnoreCase));
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.