0

真的不知道该怎么办了。

我有一个名为 Application 的控制器，它有四 (4) 个公共方法。我想要的只是加载一个带有四 (4) 个部分的 Jquery Accordion，每个部分用于一个公共方法。在我的手风琴中，我希望默认情况下第 2,3 和第 4 部分将被禁用。当用户填写部分中的表格并单击下一步时，手风琴的第二部分变得可见。第 3 节和第 4 节也是如此。我的应用程序控制器看起来像，

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

是否可以将不同的返回值从一个控制器的不同方法发送到同一个视图（）？如何？

非常感谢您提供任何解决方案或一步一步...

4

1 回答 1

4

编辑

我根据您的需要更改了代码。我还包括了最新版本的 jQuery 和 jQuery UI 以使其正常工作。

完全答案测试。我可以为您提供漏洞解决方案，但我无法在此处上传任何文件。如果您为我提供上传位置，我无法为您放置整个解决方案。

控制器/家庭控制器

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");
        }
    }
}

视图/主页/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>

视图/主页/_Verify.cshtml

This is the view 'Verify'.

视图/主页/_Credentials.cshtml

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

视图/主页/_SelectJob.cshtml

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

视图/主页/_SendApplication.cshtml

This is the view 'SendApplication'.

视图/_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>

解决方案现在看起来像这样：

于 2012-12-04T15:21:45.230 回答