1、第一种是利用表单提交,这种在MVC方法中比较简单。提交表单后台按照model直接放入对象中,对象可能是直接的model,也可能是viewmodel。
前台
<div id="Dlg-Edit" title="窗口" style="width: 500px; height: 300px;" buttons="#buttons">
<div style="padding: 20px 20px 40px 40px;">
<form method="post" id="Form1">
<table>
<tr>
<td style="text-align:right">
产品1类型:
</td>
<td>
<select id="TypeId" class="easyui-combogrid" name="ProductTypeID" style="width:200px;" class="easyui-validatebox" required="true">
</select>
</td>
</tr>
<tr>
<td style="text-align:right">
产品名称:
</td>
<td>
<input type="text" name="ProductName" id="ProductName" class="easyui-validatebox" required="true" style="width: 200px;" maxlength=25 /> (限制:50个字节)
</td>
</tr>
<tr>
<td style="text-align:right">
产品图片:
</td>
<td>
<input type="text" name="Image" id="Image" class="easyui-validatebox" required="true" style="width: 200px;" />
</td>
</tr>
<tr>
<td style="text-align:right">
市场价格:
</td>
<td>
<input type="text" name="MarketPrice" id="MarketPrice" class="easyui-validatebox" required="true" οnkeyup="value=value.replace(/[^\d]/g,'')" style="width: 200px;" />
(单位:元)</td>
</tr>
<tr>
<td style="text-align:right">
本店价格:
</td>
<td>
<input name="NewPrice" id="NewPrice" class="easyui-validatebox" required="true" style="width: 200px;" οnkeyup="value=value.replace(/[^\d]/g,'')" />
(单位:元)</td>
</tr>
<tr>
<td style="text-align:right">
是否上架:
</td>
<td>
<select id="Enable" class="easyui-combobox" name="Enable" style="width:200px;" class="easyui-validatebox" required="true" editable="false" panelHeight= "auto">
<option value="1">上架</option> @*true在网页中格式化了1*@
<option value="0">下架</option>
</select> (默认:上架)
</td>
</tr>
</table>
</form>
</div>
</div>
<div id="buttons">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" οnclick="saveData()">保存</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" οnclick="javascript:$('#Dlg-Edit').dialog('close')">关闭</a>
</div>
JS代码
function saveData() {
//alert(dlg_Edit_form.url);
dlg_Edit_form.form('submit', {
url: dlg_Edit_form.url,
onSubmit: function () {
return $(this).form('validate');
},
success: successCallback
});
}
2、第二种是通过ajax的方法把输入的值按参数的方法传递到服务器,有服务程序分解后存入数据库。
举例
前台
<div id="win_xg" class="easyui-window" title="管理处列表" closed="true" modal="true" collapsible="false" minimizable="false" maximizable="false" style="width: 400px; height: 330px; padding: 5px; background: #fafafa;">
<div class="easyui-layout" fit="true">
<div region="center" border="false" style="padding: 5px; background: #fff; border: 0px solid #ccc;">
<table width="300px" cellpadding="2" cellspacing="2">
<tr><td style="width:80px;">管理处 <span class="hightlight">*</span></td><td align="left"><select name="GARD_ID" id="GARD_ID" style="width:150px;">
<option value="">---请选择---</option>
<option value="01">11111</option>
<option value="02">22222</option>
<option value="03">33333</option>
<option value="06">44444</option>
<option value="08">55555</option>
<option value="09">66666</option>
</select></td></tr>
<tr><td style="width:80px;">楼宇编号 <span class="hightlight">*</span></td><td align="left"><input type="text" id="BUILD_ID" οnkeydοwn="if(event.keyCode==13){ submit_ajax();}" class="singleLines" /></td></tr>
<tr><td style="width:80px;">楼宇名称 <span class="hightlight">*</span></td><td align="left"><input type="text" id="BUILD_NAME" οnkeydοwn="if(event.keyCode==13){ submit_ajax();}" class="singleLines" /></td></tr>
<tr><td style="width:80px;">楼宇地址</td><td align="left"><input type="text" id="BUILD_ADDR" οnkeydοwn="if(event.keyCode==13){ submit_ajax();}" class="singleLines" /></td></tr>
<tr><td style="width:80px;">楼宇类型</td><td align="left"><input type="text" id="BUILD_LB" οnkeydοwn="if(event.keyCode==13){ submit_ajax();}" class="singleLines" /></td></tr>
<tr><td style="width:80px;">楼宇结构</td><td align="left"><input type="text" id="BUILD_STRUC" οnkeydοwn="if(event.keyCode==13){ submit_ajax();}" class="singleLines" /></td></tr>
<tr><td style="width:80px;">楼宇朝向</td><td align="left"><input type="text" id="BUILD_DIRECT" οnkeydοwn="if(event.keyCode==13){ submit_ajax();}" class="singleLines" /></td></tr>
<tr><td style="width:80px;">备注</td><td align="left"><input type="text" id="BUILD_NOTE" οnkeydοwn="if(event.keyCode==13){ submit_ajax();}" class="singleLines" /></td></tr>
</table>
</div>
<div region="south" border="false" style="text-align: right; height: 30px; line-height: 30px;">
<table width="100%">
<tr>
<td align="left"><div id="d_waitmsg"></div></td>
<td style="width:80px;"><a id="BN_submit" class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)" οnclick="submit_ajax();" >确定</a></td>
<td style="width:80px;"><a id="A1" class="easyui-linkbutton" icon="icon-cancel" href="javascript:void(0)" οnclick="$('#win_xg').window('close');" >关闭</a></td>
</tr>
</table>
</div>
</div>
</div>
JS代码
function submit_ajax() { if($("#GARD_ID").val() == "") { alert("请输入管理处编号!"); $("#GARD_ID").focus(); return; } if($("#BUILD_ID").val() == "") { alert("请输入楼宇编号!"); $("#BUILD_ID").focus(); return; } if($("#BUILD_NAME").val() == "") { alert("请输入楼宇名称!"); $("#BUILD_NAME").focus(); return; } if(confirm("确定保存数据吗?") == false) return; waitmsg(); $.blockUI({ message: "<br><h1>正在提交,请稍候...</h1><br>" }); var sPost = ""; if(optbz == "1") { sPost += "&mode=add"; } else { sPost += "&mode=xg"; $('#win_xg').window('close'); } sPost += "&GARD_ID=" + encodeURIComponent($("#GARD_ID").val()); sPost += "&BUILD_ID=" + encodeURIComponent($("#BUILD_ID").val()); sPost += "&BUILD_NAME=" + encodeURIComponent($("#BUILD_NAME").val()); sPost += "&BUILD_ADDR=" + encodeURIComponent($("#BUILD_ADDR").val()); sPost += "&BUILD_LB=" + encodeURIComponent($("#BUILD_LB").val()); sPost += "&BUILD_STRUC=" + encodeURIComponent($("#BUILD_STRUC").val()); sPost += "&BUILD_DIRECT=" + encodeURIComponent($("#BUILD_DIRECT").val()); sPost += "&BUILD_NOTE=" + encodeURIComponent($("#BUILD_NOTE").val()); var RandTime = new Date(); $.ajax({ url:"ajax_pages/ajax_building.aspx?RandTime=" + RandTime.toString() + sPost, type:"get", dataType:'xml', error:function(){ clrmsg(); }, complete:function(){ $.unblockUI(); clrmsg(); }, success:function(xml){ $(xml).find("result").each(function(){ //----------------------------------------------------------------------------------------------------- var respcode = $(this).find("respcode").text(); var respmsg = $(this).find("respmsg").text(); if(respcode == "0") { alert("提交失败!" + respmsg); return; } else { if(optbz == "1") { $("#BUILD_ID").val(""); $("#BUILD_NAME").val(""); } $("#grid").datagrid('reload'); $('#grid').datagrid('clearSelections'); } //----------------------------------------------------------------------------------------------------- }); } }); }