AJAX, JSON, and MVC

There are several special features

1. the MVC Framework contains a special JSONActionResult, which can directly return a JSON object. Note that its format is different from the previous asmx and static page methods. It is a JSON object directly.

2. programming on the server and client is relatively simple. The server does not require explicit serialization, and the client does not need to parse the JSON string, because the returned result is a JSON object.

 

Part 1: Design in 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"            });        }                    }}

Part 2: Design in 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>