在Jquery UI Accordion中显示不同的MVC3视图_Jquery_Asp.net Mvc 3_Accordion

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

jquery asp.net-mvc-3

在Jquery UI Accordion中显示不同的MVC3视图,jquery,asp.net-mvc-3,accordion,Jquery,Asp.net Mvc 3,Accordion,真的没有线索，怎么继续我有一个名为Application的控制器，它有四（4）个公共方法。我只想加载一个包含四（4）个部分的Jquery，每个部分对应一个公共方法。在我的手风琴，我想，默认情况下，2，3和第四部分将被禁用。当用户在部分中填写表单并单击“下一步”时，手风琴的第二部分将可见。第三节和第四节也是如此。我的应用程序控制器看起来像 public ActionResult Verify() { return View();

真的没有线索，怎么继续

我有一个名为Application的控制器，它有四（4）个公共方法。我只想加载一个包含四（4）个部分的Jquery，每个部分对应一个公共方法。在我的手风琴，我想，默认情况下，2，3和第四部分将被禁用。当用户在部分中填写表单并单击“下一步”时，手风琴的第二部分将可见。第三节和第四节也是如此。我的应用程序控制器看起来像

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

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

非常感谢您提供的任何解决方案或逐步解决方案…

编辑

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

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

控制器/家庭控制器

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

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

This is the view 'Verify'.

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

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

This is the view 'SendApplication'.

    <!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>

Views/Home/\u Credentials.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>

This is the view 'Verify'.

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

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

This is the view 'SendApplication'.

    <!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>

视图/\u共享/\u布局.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>

This is the view 'Verify'.

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

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

This is the view 'SendApplication'.

    <!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>


@视图包。标题
我的MVC应用程序
@Html.Partial（“\u lognPartial”）

@ActionLink（“主页”、“索引”、“主页”）
@ActionLink（“关于”、“关于”、“主页”）

@RenderBody（）

解决方案现在如下所示：

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

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

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

This is the view 'Verify'.

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

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

This is the view 'SendApplication'.

<!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>
Views/Home/\u Credentials.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>

This is the view 'Verify'.

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

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

This is the view 'SendApplication'.

<!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>
视图/\u共享/\u布局.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>

This is the view 'Verify'.

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

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

This is the view 'SendApplication'.

<!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>

@视图包。标题我的MVC应用程序 @Html.Partial（“\u lognPartial”） @ActionLink（“主页”、“索引”、“主页”） @ActionLink（“关于”、“关于”、“主页”） @RenderBody（）
解决方案现在如下所示：

那么基本上你是想在一个页面中显示一个页面？如果是这样的话，您可能需要iFrame，但不确定现在是否还有其他东西可以替代它。您需要更改操作以返回
PartialView（）
，然后在父页面中定义您的手风琴用户
@Html.RenderPartial（'ActionName'）
，感谢您的快速回复。你能给我一个解决方案吗？我怎样才能从手风琴的一个部分交互来显示隐藏的手风琴部分。e、当用户单击第一部分中的按钮时，是否显示第二个手风琴部分？谢谢基本上你是想在一个页面中显示一个页面？如果是这样的话，您可能需要iFrame，但不确定现在是否还有其他东西可以替代它。您需要更改操作以返回
PartialView（）
，然后在父页面中定义您的手风琴用户
@Html.RenderPartial（'ActionName'）
，感谢您的快速回复。你能给我一个解决方案吗？我怎样才能从手风琴的一个部分交互来显示隐藏的手风琴部分。e、当用户单击第一部分中的按钮时，是否显示第二个手风琴部分？谢谢尝试后您知道。我刚刚将事件类型从
accordioActivate
更改为
accordionbeforeactivate
。顺便问一下，哪个视图是您的“视图”。你能解释一下是哪一个，放在哪里吗？抱歉给你添麻烦了。我是MVC的新手。很抱歉我的英语不好。。。你能解释一下这些步骤吗，比如，初始视图（在你的解决方案顶部）在做什么，我应该把JS代码放在哪里？我正在为你写一个示例解决方案。试一下后让你知道。我刚刚将事件类型从
accordioactivate
更改为
accordionbeforeactivate
。顺便问一下，哪个视图是你的“视图”. 你能解释一下是哪一个，放在哪里吗？抱歉给你添麻烦了。我是MVC的新手。很抱歉我的英语不好。。。你能解释一下这些步骤吗？比如，初始视图（位于解决方案顶部）在做什么？我应该把JS代码放在哪里？我正在为你编写一个示例解决方案。