2014-10-14 10 views
0

У меня есть сценарий, в котором я использую вкладку jquery, и я хочу построить ее динамически на основе логики позади бритва. ниже мой код для razor страница asp.net mvc4. поэтому в нижеприведенном коде мне нужно динамически создавать вкладки на основе количества групп в цикле. поэтому позвольте сказать, что у меня есть 10 групп в Model.Group, она должна прокручивать его и создавать 10 разных вкладок, а также контент для каждой вкладки (Группа). Одна группа/вкладка может иметь любое управление, например. радио, флажок, ввод текста на основе ниже логики.Динамически создавая вкладку jquery в razor mvc4

Посмотреть

@model Orchard.Club.ViewModels.SignupViewModel 


<div id="tabs"> 
    <ul> 
    <li><a href="#tabs-1">Membership Info</a></li>   
    </ul> 

    <div id="tabs-1"> 
    @foreach (var groups in Model.Groups) 
      { 

       if (Model.CustomControls.Where(r => r.Group == groups.GroupTitle).Count() > 0) 
       {            
        <label style="font-weight:bold">@groups.GroupTitle</label> 

        <div style=" border: 1px solid #CCCCCC;padding:5px"> 

        @foreach (var row in Model.CustomControls.Where(r => r.Group == groups.GroupTitle)) 
        { 
         <div style="padding:7px"> 

          @if (row.ControlType == "Single Line Text") 
          { 
           <label>@row.Caption</label> 
           <input type="text" value="@row.Value" disabled/> 
          } 
          else if (row.ControlType == "Multi Line Text") 
          { 
           <label>@row.Caption</label> 
           <textarea disabled>@row.Value</textarea> 
          } 
          else if (row.ControlType == "Yes/No Choice(Radio Buttons)") 
          { 
           if (row.Value == "No") 
           { 
            <div>  
             <label>@row.Caption</label> 
             &nbsp      
             <input type="radio" value="Yes" disabled/> &nbsp Yes 
             &nbsp 
             <input type="radio" checked="checked" value="No" disabled/> &nbsp No 
            </div> 
           } 
           else 
           { 

            <div>  
             <label>@row.Caption</label> 
             &nbsp      
             <input type="radio" value="Yes" checked="checked" disabled/> &nbsp Yes 
             &nbsp 
             <input type="radio" value="No" disabled/> &nbsp No 
            </div> 

           } 

          } 
          else if (row.ControlType == "Checkbox") 
          { 
           <div> 
            <input type="checkbox" checked="@row.Value" disabled/> @row.Caption 
           </div> 
          } 
         </div>       
        }        
        </div> 

       <br /> 
       } 
      } 
</div> 
</div> 


@using (Script.Foot()) 
{  
<script type="text/javascript"> 

    $(function() { 
     $("#tabs").tabs(); 
    }); 

</script>  
} 

ответ

1
<div id="tabs"> 
    <ul> 
    for(var i + 1;i<=Model.Groups.Count();++i) 
    {  
     <li><a href="#[email protected]">Nunc tincidunt</a></li> 
    } 
    </ul> 
</div> 

    for(var i + 1;i<=Model.Groups.Count();++i) 
    {  
     <div id="[email protected]> 
       //Place your content here accessing Model.Groups.ElementAt(i) 
     </div> 
    } 


@using (Script.Foot()) 
{  
<script type="text/javascript"> 

    $(function() { 
     $("#tabs").tabs(); 
    }); 

</script>  
} 
Смежные вопросы