1

我的第一个 ASP.MVC 4 项目有一个问题，其中一个页面（到目前为止只有绑定页面）在主要内容区域的顶部显示集合的类型。我试过摆脱它，但不知所措。

我很确定这是我做过的事情，但无法修复它。有什么帮助？？？

问题在这里 页面顶部显示的问题

IE9 调试项目 IE 9 调试显示隐藏的可见性未应用

控制器

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>

索引.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

网站.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;
        }

查看源代码片段

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

来自 WCF 服务的模型片段

'''<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
4

1 回答 1

2

好的几件事，@从元素中删除符号fieldset第二次更改 for Each 语法，最后这是一个建议，您应该使用 @html 帮助程序而不是使用纯 html，您的代码应该像这样

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

更新

检查控制器的操作，因为假设您从 wcf 服务调用此操作，您应该像这样将数据传递给视图

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
于 2012-07-30T13:25:58.397 回答