ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Computers & Software»
  • Computer Science & Programming»
  • Programming Languages

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

Updated on June 4, 2012

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.

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: "https://hubpages.com/privacy-policy#gdpr"

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)