Question

我有使用jquery标签的情况，我希望根据 razor 页面背后的逻辑动态构建它。下面是 razor page asp.net mvc4 的代码。所以在下面的代码我需要根据循环中的组数动态创建选项卡。所以假设我在Model.Group中有10个组，它应该遍历它并创建10个不同的选项卡以及每个选项卡的内容（组）。一个组/标签可以具有任何控件，例如收音机，复选框，基于以下逻辑的文本输入。

查看

@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>    
}

Answer 1

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

    for(var i + 1;i<=Model.Groups.Count();++i)
    {    
        <div id="tabs-@i>
              //Place your content here accessing Model.Groups.ElementAt(i)
        </div>
    }


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

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

</script>    
}

在razor mvc4中动态创建jquery选项卡

1 个答案: