Showing different MVC3 views in Jquery UI Accordion

Question

Really have no clue, how to proceed.

I have a controller called Application which has four (4) public methods. All I want is to load a Jquery Accordion with four (4) sections, each for one of the public methods. In my accordion I want that, by default the 2,3 and 4th section will be disabled. When user fill up the form in section and click next, the 2nd section of the accordion gets visible. Same goes for 3rd and 4th section. My Application Controller looks like,

public ActionResult Verify()
        {           
            return View();
        }
public ActionResult Credentials()
        {           
            return View();
        }
public ActionResult SelectJob()
        {           
            return View();
        }
public ActionResult SendApplication()
        {           
            return View();
        }

Is it possible to send different return value from the one controller's different methods to the same view()? How?

Huge thanks for any solution or step by step...

Answer 1

EDIT

I changed code for your needs. I also included newest versions of jQuery and jQuery UI to make it work.

---

Fully answer tested. I could give you the hole solution but I can't upload any files here. If you provide me a place to upload I can't place the entire solution for you.

Controller/HomeController

using System.Web.Mvc;

namespace Accordion.Controllers
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";

            return View();
        }

        [HttpGet]
        public ActionResult Verify()
        {
            return PartialView("_Verify");
        }

        [HttpGet]
        public ActionResult Credentials()
        {
            return PartialView("_Credentials");
        }

        [HttpGet]
        public ActionResult SelectJob()
        {
            return PartialView("_SelectJob");
        }

        [HttpGet]
        public ActionResult SendApplication()
        {
            return PartialView("_SendApplication");
        }
    }
}

Views/Home/Index.cshtml

<div id="accordion">
    <h3>Verify</h3>
    <div>
        @Html.Partial("_Verify")
    </div>

    <h3>Credentials</h3>
    <div>
        @Html.Partial("_Credentials")
    </div>

    <h3 class="disabled">SelectJob</h3>
    <div class="dynamic-content" data-action="SelectJob"></div>

    <h3 class="disabled">SendApplication</h3>
    <div class="dynamic-content" data-action="SendApplication"></div>
</div>

<script type="text/javascript">
    jQuery(function () {
        var $accordion = $('#accordion')

        $accordion.accordion({
            collapsible: true,
            animated: false,
            autoHeight: false,
            active: false
        });

        $accordion.on('accordionbeforeactivate', function (event, ui) {
            if (ui.newHeader.hasClass('disabled')) {
                return false;
            };
        });

        $accordion.on('accordionactivate', function (event, ui) {

            if (ui.newHeader.length > 0
             && ui.newPanel.html().length == 0
             && ui.newPanel.hasClass('dynamic-content') == true) {
                var action = ui.newPanel.data('action');

                $.ajax({
                    url: '/Home/' + action,
                    type: 'GET',
                    dataType: 'html',
                    success: function (htmlCodePartialView) {
                        ui.newPanel.html(htmlCodePartialView);
                    }
                });
            };
        });

        $accordion.on('click', '.next', function () {
            var $button = $(this);
            var $nextHeader = $button.closest('.ui-accordion-content').next()
            $nextHeader.removeClass('disabled').click();
        });
    });
</script>

Views/Home/_Verify.cshtml

This is the view 'Verify'.

Views/Home/_Credentials.cshtml

This is the view 'Credentials'.<br />
<button type="button" class="next">Next</button>

Views/Home/_SelectJob.cshtml

This is the view 'SelectJob'.<br />
<button type="button" class="next">Next</button>

Views/Home/_SendApplication.cshtml

This is the view 'SendApplication'.

Views/_Shared/_Layout.cshtml

    <!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
</head>

<body>
    <div class="page">

        <div id="header">
            <div id="title">
                <h1>My MVC Application</h1>
            </div>

            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>

            <div id="menucontainer">

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

            </div>
        </div>

        <div id="main">
            @RenderBody()
            <div id="footer">
            </div>
        </div>
    </div>
</body>
</html>

Solution looks now like this: