自定義JQuery的嚮導納入局部視圖

我想自定義當前正在處理靜態的HTML作爲不同的步驟，這樣生成的標籤jQuery的嚮導代碼，自定義JQuery的嚮導納入局部視圖

<form class="form-horizontal" role="form"> 
<div class="section add-alert"> 
    <div class="box2"> 
     <div id="my-steps"> 

     <h3>Step 1</h3> 
      <section> 
     <!-- Want to replace static Content for Step 1 with a Partial View --> 
    </section> 

    <h3>Step 2</h3> 
      <section> 
     <!-- Want to replace static Content for Step 2 with a Partial View --> 
    </section> 

    <h3>Step 3</h3> 
      <section> 
     <!-- Want to replace static Content for Step 3 with a Partial View --> 
    </section> 

    <h3>Step 4</h3> 
      <section> 
     <!-- Want to replace static Content for Step 4 with a Partial View --> 
    </section> 

    <h3>Summary</h3> 
      <section> 
     <!-- Want to replace static Content for Summary with a Partial View --> 
    </section> 

     <div>   
    <div> 
<div>

我使用以下javascript文件和css文件來創建步驟並格式化它。

<script src="@Url.Content("~/assets/js/app/jquery.steps.js")"></script> 
<link rel="stylesheet" href="@Url.Content("~/css/jquery.steps.css")"/> 
<link rel="stylesheet" type="text/css" href="@Url.Content("~/css/tabs.css")" /> 
<link rel="stylesheet" type="text/css" href="@Url.Content("~/css/tabstyles.css")" />

下面是從標題標籤自動創建的步驟和創建從分區選項卡的內容的功能，

<script> 


$("#my-steps").steps({ 
    headerTag: "h3", 
    bodyTag: "section", 
    transitionEffect: "fade", 
    stepsOrientation: "vertical", 
}); 

(function() { 

    [].slice.call(document.querySelectorAll('.tabs')).forEach(function (el) { 
     new CBPFWTabs(el); 
    }); 

})();

現在，這一切都產生是它創建了一個嚮導。在左側有一個垂直欄，其上創建了所有選項卡。每個選項卡都具有從h3標記中獲取的步驟名稱，並且內容是從每個標記之後的部分標記中獲取的。這些標籤只有在用戶訪問該部分時纔可點擊。所以如果我在步驟1，那麼步驟2選項卡不可點擊。如果我在步驟2，那麼步驟1和步驟2都是可點擊的。

這是目前所有靜態和所有步驟都在同一頁上。我已經爲每個步驟創建了每個步驟作爲部分視圖和不同視圖模型。如何在這種情況下實現我的部分視圖？

我想簡化一下。所以每個Partial View都會有自己的表單「Ajax.BeginForm」，它將指向它自己的控制器方法。我可以處理驗證。我不明白的是如何通過這個JQuery嚮導來使用所有的部分視圖。我應該在每個部分標籤下打「@ Html.Partial（」Separation_Step「）嗎？

來源

2015-06-08 Adnan Yaseen

人你能解決這個問題嗎？如果你這樣做，你能提供或解釋你是如何解決問題的。 – capiono

@capiono我更改了我的嚮導，並使用MVC中的部分視圖和AjaxForm創建了它。部分視圖從Action Method呈現。這種方法完全不同，我對通過Ajax調用渲染每個部分視圖更滿意。然而，對於JQuery類型這個鏈接是相當有幫助的，http://www.binaryintellect.net/articles/d278e8aa-3f37-40c5-92a2-74e65b1b5653.aspx –

我正在處理同樣的問題，我已經解決了這個問題。

我爲所有選項卡製作模型並且不使用部分視圖。這個嚮導適合我。

如果你需要使用的部分你可以從你的模型像這樣

@Html.Partial("_EmailIndex", Model.Emails)

在模型發送數據，你應該有這樣的

public List<Email> Emails { get; set; }

感謝的屬性，

來源

2017-02-01 23:58:34

自定義JQuery的嚮導納入局部視圖

回答

相關問題