---
# System prepended metadata

title: mod07
tags: [mvc]

---

```csharp
// shared/_layout.cshtml

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <ul>
        <li>@Html.ActionLink("Home", "Index", "Home")</li>
        <li>@Html.ActionLink("Opera List", "Index", "Opera")</li>
    </ul>
    <div>
        @RenderBody()
    </div>
</body>
</html>
//==============================
// shared/_layout.cshtml
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="~/Content/site.css" rel="stylesheet" />
</head>
<body>
    <ul>
        <li>@Html.ActionLink("Home", "Index", "Home")</li>
        <li>@Html.ActionLink("Opera List", "Index", "Opera")</li>
        <li>@Html.ActionLink("Opera Create", "Create", "Opera")</li>
    </ul>
    <div>
        @RenderBody()
    </div>
    <script src="~/Scripts/jquery-3.7.1.js"></script>
</body>
</html>
//================================
// basic.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width" />
    <link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <h1>Basic</h1>

        <a href="/" class="btn btn-primary">MVC</a>
    </div> 

    <script src="Scripts/jquery-3.7.1.js"></script>
    <script src="Scripts/bootstrap.js"></script>
</body>
</html>
//=======================
// grid.html
<div class="container">
    <div class="row">
        <!--.col-md-1{col$$}*12-->
        <div class="col-md-1">col01</div>
        <div class="col-md-1">col02</div>
        <div class="col-md-1">col03</div>
        <div class="col-md-1">col04</div>
        <div class="col-md-1">col05</div>
        <div class="col-md-1">col06</div>
        <div class="col-md-1">col07</div>
        <div class="col-md-1">col08</div>
        <div class="col-md-1">col09</div>
        <div class="col-md-1">col10</div>
        <div class="col-md-1">col11</div>
        <div class="col-md-1">col12</div>
    </div>
</div>
//===================================
        <div class="row">
            <div class="col-sm-4">
                Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
            </div>
            <div class="col-sm-4">
                Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
            </div>
            <div class="col-sm-4">
                Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
            </div>
        </div>
//==============
// form.html
<form class="form-inline">
    <div class="form-group">
        <label for="email"> Email </label>
        <input class="form-control" type="email" id="email" />
    </div>
    <div class="form-group">
        <label for="password"> Password </label>
        <input class="form-control" type="password" id="password" />
    </div>
    <input type="submit" class="btn btn-primary" />
</form>
//=============================
// button.html
<button type="button" class="btn btn-default">Default</button>
 <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-success">Success</button>
 <button type="button" class="btn btn-info">Info</button>
 <button type="button" class="btn btn-warning">Warning</button>
 <button type="button" class="btn btn-danger">Danger</button>
 <button type="button" class="btn btn-link">Link</button>

//================================
// navbar
<div class="navbar navbar-inverse navbar-fixed-top">
   <div class="container">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle"
               data-toggle="collapse" data-target=".navbar-collapse">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
       <a class="navbar-brand" href="https://www.uuu.com.tw"> UCOM </a>
     </div>
     <div class="navbar-collapse collapse">
       <ul class="nav navbar-nav">
         <li><a href="#">Home</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
       </ul>
     </div>
   </div>
 </div>
//======================
// opera/index.cshtml
<table class="table table-striped">
    <thead>
        <tr>
            <th>@Html.DisplayNameFor(m => m.Title)</th>
            <th>@Html.DisplayNameFor(m => m.Year)</th>
            <th>@Html.DisplayNameFor(m => m.Composer)</th>
            <th></th>
        </tr>
    </thead>
    
// site.css
thead{
    background-color:black;
    color:white;
}
//=====================
// opera/index.cshtml
@using (Html.BeginForm("filterdata", "opera", FormMethod.Get, new {@class="form-inline"}))
{   
    @:Number: @Html.TextBox("number",null,new  {@class="form-control" })
    <input type="submit" class="btn btn-primary"/>
}
//======================================
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle"
                    data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("MyWeb", "Index", "Home",null,new {@class="navbar-brand"})
          
        </div>
        <div class="navbar-collapse collapse">
          
            <ul class="nav navbar-nav">
             
                <li>@Html.ActionLink("Opera List", "Index", "Opera")</li>
                <li>@Html.ActionLink("Opera Create", "Create", "Opera")</li>
            </ul>
        </div>
    </div>
</div>
//========================
// shared/_layout.cshtml
<script src="~/Scripts/jquery-3.7.1.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
@RenderSection("scripts",false)

                
// operas/create.cshtml
@section scripts{
    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
}
```
