ASP.NET MVC中的AJAX

最新推荐文章于 2021-09-16 17:41:56 发布
最新推荐文章于 2021-09-16 17:41:56 发布
阅读量462 收藏 2
点赞数
分类专栏： ASP.NET MVC4|MVC5 文章标签： asp.net ajax mvc
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WuLex/article/details/79008510
版权

实体类

Destination.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace MyAJaxTest.Models
{
    [Table("Destinations")]
    public class Destination
    {
        [Key]
        public string City { get; set; }
        public string Country { get; set; }
        public int Id { get; set; }

        public Destination(string city, string country, int id = 0)
        {
            City = city;
            Country = country;
            Id = id;
        }
        public Destination() { }
    }
}

AjaxContext.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.Data;
using System.Data.Entity;

namespace MyAJaxTest.Models
{
    public class AjaxContext : DbContext
    {
        public virtual DbSet<Destination> Destinations { get; set; }
        public AjaxContext()
            : base("DefaultConnection")
        {

        }
    }
}

HomeController.cs

using MyAJaxTest.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MyAJaxTest.Controllers
{
    public class HomeController : Controller
    {
        private AjaxContext db = new AjaxContext();

        public ActionResult RandomDestinationList(int destinationCount)
        {
            var randomDestinationList = db.Destinations.OrderBy(r => Guid.NewGuid()).Take(destinationCount);
            return Json(randomDestinationList, JsonRequestBehavior.AllowGet);
        }

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult HelloAjax()
        {
            return Content("你好！来自控制器!", "text/plain");
        }

        public ActionResult Sum(int firstNumber, int secondNumber)
        {
            return Content((firstNumber + secondNumber).ToString(), "text/plain");
        }

        public ActionResult DisplayObject()
        {
            Destination destination = new Destination("东京", "日本", 1);
            return Json(destination, JsonRequestBehavior.AllowGet);
        }

        public ActionResult DisplayViewWithAjax()
        {
            return View();
        }
        [HttpPost]
        public ActionResult NewDestination(string newCity, string newCountry)
        {
            Destination newDestination = new Destination(newCity, newCountry);
            db.Destinations.Add(newDestination);
            db.SaveChanges();
            return Json(newDestination, JsonRequestBehavior.AllowGet);
        }
    }
}

Index.cshtml

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>AJAX Demo</title>

    <script src="~/Scripts/jquery-1.8.2.js"></script> 
    <script type="text/javascript">
    $(document).ready(function () {
        $('.hello-ajax').click(function () {
            $.ajax({
                type: 'GET',
                url: '@Url.Action("HelloAjax")',
                success: function (result) {
                    $('#result1').html(result);
                }
            });
        });
        $('.sum').click(function () {
            $.ajax({
                type: 'GET',
                data: { firstNumber: 1, secondNumber: 2 },
                url: '@Url.Action("Sum")',
                success: function (result) {
                    $('#result2').html(result);
                }
            });
        });
        $('.display-object').click(function () {
            $.ajax({
                type: 'GET',
                dataType: 'json',
                contentType: 'application/json',
                url: '@Url.Action("DisplayObject")',
                success: function (result) {
                    var resultString = 'Id: ' + result.Id + '<br>City: ' + result.City + '<br>Country: ' + result.Country;
                    $('#result3').html(resultString);
                }
            });
        });
        $('.display-view').click(function () {
            $.ajax({
                type: 'GET',
                dataType: 'html',
                url: '@Url.Action("DisplayViewWithAjax")',
                success: function (result) {
                    $('#result4').html(result);
                }
            });
        });

        $('.display-random-database-items').submit(function (event) {
            event.preventDefault();
            console.log($(this).serialize());
            $.ajax({
                url: '@Url.Action("RandomDestinationList")',
                type: 'GET',
                data: $(this).serialize(),
                dataType: 'json',
                success: function (result) {
                    var stringResult = '<ul>';
                    for (var i = 0; i < result.length; i++) {
                        stringResult += '<li>' + result[i].City + ', ' + result[i].Country + '</li>';
                    }
                    stringResult += '</ul>';
                    $('#result5').html(stringResult);
                }
            });
        });
        $('.new-destination').submit(function (event) {
            event.preventDefault();
            $.ajax({
                url: '@Url.Action("NewDestination")',
                type: 'POST',
                dataType: 'json',
                data: $(this).serialize(),
                success: function (result) {
                    var resultMessage = 'You\'ve added a new destination to the database!<br>Id: ' + result.Id + '<br>City: ' + result.City + '<br>Country: ' + result.Country;
                    $('#result6').html(resultMessage);
                }
            });
        });
    });
    </script>
</head>
<body>
    <h2>基础 AJAX</h2>
    <h4 class="hello-ajax">Hello AJAX</h4>
    <div id="result1"></div>
    <hr />
    <h2>使用参数</h2>
    <h4 class="sum">Sum</h4>
    <div id="result2"></div>
    <hr />
    <h2>使用JSON来显示一个对象</h2>
    <h4 class="display-object">显示对象</h4>
    <div id="result3"></div>
    <hr />
    <h2>显示一个视图</h2>
    <h4 class="display-view">显示视图</h4>
    <div id="result4"></div>
    <hr/>
    <h2>使用表单进行GET请求</h2>
    <form action="RandomDestinationList" class="display-random-database-items">
        <label for="destinationCount">你想看多少个目的地？</label>
        <input type="number" name="destinationCount" />
        <button type="submit">提交</button>
    </form>
    <div id="result5"></div>
    <h2>用POST请求提交数据</h2>
    <form action="NewDestination" class="new-destination">
        <label for="newCity">城市: </label>
        <input type="text" name="newCity" />
        <label for="newCountry">国家: </label>
        <input type="text" name="newCountry" />
        <button type="submit">提交</button>
    </form>
    <div id="result6"></div>
</body>
</html>

DisplayViewWithAjax.cshtml

<div id="display-view-with-ajax">
    <h2>欢迎使用DisplayViewWithAjax.cshtml</h2>
    <h4> 我们只是使用AJAX来显示一个视图！</h4>
</div>

运行结果如图:

这里写图片描述

.NET跨平台
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ASP.NET MVC AJAX表单提交实例
lucahan的博客
10-15 6590
1.首先，新建一个controller。 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MvcApplication1.Controllers { public class AJAXControl
浅析Asp.net MVC 中Ajax的使用
12-04
一、使用System.Web.Mvc.Ajax 　　1.1 System.Web.Mvc.Ajax.BeginForm 　　1.2 System.Web.Mvc.Ajax.ActionLink 二、手工打造自己的“非介入式”Javascript” 一、使用System.Web.Mvc.Ajax   1.1 System.Web.Mvc.Ajax.BeginForm      第一步：用Ajax.BeginForm创建Form @using (Ajax.BeginForm( new AjaxOptions() { HttpMethod = "post",
ASP.NET MVC中Ajax
dust__的博客
05-25 1365
一、AJAX简介 什么是Ajax Asynchronous JavaScript and XML (JavaScript执行异步网络请求) 如果仔细观察一个Form的提交，你就会发现，一旦用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因，就会得到一个404页面。 这就是Web的运作原理：一次HTTP请求对应一个页面。 如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接
ASP.NET MVC之Ajax如影随行
weixin_30399155的博客
07-04 348
一、Ajax的前世今生 我一直觉得google是一家牛逼的公司，为什么这样说呢？《舌尖上的中国》大家都看了，那些美食估计你是百看不厌，但是里边我觉得其实也有这样的一个哲学：关于食材，对于种食材的菜农来讲，可能它的价值就是卖到市场上而已；而对于大厨们来讲，却可以像变魔术一样将不起眼的食材变成美味佳肴。大厨们不拥有食材，但他们却可以恰到好处的搭配使用它们，这就是他们的精明之处。...
ASP.NET MVC学习之Ajax（完结）
weixin_34221112的博客
05-30 190
一.前言 通过上面的一番学习，大家一定收获不少。但是总归会有一个结束的时候，但是这个结束也意味着新的开始。 如果你是从事ASP.NET开发，并且也使用了第三方控件，那么一定会觉得ASP.NET开发ajax十分的简单，而ASP.NET MVC学习到现在页面都是刷新的，所以这节就是ASP.NET MVC的最后一节，通过这节的学习我们将能够实现通过ajax提交表单，下面我们开始继续学习。   二...
MVC教程第五篇：MVC整合Ajax
chengly0129的专栏
01-13 789
<br />摘要<br />本文将从完成“输入数据验证”这个功能出发，逐渐展开ASP.NET MVC与Ajax结合的方法。首先，本文将使用ASP.NET MVC提供的同步方式完成数据验证。而后，将分别结合ASP.NET AJAX和JQuery将这个功能重构成异步形式。<br />数据验证<br />在上一篇文章中，我们完成了发布公告的功能。但是从健壮性角度看，这个功能并不完善，因为一般情况下，我们输入的数据要符合一定的约束条件，例如，在我们的例子中，我们至少不能将空字符串作为标题或内容吧。下面，我们来为程序
Asp.net MVC 中Ajax的使用
blogfeifei
10-17 329
Asp.net MVC 抛弃了Asp.net WebForm那种高度封装的控件，让我们跟底层的HTML有了更多的亲近。可以更自由、更灵活的去控制HTML的结构、样式和行为。而这点对于Ajax的应有来说，Asp.net MVC确实要比WebForm优秀很多。我对Asp.net MVC更便捷的使用Ajax做了一下探讨，拿出来分享，欢迎拍砖。 第一、直接写JS代码实现Ajax： 因为Asp.n...
Asp.Net MVC 使用 Ajax(一)
尐、孽障的博客
09-16 1834
Asp.Net MVC 使用 Ajax（一）AjaxAjax工作原理Jquery中的Ajax$.Ajax()$.load()$ .get()和$.post()表单序列化 Ajax 简单来说Ajax是一个无需重新加载整个网页的情况下，可以更新局部页面或数据的技术（异步的发送接收数据，不会干扰当前页面）。 Ajax工作原理 Ajax使浏览器和服务器之间多了一个Ajax引擎作为中间层。通过Ajax请求服务器时，Ajax会自行判断哪些数据是需要提交到服务器，哪些不需要。只有确定需要从服务器读取新数据时，Aja
ASP.NET MVC之AJAX
weixin_30618985的博客
07-02 110
本文的例子基于Asp.Net MVC Preview 3，并采用了jQuery完成客户端的JavaScript功能。 之前的两篇文章粗粗的对Asp.Net MVC做了介绍。这里强烈推荐一个网站，有兴趣的朋友可以看这里。这是Rob Conery的个人网站，他采用了Asp.Net MVC做了一个Demo, 不仅在codeplex上提供了这个项目的源代码，还提供了15个视频，这些视频的内容包括从项目...
asp.net mvc 关于ajax的使用
touyi_hot的博客
11-09 196
    来源：https://www.youtube.com/watch?v=7faB8kV43eg 方式一 Index.cshtml &lt;!--不添加jquery-1.10.2.js 无法调用ajax--&gt; &lt;script src="@Url.Content("~/Scripts/jquery-1.10.2.js")" type="text/javascrip...
ASP.NET MVC中的AJAX应用
01-02
一、ASP.NET MVC中的AJAX应用 首先,在ASP.NET MVC中使用自带的ajax功能,必须要导入2个js文件（顺序不能颠倒）: 　　　　　　　　　　　　　　　　　　　　 ASP.NET MVC提供了2个常用的ajax辅助方法. Ajax.ActionLink 该辅助方法用于在页面上生成具有ajax功能的超链接. 　　　　　　　　　　　　　　　　　　　　 在该辅助方法中有一个AjaxOptions类型的参数,它包括如下属性: Confirm:在发送ajax请求前,弹出确认对话框,该属性就是设置对话框中的提示消息HttpMethod:用于设置请求的类型:Get|PostUpdate
Asp.Net MVC之jQuery与AJAX操作实例
10-20
Asp.Net MVC之jQuery与AJAX操作实例
ASP.NET MVC AJAX upload file
02-19
ASP.NET MVC AJAX 文件上传示例代码。 使用 jquery.fileupload + bootstrap 实现，支持多个文件上传。 运行环境：Visual Studio 2012 project, ASP.NET MVC4
Asp.Net MVC 使用 Ajax(二)
尐、孽障的博客
09-16 592
Asp.Net MVC 使用 Ajax（二）MVC中的Ajax使用分部渲染Ajax.Load()Ajax.ActionLink()Ajax表单提交Ajax数据验证 MVC中的Ajax使用 Asp.Net MVC中包含了一组Ajax辅助方法。可以用来创建异步执行的表单和指向控制器操作的异步链接。当使用这个辅助方法时，不用编写任何脚本代码来实现程序的异步。该辅助方法依赖于非侵入式MVC的jquery扩展。如果使用这些辅助方法时，需要引入脚本jquery.unbotrusive-ajax.js （可以在NuGe
在ASP.NET MVC中实现AJAX
极客神殿
11-02 3279
DemoController.csusing System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc;namespace MVCAjax.Controllers { public class DemoController : Controller
ASP.NET --- MVC中的Ajax
じ☆ve暧メ晴的博客
05-30 328
AJAX简介 什么是Ajax Asynchronous JavaScript and XML (JavaScript执行异步网络请求) 如果仔细观察一个Form的提交，你就会发现，一旦用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因，就会得到一个404页面。 这就是Web的运作原理：一次HTTP请求对应一个页面。 如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请
【ASP.Net MVC】在AspNet Mvc使用Ajax
weixin_30648587的博客
07-18 208
目录 一、使用System.Web.Mvc.Ajax 　　1.1System.Web.Mvc.Ajax.BeginForm 　　1.2System.Web.Mvc.Ajax.ActionLink 二、手工打造自己的“非介入式”Javascript” 一、使用System.Web.Mvc.Ajax 1.1System.Web....
ASP.NET MVC与Ajax实战：XMLHTTP对象与异步通信解析
本文将深入解析Asp.net MVC中的Ajax应用实例，特别是JQuery的Ajax技术。 首先，我们要了解Asp.net AJAX的底层异步通信机制。XMLHttpRequest对象是关键，它早在Web开发早期就已经存在，但在Asp.net AJAX客户端框架中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值