在Jquery UI中顯示不同的MVC3視圖手風琴

真的沒有線索，如何繼續。在Jquery UI中顯示不同的MVC3視圖手風琴

我有一個名爲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(); 
     }

是否有可能從一個控制器的不同方法，不同的返回值發送給了同樣的觀點（）？怎麼樣？

巨大的感謝一步的任何解決方案或步驟...

來源

2012-12-04 Aqua

所以basicly你想顯示一個頁面一個頁面？如果是這樣，你可能會需要iframes，不知道是否有其他任何東西替代了這些日子。 –

你需要改變你的動作返回'PartialView（）'，然後在你定義你的手風琴用戶'@Html的父頁面中。RenderPartial（'ActionName'）' –

感謝您的快速回復Rory。你能否給我解決一下如何從手風琴的一部分進行交互以展示隱藏的手風琴部分。例如，當用戶在第一部分中單擊按鈕時，顯示第二個手風琴部分？謝謝 – Aqua

編輯

我改變代碼爲您的需求。我還包括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>

解決方案現在看起來是這樣的：

來源

2012-12-04 15:21:45 iappwebdev

讓你知道後嘗試。 – Aqua

我剛剛將事件類型從'accordionactivate'更改爲'accordionbeforeactivate'。 – iappwebdev

順便說一下，哪個視圖是你的「視圖」。你能解釋一下哪一個和哪個地方放置什麼？抱歉，添麻煩了。在MVC中我很新。 – Aqua

在Jquery UI中顯示不同的MVC3視圖手風琴

回答

相關問題