From 表单

103 阅读 0 评论 68 点赞

我是靠谱客的博主纯情冬瓜，这篇文章主要介绍From 表单，现在分享给大家，希望可以做个参考。

From表单可以简单的比喻成一个简历、表格、单据之类的文档。From表单里面的内容通常由一个from表格包裹着(),在from表单里面可以放入输入框、下拉框、表格等等各种各样的数据,from标签中的action内通常是放置提交表单时请求的路径
例如：

复制代码

<form class="form-horizontal
row" role="form" id="formUpdateExaminee" action="" method="post">
<div class="col-12 col-lg-3 text-center" style="height:286px">
<img src="" alt="" width="150" height="180" id="UpImgStudentPicture" class="border border-primary" onclick="chooseImageFile('UptudentPicture')" />
<input type="file" name="fileCommodityImage" id="UptudentPicture" hidden accept="image/*" onchange="showImgToView('UptudentPicture')" />
<p>双击选择图片</p>是否特价：
<select class="custom-select" style="width:100px;" id="UpToSpecli" name="ToSpecli">
<option value="false" selected>否</option>
<option value="true">是</option>
</select>
</div>
<div class="form-group form-row mt-3">
<label class="col-form-label col-lg-3">销售折扣:</label>
<div class="col-lg-9">
<input type="text" class="form-control" id="UpDiscount" name="Discount" value="1.0" onKeyUp="value = value.replace(/[^0-9.]/g, '')" />
</div>
</div>
<button type="button" class="layui-btn layui-btn-sm" style="background: #1E9FFF;" onclick="InsertCom()">保存<i class="layui-icon"></i>
</button>
</form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form class="form-horizontal
row" role="form" id="formUpdateExaminee" action="" method="post">
<div class="col-12 col-lg-3 text-center" style="height:286px">
<img src="" alt="" width="150" height="180" id="UpImgStudentPicture" class="border border-primary" onclick="chooseImageFile('UptudentPicture')" />
<input type="file" name="fileCommodityImage" id="UptudentPicture" hidden accept="image/*" onchange="showImgToView('UptudentPicture')" />
<p>双击选择图片</p>是否特价：
<select class="custom-select" style="width:100px;" id="UpToSpecli" name="ToSpecli">
<option value="false" selected>否</option>
<option value="true">是</option>
</select>
</div>
<div class="form-group form-row mt-3">
<label class="col-form-label col-lg-3">销售折扣:</label>
<div class="col-lg-9">
<input type="text" class="form-control" id="UpDiscount" name="Discount" value="1.0" onKeyUp="value = value.replace(/[^0-9.]/g, '')" />
</div>
</div>
<button type="button" class="layui-btn layui-btn-sm" style="background: #1E9FFF;" onclick="InsertCom()">保存<i class="layui-icon">&#xe605;</i>
</button>
</form>

如上所见：
在from表单内可以根据个人需要放入对应的内容，就像是一份空白的文档，可以往添加任意的内容，因为这里我用的是bootstrap4的框架，所以里面的输入框等等的Html内容带有比较多的bootstrap4的样式。
既然from表单有收集数据的功能，那么在收集完数据之后当然也有提交数据的功能，提交表单的时候就会把from表单里面的内容也就是我们在设置完from表单之后往里面添加的数据提交到控制器了！

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
$("#formUpdateExaminee").ajaxSubmit(function (returnJson) {
layer.close(layerIndex);
if (returnJson.State == true) {
$("#modUpdateExaminee").modal('hide');
tabTitles.reload({});
layer.alert(returnJson.Text, { icon: 1, title: "提示" });
}
else {
layer.alert(returnJson.Text, { icon: 0, title: "提示" });
}
});

在添加表单之前要注意在from标签上的action属性中填写上相应的添加表单的路径，例(action="/DayWorkManagement/PurchaseStocks/UpdateCommodits"),确定路径填写完整之后，用一个ajaxSubmit就可以把表单里面的内容提交到对应的路径的地方去了，至于function里面的是提交完成表单之后的操作！

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
Public ActionResult UpdateCommodits(B_Commodits dbCommodits, R_CommoDeRelut dbCommDeRe, HttpPostedFileBase fileCommodityImage，bool ToSpecli, string CommCodinges)
{
string[] Imp = Imprison.Split(';');
string[] ToFalse = TableTofalse.Split(';');
var CommNum = myModels.B_Commodits.Where(S => S.CommID == dbCommodits.CommID).Select(S => S.FundsNum).ToList();
if (CommNum.Count()==0)
{Num = dbCommodits.FundsNum.Trim();}
else
{Num = CommNum[0].Trim();}
var listCommodits = myModels.B_Commodits.Where(S => S.FundsNum.Trim() == Num).Select(S => S.CommID).ToList();
var FuNumber = dbCommodits.FundsNum.Trim();
}

提交了之后自然就是接收了，注意在用对象列表来接收数据时，里面的name值要与HTML标签在的name值对应，否则接收不到值，如果是用字段来接收就简单了，直接把标签中的name复制过来就行了，当然from除了提交到控制器的方法之外，还可以提交到页面当中，在页面中去接收from表单的值！