如何编写剃刀查询以并排显示两个字段？

Question

我正在使用foreach 循环动态生成字段。我有几个渲染这些字段的条件。有一个条件为真，有两个字段应该在同一行并排呈现。 我尝试了所有可能的方法，但没有按我的意愿渲染。我不能使用<div class="form-group"> of，因为它会在单独的行上显示字段。 那么，我应该如何编写结合引导程序代码的剃刀查询，以便我有两个并排的字段。这是我当前的代码：

@foreach (var d in data)
{
    if (Condition1)
    {
        <div class="form-group">

            <label class="col-sm-3 control-label">
                Text 1
            </label>
            <div class="col-sm-8">

                @Html.TextBox("Box1")

            </div>

        </div>
    }
    else if(Condition 2)
    {
        <div class="form-group">
            <label class="col-sm-3 control-label">
                Text 2
            </label>

            <div class="col-sm-8">

                @Html.TextBox("Box2")

            </div>
        </div>
    }

     else if(Condition3)
     {
        <form class="form-inline">
            <label class="required col-sm-3 control-label">
                @*Horsepower and RPM*@
            </label>
            <div class="col-sm-2">
                @{
                    @Html.TextBox("Box2")
                }
            </div>
        </form>       
     }
}

条件 3 是我要渲染这两个字段的位置 这是我目前的状态： check position of horsepower or rpm

Answer 1

使用引导行将字段彼此相邻放置。例如，语句 3 可以同时保存 col-md-6 div 标签

    <div class="row">

    @if(statement1) {
    <div class="col-sm-6">
      <div class="form-group">
        <label for="">form 1</label>
        <input type="text">
      </div>
    </div>
   }
    @if(statement2) {
    <div class="col-sm-6">
      <div class="form-group">
        <label for="">form 2</label>
        <input type="text">
      </div>
    </div>
  </div
  }

http://jsbin.com/nalexuredo/edit?html,output

Answer 2

你可以这样做

1. 使用index 将您的foreach 转换为for

2. 检查index%2==0 是否为真，这意味着你必须换行，但这里有两个选择

   • 开头的循环 => index is equal 0 叫它 A：需要加form-group
   • 循环不在开头 => index >0 称之为 B：你需要关闭之前的 div 并添加新的 form-group

逻辑

 if(index%2 ==0)
    {
        if(index>0) // works with the case B
        {
            </div>
        }
        <div class="form-group">
    }
    ....

1. 最后，一旦你退出 for 循环，你需要添加 </div>

这里是代码示例：

控制者

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace WebApplication1.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            var list = new List<Data>()
            {
                new Data{Value="Val 1"},
                new Data{Value="Val 2"},
                new Data{Value="Val 3"},
                new Data{Value="Val 4"},
                new Data{Value="Val 5"},
                new Data{Value="Val 6"},
                new Data{Value="Val 7"}
            };
            return View(list);
        }


    }

    public class Data
    {
        public string Value { get; set; }
    }
}

CSHTML 视图

@model List<WebApplication1.Controllers.Data>
@{
    ViewBag.Title = "Home Page";
}


@for (var index = 0; index < Model.Count; index++)
{
    if (index % 2 == 0)
    {
        if (index > 0)
        {
            @:</div>
        }
        @:<div class="row">
    }
    <div class="col-md-6">
        @Model[index].Value @* here you can add whatever you want to represent your code*@
    </div>
}
@if (Model.Count > 0)
{
    @:</div>
}

注意：例如，如果您希望每行显示 3 列 => 使用 index%3 和 class="col-md-4" 等等。

希望对你有帮助