Ahmad Zakaria Ahmad Zakaria - 2 years ago 51
CSS Question

Html tags Errors (MVC)

i am working on my MVCOnlineShop Project, i made the homepage so far , categories on the

navbar
, when i press the categories , it take me to the product list , now i want to apply this bootstrap to the product
Partial View
, i tried a lot , but sometimes
div
and
li
problems and sometimes
body
and
head
problems.
this was my
ProductList.cshtml
Partial View
without bootstrap, it was showing the product in such category correctly:

@model MVCOnlineShop.Models.Category

@{
ViewBag.Title = "ProductList";
}
<ul>

@foreach (var Product in Model.Products)
{
<li>
@Html.ActionLink(Product.ProductName,
"Details", new { id = Product.CategoryID })
</li>
}
</ul>


and this is what i tried in this
Partial View
:

@model MVCOnlineShop.Models.Category

@{
ViewBag.Title = "ProductList";
}

<script src="~/Scripts/Productjs/bootstrap.min.js"></script>
<script src="~/Scripts/Productjs/jquery.js"></script>
<link href="~/Content/Productcss/bootstrap.min.css" rel="stylesheet">
<link href="~/Content/Productcss/2-col-portfolio.css" rel="stylesheet">


<div class="container">

<!-- Page Header -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Page Heading
<small>Secondary Text</small>
</h1>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
@foreach (var Product in Model.Products)
{
<li>
<div class="row">
<div class="col-md-6 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
<a href="#">@Html.ActionLink(Product.ProductName,
"Details", new { id = Product.CategoryID })</a>
</h3>
</div>
</div>
</li>
}

</div>


and i am getting this view on the page,but
i want it like the one in the
bootstrap
mentioned above , any help please?

Thanks in advance!

Answer Source

There are a couple of problems here.

The first being the use of a single <li> containing a div.row with only one div.col-*-6.

What you are doing is creating a list item for every product with a row containing a div with a width of 50%. So you're just going to end up with a single column of list items set to half of the width of your page.

My suggestion would be to place a div.row outside of your foreach loop and create a div.col-*-6 for every Product. This should do the trick:

<div class="row">
    @foreach(var Product in Model.Products)
    {
        <div class="col-md-6 portfolio-item">
            <a href="#">
                <img class="img-responsive" src="http://placehold.it/700x400" alt="">
            </a>
            <h3>
                <a href="#">@Html.ActionLink(Product.ProductName, "Details", new { id = Product.CategoryID })</a>
            </h3>
        </div>
    }
</div>

div.col-*-6 will create a div with a width of 50% that floats left. When two div.col-*-6s are created, they take up 100% of the width of the page. Therefore, if a third is created, it will move to the next available space to the left. This would be the next line.

.body-content{
  padding: 15px;
}

.prod-item{
  line-height: 40px;
  background-color: #ccc;
  border: 1px solid #bbb;
  border-radius: 5px;
  margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container body-content">
  <div class="row">
    <div class="col-xs-6 text-center prod-item">
      Product 1
    </div>
    <div class="col-xs-6 text-center prod-item">
      Product 2
    </div>
    <div class="col-xs-6 text-center prod-item">
      Product 3
    </div>
    <div class="col-xs-6 text-center prod-item">
      Product 4
    </div>
  </div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download