zoukankan      html  css  js  c++  java
  • AJAX,JSON与MVC

    有几个特殊之处

    1. MVC框架中包含了一个特殊的JSONActionResult,可以直接返回JSON对象,注意它的格式与之前的asmx和页面静态方法都不一样,它直接就是一个JSON对象

    image

    2. 服务端和客户端编程都相对简单了。服务器端无须明确序列化,而客户端也无须解析JSON字符串了,因为返回的结果本来就是一个JSON对象

    第一部分:Controller中的设计

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    
    namespace MvcApplication1.Controllers
    {
    
        public class Employee
        {
            public int Id { get; set; }
            public string Name { get; set; }
        }
    
        [HandleError]
        public class HomeController : Controller
        {
            public ActionResult Index()
            {
                ViewData["Message"] = "Welcome to ASP.NET MVC!";
    
                return View();
            }
    
            public ActionResult About()
            {
                return View();
            }
    
            public ActionResult Employee() {
                return View();
            }
    
    
            [HttpPost]
            public ActionResult GetEmployee() {
                return Json(new Employee()
                {
                    Id = 1,
                    Name = "chenxizhang"
                });
            }
    
    
            
            
        }
    }
    

    第二部分:View中的设计

    <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
        GetEmployee
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    
        <script src="../../Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
    
        <script type="text/javascript" language="javascript">
            $(function() {
                $("#bt").click(function() {
                    $.ajax({
                        type: "POST",
                        contentType: "application/json",
                        url: "http://localhost:44203/Home/GetEmployee",
                        data: "{}",
                        dataType: 'json',
                        success: function(result) {
                            alert(result.Id);
                        }
    
                    });
                });
            });
        
        </script>
    
        <h2>
            GetEmployee</h2>
        <input type="button" value="Invoke" id="bt" />
        <div id="info">
        </div>
    </asp:Content>
    
  • 相关阅读:
    【Flutter 实战】1.20版本更新及新增组件
    【Flutter 实战】各种各样形状的组件
    【Flutter 实战】全局点击空白处隐藏键盘
    Flutter —布局系统概述
    【Flutter 实战】17篇动画系列文章带你走进自定义动画
    lvs负载简介,原理,常见使用案例及Keepalived高可用
    02 . MongoDB复制集,分片集,备份与恢复
    Go之Casbin简介,安装,模型,存储,函数
    govendor包管理及Go项目热加载
    教你三招快速文件批量重命名方法
  • 原文地址:https://www.cnblogs.com/chenxizhang/p/1660601.html
Copyright © 2011-2022 走看看