ASP.NET MVC Secrets: Lesson 1 - Accordians without JQuery

Introduction

If you have been trying to learn ASP.NET MVC, one of the things that you may be trying to do is to add some cool AJAX features to your web page. You might realize pretty quickly that MVC doesn't come with many widgets to make things easier. You end up having to do a lot of coding to make your pages look good. And you end up having to learn Javascript to make some of the functionality work correctly. But you should know that the MVC Razor view engine has some powerful functions built into it already, they just aren't apparent at first glance. In this article, we are going to look at one of those features, the partial view. And we are going to exploit the partial view to make a cool accordian effect on a page by showing and hiding a partial view. So pull up a Visual Studio instance and let's get started.

Partial Views in MVC

I am going to assume that if you are reading this tutorial, you already know how to create an MVC application in Visual Studio, and that you know how to code a basic MVC application. If you need help getting started with MVC, you should consult the Microsoft MVC website at http://www.asp.net/mvc.

For this tutorial, we are going to start with the Home/Index.cshtml view of an MVC application. The first thing to do is empty out the code in the view, so that it is blank. To do this, simply double click on the index.cshtml view in the Solution Explorer. When the code window opens up, highlight all of the code and press delete. You should now have a blank code window. Now let's put some not so interesting code into this view. Paste the code snippet below into your code window.

<div id="commentaccordian">
   @Html.Partial("_accordiancollapsed")
</div>

This code tells the index.cshtml view to render another, partial view called "_accordiancollapsed" inside of itself. Let's go create _accordiancollapsed now. Right click on the Views/Home folder and select Add/View. Name the view _accordiancollapsed. Be sure to include the underbar at the beginning of the name, so that the Razor engine knows that this is a partial view. Check the box marked "Create as a Partial View" and then press the Add button.

Now in the _accordiancollapsed.cshtml file that you just created, paste this code snippet:

Press 
@Ajax.ActionLink("Here ", "ShowComments",
new AjaxOptions { UpdateTargetId = "commentaccordian", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" })
to See Comments Below

This code tells MVC to create a link called "Here" that executes an Ajax controller action called "ShowComments", and to replace the contents of the <div> with the id= commentaccordian with whatever the controller method returns. You might notice up above that the <div> in index.html has the id=commentaccordian, so when the controller method is executed, it is in fact this partial view that will get replaced. If you run this code now by pressing F5, this is what you will see (approximately).

Empty comments section
Empty comments section

Notice that there is a link called "Here" in the middle of the sentence "Press Here to see comments." That is the link we created above. If you press this link, you will see that it doesn't do anything. That's because it is not wired to a controller action. Let's do that now.

Open the Controllers/HomeController.cs file by double clicking it in the Solutions Explorer. We are going to add a method to this controller called "ShowComments". To do this, add this method code into the file below the Index method closing bracket:

       public ActionResult ShowComments()
        {
            return PartialView("_accordianexpanded");
        }

This code is simply going to show a partial view called "accordianexpanded". Now let's create that view. As we did above, go to Views/Home, right click and choose Add/View. Name this view _accordianexpanded, click the checkbox to make it a partial view, and press Add.

In the empty file, put some fake comments, like so:

<p>This is comment 1</p>
<p>This is comment 2</p>
<p>This is comment 3</p>

Now run the application again by pressing F5. When you press the "Here" link now, you should see the link replaced with something that looks like the picture below.

Show Comments Accordian Expanded
Show Comments Accordian Expanded

Hiding The Accordian

So now you have a working accordian that expands in place when you press a link. But what if you want to hide it again? The process is exactly the same. Let's add a link to our expanded accordian view to perform the hide function. Go to the _accordianexpanded.cshtml file and add this code below the three comments:

<div>
@Ajax.ActionLink("Hide Comments", "HideComments",
new AjaxOptions { UpdateTargetId = "commentaccordian", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" })
</div>

Now go to the HomeController.cs file and add this method:

       public ActionResult HideComments()
        {
            return PartialView("_accordiancollapsed");
        }

Now run the application and expand the accordian. You should see a link that says "Hide Comments". When you press it, the HideComments() controller action will be executed and the accordian will magically return to its original state. Isn't that cool, and simple?

I hoped you had fun with this tutorial and learned a little about the power of the Razor engine and MVC. Please leave comments or questions if you have any, and enjoy doing it yourself in MVC.

More by this Author


Comments

No comments yet.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working