I have decided to write a series of posts on how to write a small ASP.Net MVC 4.0 application.I will develop this application step by step and I will explain everything that you need to know in order to develop ASP.Net MVC 4.0 applications. This is the fifth post in this series. You can find the first one here , the second one here the third one here and the fourth one here.  Make sure you read and understand those posts.

In this post I will add Search functionality to my application and the ability to create,edit,delete and view reviews for a particular movie.

1) Launch Visual Studio and open the ASP.Net application we have been developing so far.

2) We must add code to the _Layout.cshtml view in the Shared folder and more specifically to the menu. We must add an entry so someone can navigate to the Movie View.

The nav section becomes like this

                   <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink("Home", "Index", "Home")</li>
                            <li>@Html.ActionLink("About", "About", "Home")</li>
                            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                             <li>@Html.ActionLink("Movie", "Index", "Movie")</li>
                        </ul>
                    </nav>

3) Now we must delete the [Authorize] Action Filter attribute from the   public ActionResult Index() , that we previously entered. Now if we run the application we will see a new link in the menu, Movie.

Have a look at the picture below

5) Now we will add search functionality in our application.We need to add some code to the MovieController.cs file.We will add another public method (Search) that gets an input parameter(looks for name of the movie).The code is very easy to follow.I just use standard LINQ syntax. 

         public ActionResult Search(string searchString)
          {
            var movies = from movie in db.Movies
                              select movie;

            if (!String.IsNullOrEmpty(searchString))
            {
                movies = movies.Where(m => m.Name.Contains(searchString));
            }

            return View(movies);
           }

Now we need to implement the corresponding view.Right-click on the public ActionResult Search(string searchString) and select Add View.

Have a look at the picture below to see the settings you must add in the popup window (Add View)

Click Add.Have a look at the Search.cshtml file that was created inside theViews/Movie folder.Have a look at the generated code.You will see HTML helper objects and methods.Run your application and navigate to /Movie/Search. Append a query string such as ?searchString=godfather to the URL. The filtered entries(y) are displayed.

Have a look at the picture below

6) Now we need some sort of user interface,so that the user can enter the search string.I am going to make some changes to the Views\Movie\Search.cshtml view.

Open the file and under the 

<p>
    @Html.ActionLink("Create New", "Create")

add the following lines

         @using (Html.BeginForm()){   
         <p> Title: @Html.TextBox("SearchString") <br />  
         <input type="submit" value="Search" /></p>
        }

</p> 

We have the Html.BeginForm helper method that creates an opening <form> tag. The helper method causes the form to post to itself when the user submits the form by clicking the Search button. Have a look at the picture below

Have a look at the picture below

Up to this point, we have an application that one can add movies (name,director and the year released) edit and delete movies, search for movies by entering the name of the movie. Well me must move on and build the Reviews functionality, the ability for someone to write and edit a review for a particular movie.

7) When I click on the Details link on the http://localhost:59871/Movie , I get the following screen.

This is not very useful so I will delete the Details View in the Movie folder.

I will also comment out the Details method in the MovieController.cs

        // GET: /Movie/Details/5

        //public ActionResult Details(int id = 0)
        //{
        //    Μovie movie = db.Movies.Find(id);
        //    if (movie == null)
        //    {
        //        return HttpNotFound();
        //    }
        //    return View(movie);
        //}

I will also change the Index.cshtml in the Movie folder. I will replace the Details with the Reviews in the HTML.ActionLink

    <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Reviews", "Index", "Reviews", new { id=item.Id },null) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })

        </td>

8) Now we need to implement the ReviewsController controller so we can begin creating,editing,deleting reviews and associating them with movies.

Right-click the Controllers folder and create a new ReviewsController controller. Have a look at the picture below to set the appropriate settings

Click Add. Visual Studio will create the following

A ReviewsController.cs file in the project's Controllers folder.
A Reviews folder in the project's Views folder.
Create.cshtml, Delete.cshtml, Details.cshtml, Edit.cshtml, and Index.cshtml in the new Views\Reviews folder.

9)  Now we must change some of the code that was generated by the scaffolding.I will open the ReviewsController.cs and change the Index() method.

  public class ReviewsController : Controller
    {
        private MovieDBContext db = new MovieDBContext();

        //
        // GET: /Reviews/

  public ActionResult Index([Bind(Prefix="id")] int movieid)
        {
         

         var movie = db.Movies.Find(movieid);

            if (movie != null)
            {
           
                return View(movie);
            }
            return HttpNotFound();
        }
 

As you can see this Action method must receive a parameter. This parameter represents a movie so we pass a movieid to this method. By using this [Bind(Prefix="id")] I just alias id with movieid.

10) Now we need to make some changes in the Index.cshtml in the Views/Reviews folder since we pass a movieid and not a reviewid

We must delete most of the code. The contents of the Index.cshtml should be

 @model MovieReviews.Models.Μovie

@{
    ViewBag.Title = "Index";
}

<h2>Reviews for @Model.Name</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

 That should be all.Now I am going to create a partial view(_Reviews)

Have a look at the picture below

Click Add.

11) Now we must change the code in the partial view , _Reviews.

Have a look at the picture below to see the complete implementation

The code inside the <table> </table> tags, is the code I commented out in the Index.cshtml in the Reviews folder.

Now I must call this partial view from the Index.cshtml in the Reviews folder.

I add the code in bold

<h2>Reviews for @Model.Name</h2>

@Html.Partial("_Reviews",@Model.Reviews);
 

12) Now we need a way to associate the review to a movie when clicking on the link "Create New" for the review.

<p>
    @Html.ActionLink("Create New", "Create",new { movieid=Model.Id})
</p>
 

Now we build and run the application again.When I click on the Movie link (http://localhost:59871/Movie) in the menu , I see the Reviews link for both my movies.I choose to click on the Reviews link for the first movie (The GodFather) and when I click on it, I see the following screen, where I can enter my review (after hitting Create New).

Finally I hit the Create button and my review for that movie has been entered.

Have a look at the picture below

 This is the code for the Create (HTTPGet) action inside the ReviewsController.cs     

     // GET: /Reviews/Create

        [HttpGet]
        public ActionResult Create(int movieid)
        {
          
            return View();
        }

We pass it the movieid for that movie as a parameter.

This is the code for the Create (HttpPost) action inside the ReviewsController.cs     

       //POST: /Reviews/Create

       [HttpPost]

       
        public ActionResult Create(MovieReview moviereview)
        {
            if (ModelState.IsValid)
            {
                db.Reviews.Add(moviereview);
                db.SaveChanges();
                  return RedirectToAction("Index", new { id = moviereview.MovieId});
            }

            return View(moviereview);
        }

This method will post back the form to the same url it came from.

13) Now let's see how to change slightly the code generated for the Edit method in the ReviewsController.cs 

  public ActionResult Edit(int id)
        {
            MovieReview moviereview = db.Reviews.Find(id);
            if (moviereview == null)
            {
                return HttpNotFound();
            }
            return View(moviereview);
        }

        //
        // POST: /Reviews/Edit/5

        [HttpPost]
        public ActionResult Edit(MovieReview moviereview)
        {
            if (ModelState.IsValid)
            {
                db.Entry(moviereview).State = EntityState.Modified;
                db.SaveChanges();
                return RedirectToAction("Index", new { id = moviereview.MovieId });
            }
            return View(moviereview);
        }

 This method will post back the form to the same url it came from.

Now we build and run the application again.When I click on the Movie link (http://localhost:59871/Movie) in the menu , I see the Reviews link for both my movies.I choose to click on the Reviews link for the first movie (The GodFather) and when I click on it, I can see the reviews and hit the Edit link.

Have a look at the picture below

Finally I hit the Save button and my review for that movie has been edited.

Because we want the MovieId field not to be edited we must change the code in the Edit.cshtml view in the Reviews folder.

We will use the @Html.HiddenFor(model=>model.MovieId)

See the picture below

14) Now let's see how to change slightly the code generated for the Delete method in the ReviewsController.cs 

// GET: /Reviews/Delete/5

        public ActionResult Delete(int id)
        {
            MovieReview moviereview = db.Reviews.Find(id);
            if (moviereview == null)
            {
                return HttpNotFound();
            }
            return View(moviereview);
        }

        //
        // POST: /Reviews/Delete/5

        [HttpPost, ActionName("Delete")]
        public ActionResult DeleteConfirmed(int id)
        {
            MovieReview moviereview = db.Reviews.Find(id);
            db.Reviews.Remove(moviereview);
            db.SaveChanges();
            return RedirectToAction("Index", new { id = moviereview.MovieId });
        }

This method will post back the form to the same url it came from.

Now we build and run the application again.When I click on the Movie link (http://localhost:59871/Movie) in the menu , I see the Reviews link for both my movies.I choose to click on the Reviews link for the first movie (The GodFather) and when I click on it, I can see the reviews and hit the Delete link.

Have a look at the picture below

Finally I hit the Delete button and my review for that movie has been deleted. 

Do not underestimate what we have accomplished so far. We have managed to develop an ASP.Net MVC 4.0 application where one can create,edit,delete,view and search for movies.

He can also create,edit,delete,view reviews for a particular movie.

In the next post I will talk about validation through data annotations and database migrations within the context of the Entity Framework Code First Paradigm.

Hope it helps!!!!