ASP.NET MVC 的表单提交

asp.net mvc 开发过程中，我们经常要提交表单数据到后台进行处理。今天就把常见的开发过程中用到的一些数据（表单）提交的方式做一个总结，方便自己今后查阅，如果对大家有益，那就更好了，总结得不好请大家给我留言指正。

首先我们说说不使用asp.net mvc 的一些特性，也不使用jquery的ajax做最简单的表单提交。这种表单提交只使用了html标签，使用html表单form的action指向需要接收参数的controllrt里面的action。这时候获取表单里面的参数是通过request.form的形式来获取的。request请求封装了form表单的具体细节。这个例子的代码如下：

1.控制器

public actionresult regist()
{
     return view();
}

[httppost]
public string regist(string name)
{
     string username = request.form["username"];
     string password = request.form["password"];
     return "welcome:" + name;
}

2.regist.ashtml

@{
    layout = null;
}





    regist
    <script src="../../scripts/jquery-1.4.4.js" type="text/javascript"></script>
    <script type="text/javascript">
        function submit() {
            $("#frmregist").submit();
        }
    </script>


    

      
        
            
                user regist
            
            
                username:
                
            
            
                password:
                
            
            
                
            
        
       
    

这里面我们仅仅使用了jquery来获取form对象而已，通过document.getelementbyid也可以办到，本质上来说还是可以不依赖jquery的。

可以看到前端输入的值从后台的方法可以获取到，再进行处理就很方便了。这是最原始的表单提交方式，缺点在于如果字段很多的话，需要对每一个字段进行获取。

然后我们可以使用asp.net mvc 支持的模型绑定的form进行提交，模型绑定之后，我们就可以提交一个对象过去，这样就方便多了。模型绑定的控制器如下：

public actionresult regist2()
{
     return view();
}

[httppost]
public actionresult regist2(user user)
{
     return view();
}

注意，控制器这时候跟模型没关系，绑定模型的页面直接和模型打交道。

@model mymvcapp.models.user

@{
    layout = null;
}

@using (html.beginform("regist2", "home", formmethod.post))
{
    
name:@html.textboxfor(x => x.name)
    
email:@html.textboxfor(x => x.email)
    
phone:@html.textboxfor(x => x.phone)
    
gender:@html.dropdownlistfor(x=>x.gender,new []{ 
             new selectlistitem{ text = "boy", value = "male", selected = true},
             new selectlistitem{ text = "girl", value = "female", selected = false }},"--please select gender--")
    

}

这里的模型绑定之后，输入框等跟字段就直接绑定了。运行效果如下：

接下来，我们再讨论一种以ajax形式提交的表单，就是ajaxform，这种form是 html的一种扩展标签。ajax提交不需要刷新的特性增强了用户体验，不失为一种好方法。

控制器代码如下：

public actionresult regist3()
{
     return view();
}

[httppost]
public string regist3(user user)
{
     return "welcome:" + user.name;
}

页面的代码如下：

@model mymvcapp.models.user
@{
    layout = null;
}
<script src="../../scripts/jquery-1.4.4.js" type="text/javascript"></script>
<script src="../../scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script type="text/javascript">
    function onsuccess(responsedata) {
        $("#result").html = responsedata;
    }
</script>
@using (ajax.beginform("regist3", "home", null, new ajaxoptions { httpmethod = "post", updatetargetid = "result", onsuccess = "onsuccess" }))
{
    
name:@html.textboxfor(x => x.name)
    
email:@html.textboxfor(x => x.email)
    
phone:@html.textboxfor(x => x.phone)
    

}

运行效果就是通过ajax请求，返回一个欢迎用户的字符串。初始界面如下：

submit之后的界面：

最后介绍通过ajax提交的表单形式，这种形式其实不局限于表单，通常做数据的提交都可以做，这里为了演示，使用了一个表单来做例子。控制器代码如下：

public actionresult regist4()
{
    return view();
}

[httppost]
public string regist4(string username,string email)
{
    return "hello: [" + username + "] your eamil is : [" + email + "]";
}

页面代码如下：

@{
    layout = null;
}

<script src="../../scripts/jquery-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#btnsubmit").click(function () {
            $.ajax({
                url: "/home/regist4",
                type: "post",
                datatype: "json",
                data: { username: $("#txtname").val(), email: $("#txtemail").val() },
                success: function (data) {
                    //alert(data);
                    $("#result").html("success");
                    $("#result").css("color", "red");
                }
            });
        });
    });
</script>

    
        user regis demo
    
    
        name:
        
    
    
        email:
        
    
    
        
        
    

jquery ajax call result will display here...

运行结果就是通过ajax提交之后，返回结果，更新p里面的内容。

这几种形式的提交都是支持的，希望对大家有所帮助的。