Home How to write razor query to display two fields side by side?
Reply: 2

How to write razor query to display two fields side by side?

testsys123
1#
testsys123 Published in 2018-01-10 12:55:06Z

I am dynamically generating the fields using a foreach loop. I have several conditions on rendering those fields. There is one condition where on it being true, there are two fields that should be rendered side by side on the same row. I tried every possible approach but it isn't getting rendered as I want. I can't use <div class="form-group"> of as it will display the fields on separate lines. So, how should I write the razor query combined with bootstrap's code such that I have two fields side by side. Here is my current code:

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

Condition 3 is where I want to render those 2 fields This is my current state: check position of horsepower or rpm

mausinc
2#
mausinc Reply to 2018-01-10 13:12:37Z

put the fields next to each other using bootstrap row. statement 3 can for example hold both col-md-6 div tags

    <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

Monah
3#
Monah Reply to 2018-01-10 13:45:32Z

You can do the follow

  1. convert your foreach to for with index
  2. check if the index%2==0 is true, this means you have to go on new line but here you have two options

    • The loop in the beginning => index is equal 0 call it A: you need to add form-group
    • The loop not in the beginning => index >0 call it B: you need to close the previous div and to add new form-group

The Logic

 if(index%2 ==0)
    {
        if(index>0) // works with the case B
        {
            </div>
        }
        <div class="form-group">
    }
    ....
  1. finally once you go out the for loop you need to add the </div>

Here a code sample:

The Controller

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

The View 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>
}

Note: If you want for example to show 3 columns per line => use index%3 and class="col-md-4" and so on.

Hope this will help you

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.331636 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO