在Jquery UI Accordion中显示不同的MVC3视图

时间：2012-12-04 15:03:24

标签： jquery asp.net-mvc-3 accordion

真的不知道如何继续。

我有一个名为Application的控制器，它有四（4）个公共方法。我想要的只是加载一个带有四（4）个部分的Jquery手风琴，每个部分用于一个公共方法。在我的手风琴中我想要的是，默认情况下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();
        }

是否可以从一个控制器的不同方法向同一视图（）发送不同的返回值？怎么样？

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

1 个答案:

答案 0 :(得分：4)

修改

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

完全回答测试。我可以给你一个洞解决方案，但我不能在这里上传任何文件。如果您为我提供上传的地方，我无法为您安排整个解决方案。

<强>控制器/ 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");
        }
    }
}

<强>查看/主页/ 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>

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

相关问题
最新问题