2019/0515/RWD Utility+Card&MVC ViewModel+CRUD(RD)

#RWD Utility

上次講的是排版方式 flexbox bs4

這次繼續講通用Utility類別字型字體顏色背景

Bs4比bs3顏色更多

全幅背景圖??

##Utility顏色

###Keyword 文字

text- …

###Keyword 背景色

bg- …

###Keyword 複習

p ? padding

mb ? marginbotton

bs3沒有通用屬性要自己下css

transparent 透明

###RWD/11Utility_Color.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title></title>

    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
      
    </style>
</head>
<body>
    <div class="container">
        <p class="text-primary">Welcome My Website</p>
        <p class="text-secondary">Welcome My Website</p>
        <p class="text-success">Welcome My Website</p>
        <p class="text-danger">Welcome My Website</p>
        <p class="text-warning">Welcome My Website</p>
        <p class="text-info">Welcome My Website</p>
        <p class="text-light bg-dark">Welcome My Website</p>
        <p class="text-dark">Welcome My Website</p>
        <p class="text-body">Welcome My Website</p>
        <p class="text-muted">Welcome My Website</p>
        <p class="text-white bg-dark">Welcome My Website</p>
        <hr />
        <div class="text-white bg-primary p-3 mb-2">Welcome My Website</div>
        <div class="text-white bg-secondary  p-3 mb-2">Welcome My Website</div>
        <div class="text-white bg-success p-3 mb-2">Welcome My Website</div>
        <div class="text-white bg-danger p-3 mb-2">Welcome My Website</div>
        <div class="text-white bg-warning p-3 mb-2">Welcome My Website</div>
        <div class="text-white bg-info p-3 mb-2">Welcome My Website</div>
        <div class="text-white bg-dark p-3 mb-2">Welcome My Website</div>
        <div class="text-dark bg-light p-3 mb-2">Welcome My Website</div>
        <div class="text-dark bg-transparent p-3 mb-2">Welcome My Website</div>




    </div>

  
  
   
</body>
</html>

##Utility格式

keyword

<h1-6>

<small>

<pre>

<code>

<kbd>

沒套的時候其實只是有含意的區位沒有樣式

###RWD/12Utility_Text.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title></title>

    <!--<link href="Content/bootstrap.min.css" rel="stylesheet" />-->
    <style>
      
    </style>
</head>
<body>
    <div class="container">
        <h1>h1. Bootstrap 4</h1>
        <h2>h2. Bootstrap 4</h2>
        <h3>h3. Bootstrap 4</h3>
        <h4>h4. Bootstrap 4</h4>
        <h5>h5. Bootstrap 4</h5>
        <h6>h6. Bootstrap 4</h6>

        <p class="h1">h1. Bootstrap 4</p>
        <p class="h2">h2. Bootstrap 4</p>
        <p class="h3">h3. Bootstrap 4</p>
        <p class="h4">h4. Bootstrap 4</p>
        <p class="h5">h5. Bootstrap 4</p>
        <p class="h6">h6. Bootstrap 4</p>

        <span class="h1">h1. Bootstrap 4</span>
        <span class="h2">h2. Bootstrap 4</span>
        <span class="h3">h3. Bootstrap 4</span>
        <span class="h4">h4. Bootstrap 4</span>
        <span class="h5">h5. Bootstrap 4</span>
        <span class="h6">h6. Bootstrap 4</span>

        <hr />
        <h1>Welcome My Website<small>sub title</small></h1>
        <h2>Welcome My Website<small>sub title</small></h2>
        <h3>Welcome My Website<small>sub title</small></h3>

        <hr />

        <pre>
          function updateData() {
            $.ajax({
                type: 'GET',
                url: 'https://ptx.transportdata.tw/MOTC/v2/Rail/TRA/LiveBoard?$format=JSON',
                format: 'json',
                success: function (data) {
                    //alert(data.length);
                    var TripLine;
                    var DelayTime;
                    var Direction;
                    $('#tb1').append("<thead><tr><td>站名</td><td>車次</td><td>車種</td><td>山/海線</td><td>行車方向</td><td>到站時間</td><td>發車時間</td><td>誤點時間</td></tr></thead>");
                    $('#tb1').append("<tbody>");
                    for (var i = 0; i < data.length; i++) {
                            switch (data[i].TripLine) {
                                case 0:
                                    TripLine = "不經山海線";
                                    break;
                                case 1:
                                    TripLine = "山線";
                                    break;
                                case 2:
                                    TripLine = "海線";
                                    break;
                        }
                        DelayTime = data[i].DelayTime == 0 ? "準點" : "<span style='color:red'>誤點" + data[i].DelayTime+"分鐘</span>"
                        Direction = data[i].Direction == 0 ? "順行" : "逆行";


                        $('#tb1').append("<tr><th>" + data[i].StationName.Zh_tw + "</th><th>" + data[i].TrainNo + "</th><th>" + data[i].TrainTypeName.Zh_tw + "</th><th>" + TripLine + "</th><th>" + Direction + "</th><th>" + data[i].ScheduledArrivalTime + "</th><th>" + data[i].ScheduledDepartureTime + "</th><th>" + DelayTime + "</th></tr>");

                    }
                    $('#tb1').append("</tbody>");

                },
                error: function () {
                    alert('Error!!');
                }

            });
            setTimeout("updateData()",1000);
        }
        updateData();
        </pre>

        <hr />

        <code>alert('Error!!');</code>
        <hr />
        <span>請按下<kbd>Ctrl+F</kbd>進行文件搜尋</span>
    </div>
  
   
</body>
</html>

##格式對齊

###justify自動切齊 ( 字跟字寬度自動平均

###badge 徽章

###以斷點做文字對齊 sm md lg xs(太小不用寫)

###truncate 隱藏多於的資料 (( sql 看過則為刪除資料不留log

<div class="row">
            <div class="col-2 text-truncate">
                Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
            </div>
        </div>

###相對

<div class="row">
            <div class="d-inline-block  text-truncate" style="max-width:150px">
                Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
            </div>
        </div>

###絕對

### Overflow = break ? 卷軸

其實以上bsclass css裡面就是overflow hidden

還有很多例如

去除底線

開頭字變大寫 capitalize 其實都是 css style 只是在稍加更改

### /RWD/13Utility_Text2.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title></title>

    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
      
    </style>
</head>
<body>
    <div class="container">
        <p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
        <p class="text-capitalize">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>


        <p class="text-left">h1. Bootstrap 4</p>
        <p class="text-center">h1. Bootstrap 4</p>
        <p class="text-right">h1. Bootstrap 4</p>

        <p class="text-sm-left">h1. Bootstrap 4</p>
        <p class="text-md-center">h1. Bootstrap 4</p>
        <p class="text-lg-right">h1. Bootstrap 4</p>
        <p class="text-xl-center">h1. Bootstrap 4</p>
        <hr />

        <div class="badge badge-danger text-wrap" style="width:50px">
            This text window aaaaaa ssss aaaaaaa
        </div>

        <hr />

        <div class="row">
            <div class="col-2 text-truncate">
                Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
            </div>
        </div>

        <div class="row">
            <div class="d-inline-block  text-truncate" style="max-width:150px">
                Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
            </div>
        </div>
        <hr />


        <p class="text-break">
            PneumonoultramicroscopicsilicovolcanoconiosisPneumonoultramicroscopicsilicovolcanoconiosisPneumonoultramicroscopicsilicovolcanoconiosisPneumonoultramicroscopicsilicovolcanoconiosisPneumonoultramicroscopicsilicovolcanoconiosisPneumonoultramicroscopicsilicovolcanoconiosis
        </p>
    </div>
  
   
</body>
</html>

##邊框 border

Rem 從根 window 繼承

### /RWD/14Utility_Borders.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title></title>

    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
      span{
          width:200px;height:200px;
      }
    </style>
</head>
<body>
    <div class="container">
        <hr />
        <div class="row">
            <div class="col-sm-12 bg-dark">
                <span class="border">　</span>
                <span class="border-top">　</span>
                <span class="border-right">　</span>
                <span class="border-bottom">　</span>
                <span class="border-left">　</span>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12 bg-dark">
                <span class="border border-danger">　</span>
                <span class="border-top border-info">　</span>

            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 bg-dark">
                <span class="rounded">　</span>
                <span class="rounded-top">　</span>
                <span class="rounded-left">　</span>
                <span class="rounded-circle">　</span>
                <span class="rounded-pill">　</span>
            </div>
        </div>
    </div>

</body>
</html>

## Utility總結比較牽涉到版型設計頂多牽涉到UX跟功能較無關

Display 顯示

Flex 對齊

color顏色

border邊框

剩下的老師沒講需要在看docs

Bordersgetbootstrap

##BS 對表格影響

table

caption

tfoot

thead

tr td

原本都有自己的位置定位

但放入bs就會整個布局都不一樣

Tablesgetbootstrap

有很多種bs樣式要去docs看比較清楚

然後連hover都會有改變

#改核心不要直接改

最好的方式是複製起來然後自己弄個自己網站的css後置程式碼然後改顏色等等然後?只要link位置比原bs.css引入得更後面就會吃越後面link那種

Table有沒有響應式呢? table-responsive-md

### 15Table.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title></title>

    <link href="Content/bootstrap.min.css" rel="stylesheet" />

    <link href="MyStyle.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="table-responsive-md">
            <table class="table table-striped table-borderless table-hover">
                <caption>成績單</caption>
                <tfoot>
                    <tr>
                        <th colspan="9" class="">製表人:林老師</th>
                    </tr>
                </tfoot>

                <tbody>
                    <tr>
                        <td>王大明</td>
                        <td>男</td>
                        <td>97</td>
                        <td>王大明</td>
                        <td>男</td>
                        <td>97</td>
                        <td>王大明</td>
                        <td>男</td>
                        <td>97</td>
                    </tr>
                    <tr>
                        <td>王大明</td>
                        <td>男</td>
                        <td>97</td>
                        <td>王大明</td>
                        <td>男</td>
                        <td>97</td>
                        <td>王大明</td>
                        <td>男</td>
                        <td>97</td>
                    </tr>
                    <tr>
                        <td>王大明</td>
                        <td>男</td>
                        <td>97</td>
                        <td>王大明</td>
                        <td>男</td>
                        <td>97</td>
                        <td>王大明</td>
                        <td>男</td>
                        <td>97</td>
                    </tr>
                    <tr>
                        <td>王大明</td>
                        <td>男</td>
                        <td>97</td>
                        <td>王大明</td>
                        <td>男</td>
                        <td>97</td>
                        <td>王大明</td>
                        <td>男</td>
                        <td>97</td>
                    </tr>
                    <tr>
                        <td>王大明</td>
                        <td>男</td>
                        <td>97</td>
                        <td>王大明</td>
                        <td>男</td>
                        <td>97</td>
                        <td>王大明</td>
                        <td>男</td>
                        <td>97</td>
                    </tr>
                    <tr>
                        <td>王大明</td>
                        <td>男</td>
                        <td>97</td>
                        <td>王大明</td>
                        <td>男</td>
                        <td>97</td>
                        <td>王大明</td>
                        <td>男</td>
                        <td>97</td>
                    </tr>
                </tbody>
                <thead class="table-dark">
                    <tr class="">
                        <th>姓名</th>
                        <th>性別</th>
                        <th>成績</th>
                        <th>姓名</th>
                        <th>性別</th>
                        <th>成績</th>
                        <th>姓名</th>
                        <th>性別</th>
                        <th>成績</th>
                    </tr>
                </thead>
            </table>
        </div>
        <hr />
        <table class="table table-sm">
            <caption>成績單</caption>
            <tfoot>
                <tr>
                    <th colspan="9" class="">製表人:林老師</th>
                </tr>
            </tfoot>

            <tbody>
                <tr>
                    <td>王大明</td>
                    <td>男</td>
                    <td>97</td>
                    <td>王大明</td>
                    <td>男</td>
                    <td>97</td>
                    <td>王大明</td>
                    <td>男</td>
                    <td>97</td>
                </tr>
                <tr>
                    <td>王大明</td>
                    <td>男</td>
                    <td>97</td>
                    <td>王大明</td>
                    <td>男</td>
                    <td>97</td>
                    <td>王大明</td>
                    <td>男</td>
                    <td>97</td>
                </tr>
                <tr class="bg-dark text-light">
                    <td>王大明</td>
                    <td>男</td>
                    <td>97</td>
                    <td>王大明</td>
                    <td>男</td>
                    <td>97</td>
                    <td>王大明</td>
                    <td>男</td>
                    <td>97</td>
                </tr>
                <tr>
                    <td>王大明</td>
                    <td>男</td>
                    <td>97</td>
                    <td>王大明</td>
                    <td>男</td>
                    <td>97</td>
                    <td>王大明</td>
                    <td>男</td>
                    <td>97</td>
                </tr>
                <tr>
                    <td>王大明</td>
                    <td>男</td>
                    <td>97</td>
                    <td>王大明</td>
                    <td>男</td>
                    <td>97</td>
                    <td>王大明</td>
                    <td>男</td>
                    <td>97</td>
                </tr>
                <tr>
                    <td>王大明</td>
                    <td>男</td>
                    <td>97</td>
                    <td>王大明</td>
                    <td>男</td>
                    <td>97</td>
                    <td>王大明</td>
                    <td>男</td>
                    <td>97</td>
                </tr>
            </tbody>
            <thead class="table-dark">
                <tr class="">
                    <th>姓名</th>
                    <th>性別</th>
                    <th>成績</th>
                    <th>姓名</th>
                    <th>性別</th>
                    <th>成績</th>
                    <th>姓名</th>
                    <th>性別</th>
                    <th>成績</th>
                </tr>
            </thead>
        </table>
    </div>

</body>
</html>

##Card ( 有階層性

Pano? Bs3 改成

Card bs4

Components 組件

Content 內容

###階層性

Card-header/body/footer

接著用用flexbox去排版 col-md-4 …

Columns 列

Row 行

如果要擺圖片?

首先圖片先給響應式class card-img

1擺在卡片最上方

然後跟header/body/footer同階層

接著又分左側右側

2圖片左邊文字右邊 ( 卡片系統無法 ???

所以要利用網格系統 ( 會很多層 ( 好像是卡片系統無法跟網格系統互相扛拜所以需要用 div下網格系統在包住卡片系統

還可以扛拜很多東西，老師說自己看 …

Cardsgetbootstrap

卡片 (Card)getbootstrap

### /RWD/16Card.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title></title>

    <link href="Content/bootstrap.min.css" rel="stylesheet" />

    <link href="MyStyle.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-sm-6">
                <div class="card bg-warning">
                    <div class="card-header">
                        Header
                    </div>
                    <img src="Desert.jpg" style="width:100%" />
                    <div class="card-body">
                        Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
                        fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
                        quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
                        Petierunt uti sibi concilium totius Galliae in diem certam indicere.
                        Cras mattis iudicium purus sit amet fermentum.
                    </div>
                    <footer class="card-footer">
                        <input id="Button1" type="button" value="OK" class="btn btn-primary" />
                    </footer>
                </div>

            </div>
            <div class="col-md-4 col-sm-6">
                <div class="card bg-danger">
                    <div class="card-header">
                        Header
                    </div>
                    <div class="card-body">
                        <h1>Title</h1>
                        Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
                        fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
                        quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
                        Petierunt uti sibi concilium totius Galliae in diem certam indicere.
                        Cras mattis iudicium purus sit amet fermentum.
                    </div>
                    <footer class="card-footer">
                        <input id="Button1" type="button" value="OK" class="btn btn-outline-light" />
                    </footer>
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="card bg-primary">
                    <div class="card-header">
                        Header
                    </div>
                    <div class="row no-gutters">
                        <div class="col-md-4">
                            <img src="Desert.jpg" class="card-img" />
                        </div>
                        <div class="col-md-8">
                            <div class="card-body">
                                Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
                                fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
                                quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
                                Petierunt uti sibi concilium totius Galliae in diem certam indicere.
                                Cras mattis iudicium purus sit amet fermentum.
                            </div>
                        </div>
                    </div>
                    <footer class="card-footer">
                        <input id="Button1" type="button" value="OK" class="btn btn-warning" />
                    </footer>
                </div>
            </div>
        </div>


       



    </div>

</body>
</html>

###Card內容

Card-text/title/subtitle

Card-link

###List ul li

List-group

List-group-item

List-group-flush

也可以直接放到gridsystem ??

然後下head 可以融合看起來像一體設計

就是大小顏色樣式寫好了可以共存的style

一樣去官網看

### /RWD/16Card.html ( 同一個檔案下半段

 <hr />

        <div class="row">
            <div class="col-md-4 col-sm-6">
                <div class="card">
                    <div class="card-header">
                        Header
                    </div>

                    <div class="card-body">
                        <h5 class="card-title">Card Title</h5>
                        <h6 class="card-subtitle">Sub Card Title</h6>
                        <p class="card-text">
                            Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
                            fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
                            quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
                            Petierunt uti sibi concilium totius Galliae in diem certam indicere.
                            Cras mattis iudicium purus sit amet fermentum.
                        </p>
                        <a href="#" class="card-link">加入購物車</a>
                    </div>

                </div>

            </div>
            <div class="col-md-4 col-sm-6">
                <div class="card">
                    <div class="card-header">
                        Header
                    </div>

                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">aaaaaa</li>
                        <li class="list-group-item">bbbbbb</li>
                        <li class="list-group-item">cccccc</li>
                    </ul>
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="card bg-primary">
                    <div class="card-header">
                        Header
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">aaaaaa</li>
                        <li class="list-group-item">bbbbbb</li>
                        <li class="list-group-item">cccccc</li>
                    </ul>
                    <img src="Desert.jpg" style="width:100%" />
                    <div class="card-body">
                        Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
                        fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
                        quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
                        Petierunt uti sibi concilium totius Galliae in diem certam indicere.
                        Cras mattis iudicium purus sit amet fermentum.
                    </div>
                    <footer class="card-footer">
                        <input id="Button1" type="button" value="OK" class="btn btn-primary" />
                    </footer>
                </div>
            </div>
        </div>
        <hr />

        <ul class="list-group">
            <li class="list-group-item">aaaaaa</li>
            <li class="list-group-item">bbbbbb</li>
            <li class="list-group-item">cccccc</li>
        </ul>
    </div>

##卡片系統搭配其他系統只要扛拜出來即可

##補充

預設是gridsystem https://getbootstrap.com/docs/4.0/layout/grid/

除了content 也可以用 row 或 card-group

總之card可以跟其他組件扛拜要舉一反三十六

### /RWD/16Card.html ( 補充扛拜系統程式碼

<hr />

        <div class="card-group">
         
                <div class="card bg-warning">
                    <div class="card-header">
                        Header
                    </div>
                    <img src="Desert.jpg" style="width:100%" />
                    <div class="card-body">
                        Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
                        fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
                        quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
                        Petierunt uti sibi concilium totius Galliae in diem certam indicere.
                        Cras mattis iudicium purus sit amet fermentum.
                    </div>
                    <footer class="card-footer">
                        <input id="Button1" type="button" value="OK" class="btn btn-primary" />
                    </footer>
                </div>

           
                <div class="card bg-danger">
                    <div class="card-header">
                        Header
                    </div>
                    <div class="card-body">
                        <h1>Title</h1>
                        Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
                        fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
                        quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
                        Petierunt uti sibi concilium totius Galliae in diem certam indicere.
                        Cras mattis iudicium purus sit amet fermentum.
                    </div>
                    <footer class="card-footer">
                        <input id="Button1" type="button" value="OK" class="btn btn-outline-light" />
                    </footer>
                </div>
         
                <div class="card bg-primary">
                    <div class="card-header">
                        Header
                    </div>
                    <div class="row no-gutters">
                        <div class="col-md-4">
                            <img src="Desert.jpg" class="card-img" />
                        </div>
                        <div class="col-md-8">
                            <div class="card-body">
                                Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
                                fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
                                quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
                                Petierunt uti sibi concilium totius Galliae in diem certam indicere.
                                Cras mattis iudicium purus sit amet fermentum.
                            </div>
                        </div>
                    </div>
                    <footer class="card-footer">
                        <input id="Button1" type="button" value="OK" class="btn btn-warning" />
                    </footer>
                </div>
            </div>
       
    </div>

###/RWD/16Card.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title></title>

    <link href="Content/bootstrap.min.css" rel="stylesheet" />

    <link href="MyStyle.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-sm-6">
                <div class="card bg-warning">
                    <div class="card-header">
                        Header
                    </div>
                    <img src="Desert.jpg" style="width:100%" />
                    <div class="card-body">
                        Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
                        fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
                        quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
                        Petierunt uti sibi concilium totius Galliae in diem certam indicere.
                        Cras mattis iudicium purus sit amet fermentum.
                    </div>
                    <footer class="card-footer">
                        <input id="Button1" type="button" value="OK" class="btn btn-primary" />
                    </footer>
                </div>

            </div>
            <div class="col-md-4 col-sm-6">
                <div class="card bg-danger">
                    <div class="card-header">
                        Header
                    </div>
                    <div class="card-body">
                        <h1>Title</h1>
                        Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
                        fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
                        quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
                        Petierunt uti sibi concilium totius Galliae in diem certam indicere.
                        Cras mattis iudicium purus sit amet fermentum.
                    </div>
                    <footer class="card-footer">
                        <input id="Button1" type="button" value="OK" class="btn btn-outline-light" />
                    </footer>
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="card bg-primary">
                    <div class="card-header">
                        Header
                    </div>
                    <div class="row no-gutters">
                        <div class="col-md-4">
                            <img src="Desert.jpg" class="card-img" />
                        </div>
                        <div class="col-md-8">
                            <div class="card-body">
                                Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
                                fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
                                quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
                                Petierunt uti sibi concilium totius Galliae in diem certam indicere.
                                Cras mattis iudicium purus sit amet fermentum.
                            </div>
                        </div>
                    </div>
                    <footer class="card-footer">
                        <input id="Button1" type="button" value="OK" class="btn btn-warning" />
                    </footer>
                </div>
            </div>
        </div>


        <hr />

        <div class="row">
            <div class="col-md-4 col-sm-6">
                <div class="card">
                    <div class="card-header">
                        Header
                    </div>

                    <div class="card-body">
                        <h5 class="card-title">Card Title</h5>
                        <h6 class="card-subtitle">Sub Card Title</h6>
                        <p class="card-text">
                            Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
                            fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
                            quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
                            Petierunt uti sibi concilium totius Galliae in diem certam indicere.
                            Cras mattis iudicium purus sit amet fermentum.
                        </p>
                        <a href="#" class="card-link">加入購物車</a>
                    </div>

                </div>

            </div>
            <div class="col-md-4 col-sm-6">
                <div class="card">
                    <div class="card-header">
                        Header
                    </div>

                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">aaaaaa</li>
                        <li class="list-group-item">bbbbbb</li>
                        <li class="list-group-item">cccccc</li>
                    </ul>
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="card bg-primary">
                    <div class="card-header">
                        Header
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">aaaaaa</li>
                        <li class="list-group-item">bbbbbb</li>
                        <li class="list-group-item">cccccc</li>
                    </ul>
                    <img src="Desert.jpg" style="width:100%" />
                    <div class="card-body">
                        Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
                        fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
                        quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
                        Petierunt uti sibi concilium totius Galliae in diem certam indicere.
                        Cras mattis iudicium purus sit amet fermentum.
                    </div>
                    <footer class="card-footer">
                        <input id="Button1" type="button" value="OK" class="btn btn-primary" />
                    </footer>
                </div>
            </div>
        </div>
        <hr />

        <div class="card-group">
         
                <div class="card bg-warning">
                    <div class="card-header">
                        Header
                    </div>
                    <img src="Desert.jpg" style="width:100%" />
                    <div class="card-body">
                        Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
                        fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
                        quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
                        Petierunt uti sibi concilium totius Galliae in diem certam indicere.
                        Cras mattis iudicium purus sit amet fermentum.
                    </div>
                    <footer class="card-footer">
                        <input id="Button1" type="button" value="OK" class="btn btn-primary" />
                    </footer>
                </div>

           
                <div class="card bg-danger">
                    <div class="card-header">
                        Header
                    </div>
                    <div class="card-body">
                        <h1>Title</h1>
                        Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
                        fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
                        quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
                        Petierunt uti sibi concilium totius Galliae in diem certam indicere.
                        Cras mattis iudicium purus sit amet fermentum.
                    </div>
                    <footer class="card-footer">
                        <input id="Button1" type="button" value="OK" class="btn btn-outline-light" />
                    </footer>
                </div>
         
                <div class="card bg-primary">
                    <div class="card-header">
                        Header
                    </div>
                    <div class="row no-gutters">
                        <div class="col-md-4">
                            <img src="Desert.jpg" class="card-img" />
                        </div>
                        <div class="col-md-8">
                            <div class="card-body">
                                Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
                                fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
                                quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
                                Petierunt uti sibi concilium totius Galliae in diem certam indicere.
                                Cras mattis iudicium purus sit amet fermentum.
                            </div>
                        </div>
                    </div>
                    <footer class="card-footer">
                        <input id="Button1" type="button" value="OK" class="btn btn-warning" />
                    </footer>
                </div>
            </div>
       
    </div>
    
</body>
</html>

#MVC

Mvc 利用 tD(tDept) tE(tEmp)一個 model 只能配一個 view

那怎讓兩個Model配同一個view??

2種方式

ViewModel ( 為了一個view讀兩個model特地去做一個新的model出來跟MVVM是兩碼子是

patidView

ViewModel

先介紹第一種首先建立基底MODEL 接著建立一個新資料夾取名叫ViewModel藉此區分 ( 也可以放在原資料夾接著在ViewModel資料夾中新增一個CVM.CS 要將兩個Model合併在這一個class中記得要引入另外一個models才可以使用物件 using _05ViewModel.Models;

首先使用泛型list塞 tDepartment與tEmployee 這兩個class建立 CVM這個model

接著就要去編輯Controller 記得要把基底,model與原本的model都要進來但是還是要將 dbEmployeeEntities 建立物件接著藉由CVM這個類別建立新物件將資料塞進去直接將 CVM這個物件return回view

然後不用範本直接空view

打開只會看到layout

接著用razor引入 model資料 @model _05ViewModel.ViewModel.CVM

就開始用BS gridsystem排版左邊引入tDepartment 類別資料右邊tEmployee資料

此時已經把資料合併為CVM而且讀出來了在這個頁面了

只要寫RAZOR 寫C#即可把資料做顯示

接著做塞選點左側連結後後右側顯示塞選後的內容

接著要去修改controller傳過去的資料庫model內容要改成查詢式where

即可

###資料庫

###model

###/05ViewModel/Models/tDepartment.cs

//------------------------------------------------------------------------------
// <auto-generated>
//     這個程式碼是由範本產生。
//
//     對這個檔案進行手動變更可能導致您的應用程式產生未預期的行為。
//     如果重新產生程式碼，將會覆寫對這個檔案的手動變更。
// </auto-generated>
//------------------------------------------------------------------------------

namespace _05ViewModel.Models
{
    using System;
    using System.Collections.Generic;
    
    public partial class tDepartment
    {
        public int fDepId { get; set; }
        public string fDepName { get; set; }
    }
}

### 05ViewModel/Models/tEmployee.cs

//------------------------------------------------------------------------------
// <auto-generated>
//     這個程式碼是由範本產生。
//
//     對這個檔案進行手動變更可能導致您的應用程式產生未預期的行為。
//     如果重新產生程式碼，將會覆寫對這個檔案的手動變更。
// </auto-generated>
//------------------------------------------------------------------------------

namespace _05ViewModel.Models
{
    using System;
    using System.Collections.Generic;
    
    public partial class tEmployee
    {
        public string fEmpId { get; set; }
        public string fName { get; set; }
        public string fPhone { get; set; }
        public Nullable<int> fDepId { get; set; }
    }
}

###ViewModel

###05ViewModel/ViewModel/CVM.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using _05ViewModel.Models;

namespace _05ViewModel.ViewModel
{
    public class CVM
    {
        public List<tDepartment> department { get; set; }
        public List<tEmployee> employee { get; set; }
    }
}

###/05ViewModel/Controllers/HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
//06-2-3 using _06ViewModel.Models及using _06ViewModel.ViewModel
using _05ViewModel.Models;
using _05ViewModel.ViewModel;

namespace _05ViewModel.Controllers
{
    public class HomeController : Controller
    {
        //06-2-4 於HomeController建立DB物件
        dbEmployeeEntities db = new dbEmployeeEntities();

        // GET: Home
        //06-2-5 編輯ActionResult Index()的內容
        public ActionResult Index(int id=1)
        {
            CVM cvm = new CVM()
            {
                department = db.tDepartment.ToList(),
                employee = db.tEmployee.Where(m => m.fDepId == id).ToList()
            };


            return View(cvm);
        }
    }
}

###/05ViewModel/Views/Home/Index.cshtml

@*//06-3-3 在最上方加上@model _06ViewModel.ViewModel.CVMDepEmp*@
@model _05ViewModel.ViewModel.CVM

@{
    ViewBag.Title = "部門員工列表";
}

<h2>Index</h2>

@*//06-3-5 在Index View中撰寫顯示畫面*@
<div class="row">
    <div class="col-xs-3">
        @foreach (var item in Model.department)
        {
            <p>
                @Html.ActionLink(item.fDepName, "Index", new { id = item.fDepId })

            </p>
        }
    </div>
    <div class="col-xs-9">
        <table class="table">
            <tr>
                <th>工號</th>
                <th>姓名</th>
                <th>電話</th>
                <th>部門</th>
            </tr>
            @foreach (var item in Model.employee)
            {
                <tr>
                    <th>@item.fEmpId</th>
                    <th>@item.fName</th>
                    <th>@item.fPhone</th>
                    <th>@item.fDepId</th>
                </tr>
            }

        </table>
    </div>
</div>

###老師步驟

//06-1 建立ViewModel
//06-1-1 建立dbEmployee.mdb資料庫Model
//       在Models上按右鍵,選擇加入,新增項目,資料,ADO.NET實體資料模型
//       來自資料庫的EF Designer
//       連接dbEmployee.mdf資料庫,連線名稱不修改,按下一步按鈕
//       選擇Entity Framework 6.x, 按下一步按鈕
//       資料表"全選", 按完成鈕
//       若跳出詢問方法按確定鈕
//06-1-2 在專案上按右鍵,建置
//06-1-3 加入ViewModel資料夾
//06-1-4 using _06ViewModel.Models
//06-1-5 建立tDepartment和tEmployee的List物件

//06-2 建立HomeController
//06-2-1 在Controllers資料夾上按右鍵,加入,控制器,選擇 MVC5Controller-Empty
//06-2-2 指定控制器名稱為HomeController,並開啟HomeController
//06-2-3 using _06ViewModel.Models及using _06ViewModel.ViewModel
//06-2-4 於HomeController建立DB物件
//06-2-5 編輯ActionResult Index()的內容

//06-3 建立各個View
//06-3-1 在public ActionResult Index()上按右鍵,新增檢視,建立Index View
//06-3-2 進行下列設定:
//       View name:Index
//       Template:Empty (Without model)
//       勾選Use a layout pages
//       按下Add
//06-3-3 在最上方加上@model _06ViewModel.ViewModel.CVMDepEmp

接著做新增功能

一個是get 一個是 post 所以有兩個 action 因為要把資料帶到view給下拉式選單用所以get裡面要傳tD

接著處理 POST 把接收到的前端資料寫到參數傳入ACTION 在傳入資料庫儲存

要RETURN到你當初編輯前的頁面所以要帶部門參數

接著新增CREATE檢視頁面 ( 一樣不用範本一樣引入資料MODEL

簡單繫結 form

Bs畫表單 ( 還沒教先講

Keyword

Form-horizontal/group/comtrol

然後利用gridsystem排版

Label for

弄完一個按鈕後複製四次改繫結位置與顯示字即可

最後用一個 submit的按鈕 Bs排版 offset 空格

更改部門欄位改為下拉式回圈顯示選項 ( 要動態的從資料庫顯示出來 ( 不要寫死不然維護麻煩

到此新增功能完成

###/05ViewModel/Controllers/HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
//06-2-3 using _06ViewModel.Models及using _06ViewModel.ViewModel
using _05ViewModel.Models;
using _05ViewModel.ViewModel;

namespace _05ViewModel.Controllers
{
    public class HomeController : Controller
    {
        //06-2-4 於HomeController建立DB物件
        dbEmployeeEntities db = new dbEmployeeEntities();

        // GET: Home
        //06-2-5 編輯ActionResult Index()的內容
        public ActionResult Index(int id=1)
        {
            CVM cvm = new CVM()
            {
                department = db.tDepartment.ToList(),
                employee = db.tEmployee.Where(m => m.fDepId == id).ToList()
            };


            return View(cvm);
        }

        //06-2-6 於HomeController建立GET與POST的Create Action
        public ActionResult Create()
        {

            return View(db.tDepartment.ToList());
        }
      
        [HttpPost]
        public ActionResult Create(tEmployee emp)
        {
            db.tEmployee.Add(emp);
            db.SaveChanges();


            return RedirectToAction("Index",new { id=emp.fDepId});
        }

    }
}

###05ViewModel/Views/Home/Create.cshtml

@*//06-3-9 加入給下拉選單用的資料*@
@model IEnumerable<_05ViewModel.Models.tDepartment>

@{
    ViewBag.Title = "新增員工";
}

@*//06-3-10 將英文字改為中文字*@
<h2>新增員工</h2>
@*//06-3-11 建立員工資料新增表單*@
<form method="post" action="@Url.Action("Create")">
    <div class="form-horizontal">
        <div class="form-group">
            <label class="col-md-2 control-label" for="fEmpId">員工代號</label>
            <div class="col-md-10">
                <input id="fEmpId" name="fEmpId" type="text" class="form-control" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label" for="fDepId">部門</label>
            <div class="col-md-10">


                <select id="fDepId" name="fDepId" class="form-control">
                    @foreach (var item in Model)
                    {
                        <option value="@item.fDepId">@item.fDepName</option>
                    }
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label" for="fName">姓名</label>
            <div class="col-md-10">
                <input id="fName" name="fName" type="text" class="form-control" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label" for="fPhone">電話</label>
            <div class="col-md-10">
                <input id="fPhone" name="fPhone" type="text" class="form-control" />
            </div>
        </div>
        <div class="form-group">

            <div class="col-md-10 col-md-offset-2">
                <input id="Submit1" type="submit" value="新增" class="btn btn-danger" />
            </div>
        </div>
    </div>



</form>

###老師步驟

//06-1 建立ViewModel
//06-1-1 建立dbEmployee.mdb資料庫Model
//       在Models上按右鍵,選擇加入,新增項目,資料,ADO.NET實體資料模型
//       來自資料庫的EF Designer
//       連接dbEmployee.mdf資料庫,連線名稱不修改,按下一步按鈕
//       選擇Entity Framework 6.x, 按下一步按鈕
//       資料表"全選", 按完成鈕
//       若跳出詢問方法按確定鈕
//06-1-2 在專案上按右鍵,建置
//06-1-3 加入ViewModel資料夾
//06-1-4 using _06ViewModel.Models
//06-1-5 建立tDepartment和tEmployee的List物件

//06-2 建立HomeController
//06-2-1 在Controllers資料夾上按右鍵,加入,控制器,選擇 MVC5Controller-Empty
//06-2-2 指定控制器名稱為HomeController,並開啟HomeController
//06-2-3 using _06ViewModel.Models及using _06ViewModel.ViewModel
//06-2-4 於HomeController建立DB物件
//06-2-5 編輯ActionResult Index()的內容
//06-2-6 於HomeController建立GET與POST的Create Action


//06-3 建立各個View
//06-3-1 在public ActionResult Index()上按右鍵,新增檢視,建立Index View
//06-3-2 進行下列設定:
//       View name:Index
//       Template:Empty (Without model)
//       勾選Use a layout pages
//       按下Add
//06-3-3 在最上方加上@model _06ViewModel.ViewModel.CVMDepEmp

//06-3-5 在Index View中撰寫顯示畫面
//06-3-6 執行及測試
//06-3-7 在public ActionResult Create()上按右鍵,新增檢視,建立CreateView
//06-3-8 進行下列設定:
//       View name:Create
//       Template:Empty (Without model)
//       勾選Use a layout pages
//       按下Add
//06-3-9 加入給下拉選單用的資料
//06-3-10 將英文字改為中文字
//06-3-11 建立員工資料新增表單
//06-3-12 執行及測試

#接著刪除功能刪除後返回原來頁面

在view 寫 razor 用 actionlink 傳送刪除的物件的id與指令

因為刪除沒有刪除自己的特別頁面所以可以從view寫回control

等等看程式碼

###/05ViewModel/Views/Home/Index.cshtml

@*//06-3-3 在最上方加上@model _06ViewModel.ViewModel.CVMDepEmp*@
@model _05ViewModel.ViewModel.CVM

@{
    ViewBag.Title = "部門員工列表";
}

<h2>Index</h2>

@*//06-3-5 在Index View中撰寫顯示畫面*@
<div class="row">
    <div class="col-xs-3">
        @foreach (var item in Model.department)
        {
            <p>
                @Html.ActionLink(item.fDepName, "Index", new { id = item.fDepId })

            </p>
        }
    </div>
    <div class="col-xs-9">
        <table class="table">
            <tr>
                <th>工號</th>
                <th>姓名</th>
                <th>電話</th>
                <th>部門</th>
                <th>刪除</th>
            </tr>
            @foreach (var item in Model.employee)
            {
            <tr>
                <td>@item.fEmpId</td>
                <td>@item.fName</td>
                <td>@item.fPhone</td>
                <td>@item.fDepId</td>
                <td>
                    @Html.ActionLink("刪除","Delete",new { id=item.fEmpId},new { @class="btn btn-danger", onclick="return confirm('確定刪除?')"})
                </td>
            </tr>
            }

        </table>
    </div>
</div>

###05ViewModel/Controllers/HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
//06-2-3 using _06ViewModel.Models及using _06ViewModel.ViewModel
using _05ViewModel.Models;
using _05ViewModel.ViewModel;

namespace _05ViewModel.Controllers
{
    public class HomeController : Controller
    {
        //06-2-4 於HomeController建立DB物件
        dbEmployeeEntities db = new dbEmployeeEntities();

        // GET: Home
        //06-2-5 編輯ActionResult Index()的內容
        public ActionResult Index(int id=1)
        {
            CVM cvm = new CVM()
            {
                department = db.tDepartment.ToList(),
                employee = db.tEmployee.Where(m => m.fDepId == id).ToList()
            };


            return View(cvm);
        }

        //06-2-6 於HomeController建立GET與POST的Create Action
        public ActionResult Create()
        {

            return View(db.tDepartment.ToList());
        }
      
        [HttpPost]
        public ActionResult Create(tEmployee emp)
        {
            db.tEmployee.Add(emp);
            db.SaveChanges();


            return RedirectToAction("Index",new { id=emp.fDepId});
        }

        public ActionResult Delete(string id)
        {
            var emp = db.tEmployee.Where(m=>m.fEmpId==id).FirstOrDefault();

            db.tEmployee.Remove(emp);
            db.SaveChanges();


            return RedirectToAction("Index", new { id = emp.fDepId });
        }

    }
}

等老師最後程式碼與步驟再一起貼 ???

#CRUD 接著做一次 MVC 新增修改刪除查詢 ( 細節觀念也會交代

CRUD 新增修改刪除查詢正統不講

create, read, update, and delete

Create, read, update and deletewww.google.com

修改跟新增其實很像

新增model 名稱其實可以跟資料庫不一樣是脫鉤的可以自取

Db first 有db 在建立model

建立好後建置編譯

接著進入 model 確定資料內容

首先 displayname ( 可以在view改或在model就做好

且要先 using componentmodel 這個 packge class

以MVC宗旨 ( 商業邏輯必須寫在 Model ( 如何寫呢?

應用程式端或 model (擴充功能跟類別很像castan) (下個單元會講 ?

Model好後右建新增control

Using model近來使用

使用模組物件建立一個資料庫物件

利用return 將資料 db.tproduct.tolist() 到 index 這個 action

然後產生view用範本

model => model.fName

Lambda

###model

###/06CRUD/Models/tProduct.cs

//------------------------------------------------------------------------------
// <auto-generated>
//     這個程式碼是由範本產生。
//
//     對這個檔案進行手動變更可能導致您的應用程式產生未預期的行為。
//     如果重新產生程式碼，將會覆寫對這個檔案的手動變更。
// </auto-generated>
//------------------------------------------------------------------------------

namespace _06CRUD.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    
    public partial class tProduct
    {
        [DisplayName("產品編號")]
        public string fId { get; set; }
        [DisplayName("品名")]
        public string fName { get; set; }
        [DisplayName("單價")]
        public Nullable<decimal> fPrice { get; set; }
        [DisplayName("圖示")]
        public string fImg { get; set; }
    }
}

###06CRUD/Controllers/HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using _06CRUD.Models;

namespace _06CRUD.Controllers
{
    public class HomeController : Controller
    {
        dbProductEntities db = new dbProductEntities();
        // GET: Home
        public ActionResult Index()
        {
            return View(db.tProduct.ToList());
        }
    }
}

###/06CRUD/Views/Home/Index.cshtml

@model IEnumerable<_06CRUD.Models.tProduct>

@{
    ViewBag.Title = "產品列表";
}

<h2>產品列表</h2>

<p>
    @Html.ActionLink("新增商品", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.fName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.fPrice)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.fImg)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.fName)
        </td>
        <td>
          
            @Html.DisplayFor(modelItem => item.fPrice)
        </td>
        <td>
            @*@Html.DisplayFor(modelItem => item.fImg)*@
            <img src="~/images/@item.fImg" width="120" />
        </td>
        <td>
            @Html.ActionLink("修改", "Edit", new { id=item.fId }) |
            @*@Html.ActionLink("Details", "Details", new { id=item.fId }) |*@
            @Html.ActionLink("刪除", "Delete", new { id=item.fId })
        </td>
    </tr>
}

</table>

#接著講刪除但還是用之前的做法 ( 出現確認視窗刪除 ( 刪除資料檔案與資料庫欄位資料

正式的刪除頁面進行刪除

刪除除了資料庫內的檔案路徑要刪掉外

還要刪除實體檔案資料

首先在action 建立 delete

建造一個變數塞查詢式

接著把路徑資料抓出來

System.IO ( 只要跟實際檔案上傳下載刪除有關的類別

方法為 Delete

Server.MapPath (邏輯路徑跟實體路徑轉換)

刪除檔案後

然後將欄位資料位置給刪除

儲存

傳送至index

回到view用actionlink 傳送確認刪除的alert

###/06CRUD/Controllers/HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using _06CRUD.Models;

namespace _06CRUD.Controllers
{
    public class HomeController : Controller
    {
        dbProductEntities db = new dbProductEntities();
        // GET: Home
        public ActionResult Index()
        {
            return View(db.tProduct.ToList());
        }


        public ActionResult Delete(string id)
        {
            var products = db.tProduct.Where(m => m.fId == id).FirstOrDefault();
            string fileName = products.fImg;
            System.IO.File.Delete(Server.MapPath("~/images/"+fileName));
            db.tProduct.Remove(products);
            db.SaveChanges();

            return RedirectToAction("Index");
        }
    }
}

###/06CRUD/Views/Home/Index.cshtml

@model IEnumerable<_06CRUD.Models.tProduct>

@{
    ViewBag.Title = "產品列表";
}

<h2>產品列表</h2>

<p>
    @Html.ActionLink("新增商品", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.fName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.fPrice)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.fImg)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.fName)
        </td>
        <td>
          
            @Html.DisplayFor(modelItem => item.fPrice)
        </td>
        <td>
            @*@Html.DisplayFor(modelItem => item.fImg)*@
            <img src="~/images/@item.fImg" width="120" />
        </td>
        <td>
            @Html.ActionLink("修改", "Edit", new { id=item.fId }) |
            @*@Html.ActionLink("Details", "Details", new { id=item.fId }) |*@
            @Html.ActionLink("刪除", "Delete", new { id=item.fId },new { onclick="return confirm('確定刪除??')"})
        </td>
    </tr>
}

</table>

#CRUD剩下CU 下次繼續 ( 重點為空值??

Previous2019/0514/Java_靜態類別+繼承特性 Next2019/0516/BS form&驗證+JQ驗證 & MVC_CRUD(CU)

Last updated 6 years ago

Was this helpful?

#RWD Utility

##Utility顏色

###Keyword 文字

###Keyword 背景色

###Keyword 複習

###RWD/11Utility_Color.html

##Utility格式

###RWD/12Utility_Text.html

##格式對齊

###justify自動切齊 ( 字跟字寬度自動平均

###badge 徽章

###以斷點做文字對齊 sm md lg xs(太小不用寫)

###truncate 隱藏多於的資料 (( sql 看過 則為刪除資料不留log

###相對

###絕對

### Overflow = break ? 卷軸

### /RWD/13Utility_Text2.html

##邊框 border

### /RWD/14Utility_Borders.html

## Utility總結 比較牽涉到版型設計頂多牽涉到UX跟功能較無關

##BS 對表格影響

#改核心不要直接改

### 15Table.html

##Card ( 有階層性

###階層性

### /RWD/16Card.html

###Card內容

###List ul li

### /RWD/16Card.html ( 同一個檔案下半段

##卡片系統搭配其他系統只要扛拜出來即可

##補充

### /RWD/16Card.html ( 補充扛拜系統程式碼

###/RWD/16Card.html

#MVC

那怎讓兩個Model配同一個view??

2種方式

ViewModel ( 為了一個view讀兩個model特地去做一個新的model出來 跟MVVM是兩碼子是

patidView

ViewModel

###資料庫

###model

###/05ViewModel/Models/tDepartment.cs

### 05ViewModel/Models/tEmployee.cs

###ViewModel

###05ViewModel/ViewModel/CVM.cs

###/05ViewModel/Controllers/HomeController.cs

###/05ViewModel/Views/Home/Index.cshtml

###老師步驟

接著做新增功能

Keyword

###/05ViewModel/Controllers/HomeController.cs

###05ViewModel/Views/Home/Create.cshtml

###老師步驟

#接著刪除功能 刪除後返回原來頁面

###/05ViewModel/Views/Home/Index.cshtml

###05ViewModel/Controllers/HomeController.cs

#CRUD 接著做一次 MVC 新增修改刪除查詢 ( 細節觀念 也會交代

修改跟新增其實很像

###model

###/06CRUD/Models/tProduct.cs

###06CRUD/Controllers/HomeController.cs

###/06CRUD/Views/Home/Index.cshtml

#接著講刪除但還是用之前的做法 ( 出現確認視窗刪除 ( 刪除資料檔案與資料庫欄位資料

###/06CRUD/Controllers/HomeController.cs

###/06CRUD/Views/Home/Index.cshtml

#CRUD剩下CU 下次繼續 ( 重點為空值??

###truncate 隱藏多於的資料 (( sql 看過則為刪除資料不留log

## Utility總結比較牽涉到版型設計頂多牽涉到UX跟功能較無關

ViewModel ( 為了一個view讀兩個model特地去做一個新的model出來跟MVVM是兩碼子是

#接著刪除功能刪除後返回原來頁面

#CRUD 接著做一次 MVC 新增修改刪除查詢 ( 細節觀念也會交代