MVC新增訂單cshtml頁面
阿新 • • 發佈：2017-05-16
sin oval colspan group 聯系人 nova ice java mar 
1 @model Lixise.HealthCloud.ServiceOrder.Models.ServiceOrderEdit 2 @using Lixise.HealthCloud.ServiceOrder.Utils 3 @{ 4 ViewBag.Title = "Create"; 5 Layout = "~/Views/Shared/_Layout.cshtml"; 6 } 7 8 <form class="form-horizontal" method="post"> 9 <div class="panel panel-defaultView Code"> 10 <div class="panel-heading font-bold navbar-collapse panel-fixed clearfix"> 11 <div class="panel-title pull-left"> 12 <span><i class="icon icon-layers"></i> 新增訂單</span> 13 </div> 14 <div class="pull-right"> 15 <button type="submit" class="btn btn-primary">保存</button> 16 </div> 17 </div> 18 <div class="panel-body"> 19 <div class="col-sm-8"> 20 <div class="panel panel-default"> 21 <div class="panel-heading font-bold" name="moduleGrop">客戶信息</div> 22 <div class="panel-body"> 23 <div class="form-group"> 24 <label class="col-sm-2 control-label">公司名稱<span style="color:red;">*</span></label> 25 <div class="col-sm-6"> 26 <input type="text" class="form-control" id="txtCompanyName" name="txtCompanyName" placeholder="公司名稱" required="required"> 27 </div> 28 </div> 29 <div class="line line-dashed b-b line-lg pull-in"></div> 30 <div class="form-group"> 31 <label class="col-sm-2 control-label">聯系人<span style="color:red;">*</span></label> 32 <div class="col-sm-6"> 33 <input type="text" class="form-control" id="txtContact" name="txtContact" placeholder="聯系人" required="required"> 34 </div> 35 </div> 36 <div class="line line-dashed b-b line-lg pull-in"></div> 37 <div class="form-group"> 38 <label class="col-sm-2 control-label">聯系電話<span style="color:red;">*</span></label> 39 <div class="col-sm-6"> 40 <input type="text" class="form-control" id="txtPhone" name="txtPhone" placeholder="聯系電話" onkeyup="this.value=this.value.replace(/\D/g,‘‘)" 41 onafterpaste="this.value=this.value.replace(/\D/g,‘‘)" required="required"> 42 </div> 43 </div> 44 </div> 45 </div> 46 </div> 47 48 <div class="col-sm-8"> 49 <div class="panel panel-default"> 50 <div class="panel-heading font-bold" name="moduleGrop">收貨信息</div> 51 <div class="panel-body"> 52 <div class="form-group"> 53 <label class="col-sm-2 control-label">收貨人姓名<span style="color:red;">*</span></label> 54 <div class="col-sm-6"> 55 <input type="text" id="consigneeName" name="consigneeName" class="form-control" placeholder="收貨人姓名" required="required"> 56 </div> 57 </div> 58 <div class="line line-dashed b-b line-lg pull-in"></div> 59 60 <div class="form-group"> 61 <label class="col-sm-2 control-label">收貨人地址<span style="color:red;">*</span></label> 62 <div class="col-sm-6"> 63 <input type="text" id="consigneeAddress" name="consigneeAddress" class="form-control" placeholder="收貨人地址" required="required"> 64 </div> 65 </div> 66 <div class="line line-dashed b-b line-lg pull-in"></div> 67 68 <div class="form-group"> 69 <label class="col-sm-2 control-label">收貨人電話<span style="color:red;">*</span></label> 70 <div class="col-sm-6"> 71 <input type="text" id="consigneePhone" name="consigneePhone" class="form-control" placeholder="收貨人電話" onkeyup="this.value=this.value.replace(/\D/g,‘‘)" 72 onafterpaste="this.value=this.value.replace(/\D/g,‘‘)" required="required"> 73 </div> 74 </div> 75 <div class="line line-dashed b-b line-lg pull-in"></div> 76 77 <div class="form-group"> 78 <label class="col-sm-2 control-label">收貨人郵箱</label> 79 <div class="col-sm-6"> 80 <input type="email" id="consigneeMail" name="consigneeMail" class="form-control" placeholder="收貨人郵箱"> 81 </div> 82 </div> 83 <div class="line line-dashed b-b line-lg pull-in"></div> 84 85 <div class="form-group"> 86 <label class="col-sm-2 control-label">收貨人郵編</label> 87 <div class="col-sm-6"> 88 <input type="text" id="consigneePostcode" name="consigneePostcode" class="form-control" placeholder="收貨人郵編" onkeyup="this.value=this.value.replace(/\D/g,‘‘)" 89 onafterpaste="this.value=this.value.replace(/\D/g,‘‘)"> 90 </div> 91 </div> 92 </div> 93 </div> 94 </div> 95 96 <div class="col-sm-8"> 97 <div class="panel panel-default"> 98 <div class="panel-heading font-bold" name="moduleGrop" id="productModule">產品信息</div> 99 <div class="panel-body"> 100 <div class="form-group"> 101 <label class="col-sm-2 control-label">產品名稱<span style="color:red;">*</span></label> 102 <div class="col-sm-6"> 103 <input type="text" class="form-control" placeholder="產品名稱" id="productName" name="productName" group="productGrop" required="required"> 104 </div> 105 </div> 106 <div class="line line-dashed b-b line-lg pull-in"></div> 107 108 <div class="form-group"> 109 <label class="col-sm-2 control-label">數量<span style="color:red;">*</span></label> 110 <div class="col-sm-2"> 111 <input type="number" class="form-control" placeholder="0" id="productCount" name="productCount" value="0" onchange="javascript: Subtotal();" group="productGrop" required="required" /> 112 </div> 113 <label class="col-sm-1 control-label">價格<span style="color:red;">*</span></label> 114 <div class="col-sm-2"> 115 <input type="number" class="form-control" placeholder="0" id="productPrice" name="productPrice" value="0.00" onchange="javascript: Subtotal();" step="0.01" group="productGrop" required="required" /> 116 </div> 117 <label class="col-sm-1 control-label">金額</label> 118 <div class="col-sm-2"> 119 <input type="text" class="form-control" placeholder="0元" id="productSubtotal" name="productSubtotal" style="width:90px;" disabled="disabled" /> 120 </div> 121 <div class="col-sm-1"> 122 <button type="button" class="btn btn-primary" id="tabProduct" formnovalidate>添加</button> 123 </div> 124 </div> 125 <div class="line line-dashed b-b line-lg pull-in"></div> 126 127 <table class="col-sm-8" id="tabProduct"> 128 <tr id="tabHead"> 129 <th>產品名稱</th> 130 <th>產品數量</th> 131 <th>產品價格</th> 132 <th>金額</th> 133 </tr> 134 <tr> 135 <td>總額</td> 136 <td colspan="3"> 137 <span style="color:red;" id="productTotal">88</span> 138 </td> 139 </tr> 140 <tr> 141 <td>運費<span style="color:red;">*</span></td> 142 <td colspan="3"> 143 <input type="number" class="form-control" placeholder="0" style="border:0;" value="0.00" step="0.01" /> 144 </td> 145 </tr> 146 <tr> 147 <td>備註</td> 148 <td colspan="3"> 149 <textarea name="a" style="resize:none;border:0;" class="form-control" placeholder="請輸入備註"></textarea> 150 </td> 151 </tr> 152 </table> 153 </div> 154 </div> 155 </div> 156 157 </div> 158 </div> 159 </form> 160 @section HeadLibs{ 161 <style type="text/css"> 162 #productCount{ 163 width:88px; 164 } 165 #productPrice{ 166 width:88px; 167 } 168 #tabProduct { 169 width: 100%; 170 height: auto; 171 border: 1px solid #c0c0c0; 172 } 173 174 #tabProduct th, #tabProduct td { 175 border: 1px solid #c0c0c0; 176 width: 250px; 177 text-align: center; 178 } 179 180 #tabProduct th { 181 height: 35px; 182 background: #C1EAF7; 183 border: 0; 184 } 185 186 #tabProduct td { 187 height: 25px; 188 } 189 </style> 190 } 191 192 @section FootScripts{ 193 <script type="text/javascript"> 194 //驗證文本框輸入為數字 195 function chkNumber(eleText) { 196 var value = eleText.value; 197 var len = value.length; 198 for (vari = 0; i < len; i++) { 199 if (value.charAt(i) > "9" || value.charAt(i) < "0") { 200 alert("含有非數字字符"); 201 eleText.focus(); 202 break; 203 } 204 } 205 } 206 //驗證文本框輸入為郵箱 207 function chkEmail(eleEmail) { 208 209 } 210 //驗證文本框為必填項 211 function chkRequired(eleRequired) { 212 213 } 214 215 216 function Subtotal() { 217 var counts = $("[name=‘productCount‘]").val(); 218 var price = $("[name=‘productPrice‘]").val(); 219 //金額=產品數量*價格 220 $("[name=‘productSubtotal‘]").attr({ "value": (counts * price).toFixed(2), "color": "red" }); 221 } 222 $(function () { 223 var productTotal = 0; 224 $("#tabProduct").click(function () { 225 var productName = $("[name=‘productName‘]").val(); 226 var productCount = $("[name=‘productCount‘]").val(); 227 var productPrice = $("[name=‘productPrice‘]").val(); 228 var productSubtotal = $("[name=‘productSubtotal‘]").val(); 229 230 productTotal += parseFloat($("[name=‘productSubtotal‘]").val()); //計算總額 231 var template = htmlDecode($("#productTemplate").html()); 232 var obj = new Object(); 233 obj.productName = productName; 234 obj.productCount = productCount; 235 obj.productPrice = productPrice; 236 obj.productSubtotal = productSubtotal; 237 238 var trData = replaceTemplate(template, obj); 239 $("#tabHead").after(trData); //將數據插入到表頭那行之後 240 $("#productTotal").text(productTotal + "元"); 241 //$("[group=‘productGrop‘]").val(""); //使所有group=‘productGrop‘的文本框清空 242 }) 243 }) 244 245 //html解碼 246 var htmlDecode = function (text) { 247 var temp = document.createElement("div"); 248 temp.innerHTML = text; 249 var output = temp.innerText || temp.textContent; 250 temp = null; 251 return output; 252 } 253 254 //替換模版 255 var replaceTemplate = function (templateStr, data) { 256 return templateStr.replace(/\$\w+\$/gi, function (matchs) { 257 var returns = data[matchs.replace(/\$/g, "")]; 258 return (returns + "") == "undefined" ? "" : returns; 259 }); 260 }; 261 </script> 262 } 263 264 <textarea id="productTemplate" style="display:none;"> 265 <tr> 266 <td>$productName$</td> 267 <td>$productCount$</td> 268 <td>$productPrice$</td> 269 <td>$productSubtotal$</td> 270 </tr> 271 </textarea>
MVC新增訂單cshtml頁面