使用工具 :Visual Studio2015
首先我们要写一个表单;
下面的表单是用bootstrap插件写的；
<div class="container mt-5">
<form action="/mian/nrng" method="post" id="from">
<div class="form-group form-row">
<label class="col-form-label col-3 text-center">姓名</label>
<input class="form-control col-9" type="text" name="name" id="fkwng" value="" />
<label class="col-form-label col-3 text-center">电话号码</label>
<input type="text" name="name" value="" class="form-control col-9" id="urfhwef"/>
</div>
<div class="form-group form-row">
<label class="col-form-label col-3 text-center">性别</label>
<select class="form-control col-9" name="sex" id="ejfn">
<option value="0">请选择</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
</div>
<div class="form-group form-row">
<label class="col-form-label col-3 text-center">地址</label>
<textarea class="form-control col-9"name="address" id="ewfn"></textarea>
</div>
<div class="form-group form-row">
<button type="submit" class="btn btn-outline-primary offset-3 mr-2">表单提交</button>
<button type="button" class="btn btn-outline-success mr-2" onclick="getData()">GET提交</button>
<button type="button" class="btn btn-outline-success mr-2" onclick="postData()">POST提交</button>
<button type="reset" class="btn btn-outline-danger ">Reset重置</button>
</div>
</form>
</div>
这是页面效果;
在进行提交之前先创建一个接收表单数据的方法 下面这个方法是可以接收get提交的数据也可以提交post提交的数据;
public ActionResult nrng(string name,string sex,string address,string ding)
{
//获取表单数据有四种方式(可以接收post与get提交的数据)
//1.通过形参的方式接收表单提交的数据;
string mr = name + sex + address+ding;
return Content("名字"+name+"性别"+sex+"地址"+address+"电话号码"+ding);
}
这下面是用js写的:首先应该获取表单的内容:
获取对应的id值然后使用value方法;获取数据;
如;获取姓名
var name = document.getElementById("fkwng").value;
然后将刚刚获取的数据使用;form自带的;action方法和method方法;action是它提交的路径定义了当表单被提交时数据被送往何处;method方法是提交的方式提交的方式有两种一种是get还有一种是post;
这两种方法 get-从指定的资源请求数据 post-向指定的资源提交要处理的数据 get基本上用于从服务器获取数据,不过post方法不会缓存数据，并且常用于连同请求一起发送数据.
这下面的是js部分;
<script>
function getData() {
var name = document.getElementById("fkwng").value;
var sex = document.getElementById("ejfn").value;
var add = document.getElementById("ewfn").value;
var ding = document.getElementById("urfhwef").value;
if (name != ""&& sex != ""&& add != ""&& ding!="") {
var form = document.getElementById("from");
form.action = "/mian/nrng";
form.method = "get";
form.submit();
}else{
alert("请输入正确的值");
}
}
function postData() {
var name = $("#fkwng").val;
var sex = $("#ejfn").val;
var add = $("#ewfn").val;
if (name!= "" && sex!= "" && add!= "") {
$("#from").attr({ "action": "/mian/getr", "method": "get" });
$("#from").submit();
}else{
alert("输入的值不能为空");
}
}
</script>
点击提交按钮时form中的数据将会被提交到控制台()
控制台有四种接收方式:
前面以列举了一种方式还有三种在下面一一列举;
2.通过FormCollection类类型 来接收数据;只能接收post提交的数据;
public ActionResult getDat(FormCollection mer)
{
string name = mer["name"];
string sex = mer["sex"];
string address = mer["address"];
return Content("姓名"+name+ "<br>" + "性别"+sex+ "<br>" +"地址" +address);
}
- 通过Request.Form[“name的属性值”]获取表单数据; 只能接收post提交的数据
public ActionResult getmer()
{
string name = Request.Form["name"];
string sex = Request.Form["sex"];
string address = Request.Form["address"];
return Content(name+sex+address);
}
public ActionResult getr(mer mer)
{
string name = mer.name;
string sex = mer.sex;
string add = mer.address;
return Content(name+sex+add);
}
public class mer//这里的mer是类的名字;
{
//public string name //成员名称;
public string name { get; set; }//属性
public string sex { get; set; }
public string address { get; set; }
}
