asp.net MVC下 使用jquery进行异步提交的两种方式

由于mvc架构和传统的.net程序有所不同，所以进行异步提交的时候，就和过去的方法参数有所差别，下面我就介绍下两种常用的提交方式在MVC下如何调用。

1.直接提交数据到Action

假设一个发布BLOG的页面的回复功能，有一个ID为'ReInfo'的div负责显示回复的消息。

 点击提交按钮后，qj的post方法将数据传递到/Blog/BlogRe这个Action，参数是ReInfo和BlogId

然后，执行post的第三个匿名方法将刚回复的数据添加到ReInfo中

代码如下：

<div id='ReInfo'></div>

<fckeditorv2:fckeditor id="FCKeditor1" runat="server" Width="580px" EnableXHTML="true" EnableSourceXHTML="true" basepath="~/FCKeditor/" height="500px"></fckeditorv2:fckeditor>
    <script type="text/javascript">
        function getEditorHTMLContents() {

            var oEditor = FCKeditorAPI.GetInstance("FCKeditor1");
            return (oEditor.GetXHTML(true));
        }
        function UpdateMsg() {
            var Con = getEditorHTMLContents();
            $.post("/Blog/BlogRe", { ReInfo:encodeURI(getEditorHTMLContents()) , BlogId: "<%=b.BlogId %>" }, function(data) {
                var $p = $("<div></div>");
                $p.append("<div>" + getEditorHTMLContents() + "</div>");
                $p.append("<br><b>" + data + "</b>");
                $("#ReInfo").append($p);
            });
        }
    </script>
    <input type=button value="提交" onclick="UpdateMsg()">

 

2.异步提交表单

直接用表单的submit进行处理，见注释

<script type="text/javascript" language="javascript">
    $(document).ready(function()
        {
            $('#f1').submit(function(){
                jQuery.ajax({
                    url: "/Msg/MsgCtrlNew",   // 提交的Action
                    data: $('#f1').serialize(), // 从表单中获取数据
                    type: "POST",                   // 设置请求类型为"POST"，默认为"GET"
                    beforeSend: function()          // 设置表单提交前方法
                    {
                       
                    },
                    error: function(request) {      // 设置表单提交出错
                    alert("表单提交出错，请稍候再试" + request);
                    },
                    success: function(data) {
                        // 设置表单提交完成使用方法
                    }
                });
                return false;
            });
        });

</script>

 

    <form id=f1 action=Msg/MsgCtrl method=post>

        <fieldset>
            <legend>Fields</legend>
           
          
           

           
            <div class="editor-label">
                <%= Html.LabelFor(model => model.ReceiveUser) %>
            </div>
            <div class="editor-field">
                <%= Html.TextBoxFor(model => model.ReceiveUser) %>
                <%= Html.ValidationMessageFor(model => model.ReceiveUser) %>
            </div>
           
           
            <div class="editor-label">
                <%= Html.LabelFor(model => model.MsgConnent) %>
            </div>
            <div class="editor-field">
                <%= Html.TextBoxFor(model => model.MsgConnent) %>
                <%= Html.ValidationMessageFor(model => model.MsgConnent) %>
            </div>
           
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>

    </form>