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>

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

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>

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表单的格式，一样可以实现异步提交数据的效果。