MVC学习系列-表单的异步提交

MVC中表单的提交有两种方式：jQuery方式、微软异步方式

下面分别就两种方法进行介绍：

1.jQuery方式

<pre name="code" class="html">        <script type="text/javascript">
            $(function () {
                $("#loadingId").css("display","none");
                $("#btnShow").click(function () {
                    $.get("Login/GetTime", {}, function (msg) {
                        alert(msg);
                    })
                })
            })
        </script>

上面演示的是异步方式中的get()异步，第一个参数指定url，第二个参数是传递的值，由于是get请求，没有数据的传递，第三个参数是get()请求执行成功过以后执行的函数（后台会返回数据msg）,比较简单。同样还可以使用Post()

        <script type="text/javascript">
            $(function () {
                $("#loadingId").css("display","none");
                $("#btnShow").click(function () {
                    $.post("Login/GetTime", {"value"："1"}, function (msg) {
                        alert(msg);
                    })
                })
            })
        </script>

同样还可以使用ajax方式，在此不累述

2.微软异步方式

        <% using (Ajax.BeginForm("GetTime","Login",new AjaxOptions()
               {
                   Confirm = "您确定要提交吗？",
                   HttpMethod = "Get",
                   UpdateTargetId = "result",//更新目标的Id，后台返回数据之后，数据交给哪个dom元素来展示
                   InsertionMode = InsertionMode.InsertAfter,
                   //OnSuccess = "afterGetDate",//设置成功之后的一个执行的方法
                   LoadingElementId = "loadingId"//设置一个加载后台数据的时候，显示一个dom元素的id
               }))
           { %>
            <input type="text" name="txtName"/>
            <input type="submit" value="提交"/>

        <% } %>

要使用微软的异步方法还必须引异步包进来

<script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>

微软的异步方式以Ajax.BeginForm() 开头，里面包含了几个参数。第一个参数是异步提交的Action；第二个是异步提交的控制器名字，两者共同组成了一个url；第三个是一些异步选项。

Confirm是用来在用户提交前弹出一个对话框

HttpMethod：异步提交数据的方式

<pre name="code" class="html">UpdateTargetId：更新<span style="font-family: Arial, Helvetica, sans-serif;">更新目标的Id，后台返回数据之后，数据交给哪个dom元素来展示</span>

<span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="html">InsertionMode：插入结点的方式。是一个枚举类型，有Replace、<span style="font-family: Arial, Helvetica, sans-serif;">InsertBefore 、</span><span style="font-family: Arial, Helvetica, sans-serif;">InsertAfter选项</span>

<span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="html">OnSuccess：设置成功之后的一个执行的方法

<pre name="code" class="html"><span style="font-family: Arial, Helvetica, sans-serif;">LoadingElementId：设置一个加载后台数据的时候，显示一个dom元素的id。我们可以通过这个给用户显示操作进度</span>

<span style="font-family: Arial, Helvetica, sans-serif;">
</span>

当我们点击运行时，微软异步方式代码发生了转变，转变成了下面的格式：

<form action="/Login/GetTime" data-ajax="true" data-ajax-confirm="您确定要提交吗？" data-ajax-loading="#loadingId" data-ajax-method="Get" data-ajax-mode="after" data-ajax-update="#result" id="form0" method="post">
            <input type="text" name="txtName">
            <input type="submit" value="提交">
        
        </form>

上面代码的转换就是通过我们上面引进的微软的异步包实现的。当然我们也完全可以不使用微软提供的异步提交数据的方式，直接使用上面的转换过的form表单的格式，一样可以实现异步提交数据的效果。