asp.net mvc中的ajax的简单应用

最新推荐文章于 2025-02-22 14:38:27 发布

我的___爱

最新推荐文章于 2025-02-22 14:38:27 发布

阅读量517

点赞数

分类专栏： asp.net mvc

本文链接：https://blog.youkuaiyun.com/jiazhongkai521/article/details/30217195

版权

asp.net mvc 专栏收录该内容

5 篇文章

订阅专栏

在mvc中，我们可以使用ajax来获取后台的内容，提高用户的体验。通常我们会使用jquery里面的ajax，但是其实asp.net mvc中已经集成了ajax，先让我们做一个简单的Demo，这个Demo实现的功能就是从后台获取当前的系统时间具体实现如下：

1）在index.cshtml页面里面添加jquery.js 和 jquery.unobtrusive-ajax.js文件的引用,然后再页面上添加一个id为wenbin的div，最后我们还需要添加小段js代码，你使用jquery 写也好，用原生的js写也好，都是可以的。这里我用的是原生的js，具体的代码如下：

<script type="text/javascript">
    function duying()
    {
        alert('成功！');
    }
</script>

2)在webconfig中要启用UnobtrusiveJavaScript 使用。启用方法是在appsetting中把UnobtrusiveJavaScriptEnabled，设置成true。如下：<add key="UnobtrusiveJavaScriptEnabled" value="true" />

3）在HomeCtroller中添加一个GetTime()的action,具体的代码如下：

     [HttpGet]
     public ActionResult GetTime()
     {
         return Content(DateTime.Now.ToShortDateString());
     }

可以看到我们上面有一个HttpGet，这个就表示这个action只响应get动作，而不会响应post动作。

4）接下来我们在index页面添加一个超链，具体的代码如下：

@Ajax.ActionLink("获取时间", "GetTime", new AjaxOptions { UpdateTargetId = "wenbin",HttpMethod="get",OnSuccess="duying"})

接下来我们直接来运行项目即可。可以看到点击“获取时间"这个文本的时候，会直接在页面id=”wenbin“的 div中显示当前时间，然后弹出一个成功的提示框，而且当前页面也没有刷新。

以上就是一个简单的ajax的例子，通过上面的例子我们来讲解一下asp.net mvc中的ajax，其实上面最重要的东西就是new AjaxOptions { UpdateTargetId = "wenbin",HttpMethod="get",OnSuccess="duying"})这段代码。下面我们就来详细的讲解一下 new ajaxoptions里面的参数，updatetargetid就是最终要显示结果的对象的id，httpmethod，就是我们操作这个方法的post还是get过去，这里我们的action里面添加的是[HttpGet]，所以我们这里也要跟gettime的操作方法一致，也要用get，如果改成post，那么gettime这个action是不会执行的；后面的onsuccess是表示假如结果成功返回之后执行的js方法名称，这里假如调用成功会调用duying这个js，即提示 ‘成功’,对于new AjaxOptions 这里的参数我只是简单的介绍一下，如果大家感兴趣可以看一下其他的参数。

下面顺带着讲解一下ajax的form提交，具体代码如下，跟上面的差不多，只不过其中的new ajaxoption是被挪到了beginform中了，代码如下：

//前台
<script type="text/javascript">
    function duying() {
        alert('成功！');
    }
</script>
<h2>Index</h2>

@using (Ajax.BeginForm("gettime",
new AjaxOptions
{
    UpdateTargetId = "wenbin",//需要显示内容的目标id。
    HttpMethod = "get",//跟后台的gettime的方法的动作一致。
    OnSuccess = "duying"//成功后需要操作的js方法名称。
}
))
{
    <input type="text" name="UserLogOnContainer" />
    <input type="submit" value="提交" />
    <div id="wenbin"></div>
}

//后台
  public ActionResult Index(string UserLogOnContainer)
        {
            ViewBag.jj = UserLogOnContainer;
            return View();
        }

        [HttpGet]
        public ActionResult GetTime()
        {
            return Content(DateTime.Now.ToShortDateString());
        }