I have an issues with my first ASP.MVC 4 project where one page (only

Question

0

Asked: June 8, 20262026-06-08T20:05:11+00:00 2026-06-08T20:05:11+00:00

I have an issues with my first ASP.MVC 4 project where one page (only

0

I have an issues with my first ASP.MVC 4 project where one page (only bound page so far) is showing the type of the collection at the top of the main content area. I have tried getting rid of it but am at a loss.

I’m pretty sure its something I have done but can’t fix it. Any help???

Issue Here
Issue shown at the top of the page

IE9 Debug on item
IE 9 Debug showing the visibility hidden not applied

Controller

Public Class FailuresController
    Inherits Controller

    Function Index(model As IEnumerable(Of QSmartRectificationProvider.RectificationFaults)) As ActionResult
        ViewData("Message") = "Open Faults"
        Return View(Session("Failures"))
    End Function

End Class

_Layout.vbhtml

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>QSmart Rectifications</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/themes/base/css", "~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-right">
                    <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink("Log Out", "Index", "Home")</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">
            @RenderSection("featured", required:=false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <footer>
            <p>@DateTime.Now.Year - JCB Excavators LTD</p>
        </footer>

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required:=False)
    </body>
</html>

Index.vbhtml

@model QSmartRectification.QSmartRectificationProvider.RectificationFaults

@Code
    ViewData("Title") = "Open Failures"
End Code
@section featured
    <section class="featured">
        <div class="content-wrapper" >
            <p class="site-title float-left">@Html.ActionLink("QSmart Rectification Sign Off", "Index", "Home")</p>
            <input type="image" src="../../Images/Product.png" />
        </div>
    </section>
End Section
<br />
@Using Html.BeginForm()
@Html.ValidationSummary()
@<fieldset class="fieldset clear-fix">
    <legend>Open Faults</legend>
        <section class="content">
            <ul class="column">
                @For Each item As QSmartRectification.QSmartRectificationProvider.RectificationFaults In Model
                    @<li>
                        <section class="block">
                            <a href="#"><img alt="../../Images/Default.png"; src="@String.Format("../../Images/{0}.png", item.MajorAssembly)"/></a>
                            <label class="header">Zone</label>
                            <label>@item.ZoneName</label> 
                            <label class="header">Major Assembly</label>
                            <label>@item.MajorAssembly</label> 
                            <label class="header">Sub Assembly</label>
                            <label>@item.SubAssembly</label> 
                            <label class="header">Component Assembly</label>
                            <label>@item.ComponentAssembly</label> 
                            <label class="header">Business Test</label>
                            <label>@item.BusinessTest</label> 
                            <label class="header">Fault Code</label>
                            <label>@item.FaultCode</label> 
                            <label class="header">Fault Code Detail</label>
                            <label>@item.FaultCodeDetail</label> 
                        </section>
                    </li>
                Next            
            </ul>
        </section>
</fieldset>
End Using

Site.css

html {
    margin: 0;
    padding: 0;
    background-color:#fff;
}

body {
    background-color: #fff;
    border-top: solid 10px #fff;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}

a {
    color: #333;
    outline: none;
    padding-left: 3px;
    padding-right: 3px;
    text-decoration: none;
    clear:none;    
}
b
    a:link, a:visited,
    a:active, a:hover {
        color: #333;
    }

    a:hover {
        text-decoration:underline;
    }

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

h1, h2, h3,
h4, h5, h6 {
    color: #fff;
    margin-bottom: 0;
    padding-bottom: 0;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.75em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}


/* main layout
----------------------------------------------------------*/
.content-wrapper {
    margin: 0 auto;
    max-width: 960px;
    background-color:#fff;
}

#body {
    clear: both;
    padding-bottom: 35px;
}

footer {
    clear: both;
    font-size: .8em;
    height: 100px;
}
    footer .float-left,
    footer .float-right {
        float: none;
    }

    footer {
        text-align: center;
        height: auto;
        padding: 10px 0;
    }

        footer p {
            margin: 0;
            color:#999;
        }

/* menu
----------------------------------------------------------*/
ul#menu {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0;
    text-align: right;
}

    ul#menu li {
        display: inline;
        list-style: none;
        padding-left: 15px;
    }

        ul#menu li a {
            background: none;
            color:#999;
            text-decoration: none;
            font-size: 2em;
        }

        ul#menu li a:hover {
            color: #333;
            text-decoration: none;
        }


/* page elements
----------------------------------------------------------*/
/* featured */
.featured {
    background-color:#fff;
}

    .featured .content-wrapper {
        background-color: #eb7c04;
        background-image: -ms-linear-gradient(left, #eb7c04 0%, #fff 100%);
        background-image: -o-linear-gradient(left, #eb7c04 0%, #fff 100%);
        background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #f8b589), color-stop(1, #fff));
        background-image: -webkit-linear-gradient(left, #eb7c04 0%, #fff 100%);
        background-image: linear-gradient(left, #eb7c04 0%, #fff 100%);
        color: #f8b589;
        padding: 5px 40px 5px 40px;
        text-align:right;
        display:normal;
    }

        .featured .site-title {
            font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
            font-size: 3em;
            color:#fff;
            margin: 20px 0;
            padding-top:10px;
        }   

        .featured hgroup.title h1, .featured hgroup.title h2 {
            color: #fff;
        }

        .featured p {
            font-size: 1.1em;
        }  

/* page titles */
hgroup.title {
    margin-bottom: 10px;
}

hgroup.title h1, hgroup.title h2 {
    display: inline;
}

hgroup.title h2 {
    font-weight: normal;
    margin-left: 3px;
}

/* features */
section.feature {
    width: 300px;
    float: left;
    padding: 10px;
}

/* ordered list */
ol.round {
    list-style-type: none;
    padding-left: 0;
}
    ol.round li {
        margin: 25px 0;
        padding-left: 45px;
    }

/* content */
article {
    float: left;
    width: 70%;
}

aside {
    float: right;
    width: 25%;
}

    aside ul {
        list-style: none;
        padding: 0;
    }

        aside ul li {
            background: url("../Images/bullet.png") no-repeat 0 50%;
            padding: 2px 0 2px 20px;
        }

label {
    padding-right: 20px;
    text-indent: -15px;
}

/* ajax login/registration dialog */
.ui-dialog {
    font-family: inherit;
    font-size: 1.0em;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    border: 0 none;
}

    .ui-dialog input {
        font-family: inherit;
        font-size: 1.25em;
    }

.ui-dialog-titlebar {
    color: inherit;
    font-weight: inherit;
    border: 0 none;
    background: none;
    float: right;    
}

.ui-dialog-titlebar-close {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

.ui-widget-header {   
    border: 0 none;
    background: none;  
}

.modal-popup {
}
    .modal-popup input[type="text"],
    .modal-popup input[type="password"] {
        width: 90%;
    }

/* info and errors */
.message-info {
    border: 1px solid;
    clear: both;
    padding: 10px 20px;
}

.message-error {
    clear: both;
    color: #e80c4d;
    font-size: 1.1em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.message-success {
    color: #7ac0da;
    font-size: 1.3em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.error {
    color: #e80c4d;
}

/* styles for validation helpers */
.field-validation-error {
    color: #e80c4d;
    font-weight: bold;
}

.field-validation-valid {
    display: none;
}

input[type="text"].input-validation-error,
input[type="password"].input-validation-error {
    border: 1px solid #e80c4d;
}

.validation-summary-errors {
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}

.validation-summary-valid {
    display: none;
}

/********************
*   Mobile Styles   *
********************/
@media only screen and (max-width: 850px) {

    /* header
    ----------------------------------------------------------*/
    header .float-left,
    header .float-right {
        float: none;
    }

    /* logo */
    header .site-title {
        margin: 10px;
        text-align: center;
    }

    /* menu */
    nav {
        margin-bottom: 5px;
    }

    ul#menu {
        margin: 0;
        padding: 0;
        text-align: center;
    }

        ul#menu li {
            margin: 0;
            padding: 0;
        }


    /* main layout
    ----------------------------------------------------------*/
    .main-content,
    .featured + .main-content {
        background-position: 10px 0;
    }

    .content-wrapper {
        padding-right: 10px;
        padding-left: 10px;
        background-color:#fff;
    }

    .featured .content-wrapper {
        padding: 10px;
    }

    /* page content */
    article, aside {
        float: none;
        width: 100%;
    }

    /* ordered list */
    ol.round {
        list-style-type: none;
        padding-left: 0;
    }

        ol.round li {
            padding-left: 10px;
            margin: 25px 0;
        }

            ol.round li.zero,
            ol.round li.one,
            ol.round li.two,
            ol.round li.three,
            ol.round li.four,
            ol.round li.five,
            ol.round li.six,
            ol.round li.seven,
            ol.round li.eight,
            ol.round li.nine {
                background: none;
            }

     /* features */
     section.feature {
        float: none;
        padding: 10px;
        width: auto;
     }

        section.feature img {
            color: #999;
            content: attr(alt);
            font-size: 1.5em;
            font-weight: 600;
        }

}

    .fieldset {
        border-radius: -moz-border-radius(15px);
        border-radius: -webkit-border-radius(15px);
        border-radius: -ms-border-radius(15px);
        border-radius:15px;        
        width: 100%;
        background: #f7d7a5;
        padding: 3px;
        margin-left:10px;
        margin-right:10px;
    }
    .fieldset legend {
        background: #CCA383;
        padding: 6px;
        font-weight: bold;
        border-radius: -moz-border-radius(15px);
        border-radius: -webkit-border-radius(15px);
        border-radius: -ms-border-radius(15px);
        border-radius:15px;        
    }  

    /* content layouts
    ----------------------------------------------------------*/
    .content {
        position: relative;
        float: left; 
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        -ms-border-radius: 15px;
        border-radius: 15px;  
        margin-right: 15px;
        margin-left: 15px;
    }

        .content h2
        {
            font-size: 3em;
            font-weight: 600;
            color:red;        
        }

        .content label.checkbox {
            display: inline;
        }

        .content input[type="text"],
        .content input[type="password"] {
            border: 1px solid #e2e2e2;
            color: #333;
            font-size: 4em;
            width: 400px;
        }

            .content input[type="text"]:focus,
            .content input[type="password"]:focus {
                border: 1px solid #7ac0da;
            }

        .content label {
            font-size: 4em;
            font-weight: 600;
        }

        .content input[type="submit"],.content input[type="button"] {
            background-color: #eb7c04;
            background: #eb7c04; /* Old browsers */
            background: -moz-linear-gradient(top,  #eb7c04 1%, #f1c487 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#eb7c04), color-stop(100%,#f1c487)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top,  #eb7c04 1%,#f1c487 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top,  #eb7c04 1%,#f1c487 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top,  #eb7c04 1%,#f1c487 100%); /* IE10+ */
            background: linear-gradient(top,  #eb7c04 1%,#f1c487 100%); /* W3C */
            border: 4px solid #000;
            border-radius: -moz-border-radius(15px);
            border-radius: -webkit-border-radius(15px);
            border-radius: -ms-border-radius(15px);
            border-radius:15px;
            cursor: pointer;
            font-size: 3em;
            font-weight: 600;
            padding: 7px;       
        }

        .content ul.column {
            width: 100%;
            padding: 0;
            margin: 10px 0;
            list-style-type: none;
        }

        .content ul.column li {
            float: left;
            max-width: 230px;
            display: inline;
        }

        .content .block {
            margin: 5px;
            padding: 10px;
            background: #eb7c04;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius:10px;
            height: 400px;
            width: 200px;
            max-height: 400px;
            max-width: 200px;            
            min-height: 400px;
            min-width: 200px;                     
        }

        .content .block a {
            color: #FFF;
        }

        .content .block img {
            width: 89%;  
            height: 100px;
            padding: 5px;
            margin: 0px;
            background:#fff;
            -ms-interpolation-mode: bicubic; 
        }

        .content .block label
        {
            font-weight: 200;
            font-size: 1em;
            text-indent: 5px;
            display: block;
        }

        .content .block label.header
        {
            font-weight: 600;
            text-decoration: underline;
        }

View Source snippet

    <div id="body">


     <section class="featured">

 <div class="content-wrapper">


  <p class="site-title float-left">
   <a href="/">QSmart Rectification Sign Off</a>
  </p>

              <input type="image" src="../../Images/Product.png" />

 </div>

     </section>

             <section class="content-wrapper main-content clear-fix">
                 System.Linq.OrderedEnumerable`2[QSmartRectification.QSmartRectificationProvider.RectificationFaults,System.Int64] QSmartRectification.QSmartRectificationProvider.RectificationFaults



 <br />
 <form action="/Failures" method="post">
  <div class="validation-summary-valid" data-valmsg-summary="true">
   <ul>
    <li style="display: none;"></li>

   </ul>
  </div>
  <fieldset class="fieldset clear-fix">

       <legend>Open Faults</legend>
           <section class="content">

   <ul class="column">


    <li>

                             <section class="block">
                                 <a href="#"><img alt="../../Images/Default.png" src="../../Images/Hydraulic System.png" ;="" /></a>



                                 <label class="header">Zone</label>
                                 <label>Wheeled SIP 1</label> 
                                 <label class="header">Major Assembly</label>
                                 <label>Hydraulic System</label> 
                                 <label class="header">Sub Assembly</label>
                                 <label>Valve Blocks</label> 
                                 <label class="header">Component Assembly</label>
                                 <label>Hammer Valve</label> 
                                 <label class="header">Business Test</label>
                                 <label>Hammer Hoses</label> 
                                 <label class="header">Fault Code</label>
                                 <label>Adjust / Align</label> 
                                 <label class="header">Fault Code Detail</label>
                                 <label>Fouling</label> 
                             </section>

    </li>


    <li>

                             <section class="block">
                                 <a href="#"><img alt="../../Images/Default.png" src="../../Images/Engine Bay.png" ;="" /></a>



                                 <label class="header">Zone</label>
                                 <label>Wheeled SIP 1</label> 
                                 <label class="header">Major Assembly</label>
                                 <label>Engine Bay</label> 
                                 <label class="header">Sub Assembly</label>
                                 <label>Air Conditioning</label> 
                                 <label class="header">Component Assembly</label>
                                 <label>Compressor</label> 
                                 <label class="header">Business Test</label>
                                 <label>Installation</label> 
                                 <label class="header">Fault Code</label>
                                 <label>Adjust / Align</label> 
                                 <label class="header">Fault Code Detail</label>
                                 <label>Twisted</label> 
                             </section>

    </li>

Model snippet from WCF Service

'''<remarks/>
<System.CodeDom.Compiler.GeneratedCodeAttribute("System.Xml", "4.0.30319.17626"),  _
 System.SerializableAttribute(),  _
 System.Diagnostics.DebuggerStepThroughAttribute(),  _
 System.ComponentModel.DesignerCategoryAttribute("code"),  _
 System.Xml.Serialization.XmlTypeAttribute([Namespace]:="http://schemas.datacontract.org/2004/07/vFrame.Service.Qsmart.Sync")>  _
Partial Public Class RectificationFaults
    Inherits Object
    Implements System.ComponentModel.INotifyPropertyChanged

    Private auditScoreField As String

    Private businessTestField As String

    Private commentField As String

    Private componentAssemblyField As String

    Private createdByField As String

    Private failureIDField As Long

    Private failureIDFieldSpecified As Boolean

    Private faultField As String

    Private faultAreaField As String

    Private faultCodeField As String

    Private faultCodeDetailField As String

    Private fixedByCommentField As String

    Private fixedByFaultRectificationIDField As Integer

    Private fixedByFaultRectificationIDFieldSpecified As Boolean

    Private fixedByIDField As Integer

    Private fixedByIDFieldSpecified As Boolean

    Private majorAssemblyField As String

    Private modelNameField As String

    Private shortagePartField As String

    Private subAssemblyField As String

    Private zoneNameField As String

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-06-08T20:05:13+00:00

Ok a couple of things, remove the @ symbol from the fieldset element second change the for Each syntax and last it’s a recomedation you should use the @html helpers instead using the plain html, you code should see like this

<fieldset class="fieldset clear-fix">
<legend>Open Faults</legend>

<ul>
    @For Each item In Model
        Dim currentItem = item
        @<li>
            <section class="content">
            <a href="#"><img alt="../../Images/Default.png"; src="@String.Format("../../Images/{0}.png", item.MajorAssembly)"/></a>
            </section>
            <label class="header">Zone</label>
            <label>@item.ZoneName</label> 
        </li>
    Next
</ul>

UPDATE

Check the Action of your controller, because assuming that you’re calling this action from a wcf service, you should passed the data to the view like this

Public Class FailuresController
Inherits Controller

Function Index(model As IEnumerable(Of QSmartRectificationProvider.RectificationFaults)) As ActionResult
    ViewData("Message") = "Open Faults"
    'Return View(Session("Failures"))
    Return View(model) 'this is how the data is sending to the view
End Function

End Class

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I have an issues with my first ASP.MVC 4 project where one page (only

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply