MVC新增订单cshtml页面

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