Question

我使用$item['name']循环动态生成字段。我有几个条件来渲染这些字段。有一个条件是真实的，有两个字段应该在同一行上并排呈现。我尝试了所有可能的方法，但它没有得到我想要的渲染。我不能使用foreach，因为它会在单独的行上显示字段。那么，我应该如何编写剃刀查询并结合bootstrap的代码，以便我有两个字段并排。这是我目前的代码：

<div class="form-group">

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

Answer 1

使用bootstrap行将字段放在彼此旁边。语句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
  }

fiddle

Answer 2

您可以执行以下操作

使用foreach

for

index

检查index%2==0是否为真，这意味着你必须换新线，但这里有两个选项
- 开头的循环=＆gt; index is equal 0称之为A：您需要添加form-group
- 不在开头的循环=＆gt; index >0将其称为B：您需要关闭之前的div并添加新的form-group

逻辑

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

最后一旦你走出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列=＆gt;使用index%3和class="col-md-4"等等。

希望这会对你有所帮助

如何编写razor查询并排显示两个字段？

2 个答案: