0

どうすればいいのか、本当に手がかりがありません。

4 つのパブリック メソッドを持つ Application というコントローラーがあります。私が望むのは、それぞれパブリック メソッドの 1 つに対応する 4 つのセクションを持つ Jquery アコーディオンをロードすることだけです。私のアコーディオンでは、デフォルトで2、3、および4番目のセクションが無効になります。ユーザーがフォームのセクションに入力して [次へ] をクリックすると、アコーディオンの 2 番目のセクションが表示されます。第3部、第4部も同様です。私のアプリケーションコントローラーは次のようになります。

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

1 つのコントローラーの異なるメソッドから同じ 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>

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>

ビュー/ホーム/_SelectJob.cshtml

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

Views/Home/_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 に答える