.net MVC随笔6

来源:互联网 发布:无主之地2mac 编辑:程序博客网 时间:2024/05/22 15:48

CSS和JS初见

位置

  • /wwwroot/css
  • /wwwroot/js

css

/*对h3的模板设定*/h3{    font-size 18 pt;    font-family:sans-serif;    color:red;}/* table td的模板设定*/table ,td{    border:2px solid black;    border-collapse:collapse;    padding:5px;    font-family:sans-serif;}/*对p的模板设定*/p{    font-family:sans-serif;    font-size:12pt;    color:black;    background-color:ghostwhite;    border:2px solid red;    padding:2px;}

js

document.addEventListener("DOMContentLoaded", function () {    var element = document.createElement("p");    element.textContent = "This is the element from the third.js file";    document.querySelector("body").appendChild(element);});document.addEventListener("DOMContentLoaded", function () {    var element = document.createElement("p");    element.textContent = "This is the element from the fourth.js file";    document.querySelector("body").appendChild(element);});

Index.cshtml 调用

@model IEnumerable<WorkingWithVS.Models.Product>@{Layout=null;}<!DOCTYPE html><html><head>    <meta name="viewport" content="width=device-width"/>    <title>Working with Visual Studio</title>    **<link rel="stylesheet" href="~/css/first.css"/>    <link rel="stylesheet" href="~/css/second.css"/>    <script src="~/js/third.js"></script>    <script src="~/js/fourth.js"></script>**</head><body>    <h3>Product</h3>    <p>Request Time:@DateTime.Now.ToString("HH:mm:ss")</p>    <table>        <thead>            <tr><td>Name</td><td>Price</td></tr>        </thead>        <tbody>           @foreach(var p in Model)           {               <tr>                   <td>@p.Name</td>                   <td>@($"{p.Price:C2}")</td>               </tr>           }        </tbody>    </table></body></html>
  • css and js must study!