MVC 使用Jquery实现AJax

Myth丶恋晨 2022-09-17 07:28 227阅读 0赞

在上一篇介绍MVC中的Ajax实现方法的时候，曾经提到了除了使用Ajax HTML Helper方式来实现之外，Jquery也是实现Ajax的另外一种方案。

# 通过get方法实现AJax请求 #

View

Controller

public ActionResult GetTime()
    {
        return Content(DateTime.Now.ToString());
    }

# 通过post方法实现Form的Ajax提交 #

View

@model MvcAjax.Models.UserModel
    @{
        ViewBag.Title = "AjaxForm";
    }
    <script type="text/javascript">
        $(document).ready(function () {
            $("form[action$='SaveUser']").submit(function () {
                $.post($(this).attr("action"), $(this).serialize(), function (response) {
                    $("#myPnl").html(response);
                });
    
                return false;
            });
        });
        
    </script>
    <div id="myPnl" style="width: 300px; height: 30px; border: 1px dotted silver;">
    </div>
    @using (Html.BeginForm("SaveUser", "Home"))
    {
        <table>
            <tr>
                <td>
                    @Html.LabelFor(m => m.UserName)
                </td>
                <td>
                    @Html.TextBoxFor(m => m.UserName)
                </td>
            </tr>
            <tr>
                <td>
                    @Html.LabelFor(m => m.Email)
                </td>
                <td>
                    @Html.TextBoxFor(m => m.Email)
                </td>
            </tr>
            <tr>
                <td>
                    @Html.LabelFor(m => m.Desc)
                </td>
                <td>
                    @Html.TextBoxFor(m => m.Desc)
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="Submit" />
                </td>
            </tr>
        </table>
    }

Model

using System.ComponentModel.DataAnnotations;
    
    namespace MvcAjax.Models
    {
        public class UserModel
        {
            [Display(Name = "Username")]
            public string UserName { get; set; }
    
            [Display(Name = "Email")]
            public string Email { get; set; }
    
            [Display(Name = "Description")]
            public string Desc { get; set; }
        }
    }

Controller

[HttpPost]
    public ActionResult SaveUser(UserModel userModel)
    {
        //Save User Code Here
        //......
    
        return Content("Save Complete!");
    }

以上代码实现了Jquery POST提交数据的方法。

通过查看以上两种Jquery方式的Ajax实现方法，和之前[AJax HTML Helper][]比较可以发现其实Controller都是相同的。

采用Jquery方式提交数据的的主要实现方案就是通过Jquery的get或者post方法，发送请求到MVC的controller中，然后处理获取的response，更新到页面中。

注意点：

无论是使用超链接和form方式来提交请求，javascript的方法始终都有一个返回值false，用来防止超链接的跳转或者是form的实际提交。

这个地方就会出现一个疑问：

如果针对该页面禁止了Javascript脚本，那么该页面就是跳转或者是form就是提交，返回的ActionResult处理就会出现问题了。

这个时候就需要在Controller中判断该请求是否是Ajax请求，根据不同的情况返回不同的ActionResult：

[HttpPost]
    public ActionResult SaveUser(UserModel userModel)
    {
        //Save User Code Here
        //......
    
        if (Request.IsAjaxRequest())
            return Content("Save Complete!");
        else
            return View();
    }

[AJax HTML Helper]: http://www.cnblogs.com/celery94/archive/2011/01/17/1937396.html