webform 中使用ajax

經常使用的方式有 js –> WebService  , js->*.ashx, js->WebAPI, js->MVC Controller->Action. 前兩種就不說了.

1、Webform中 js-> WebAPI .

1.在須要的地方,直接添加WebAPI

2.在Global.asax中設置一下.

public class Global : System.Web.HttpApplication
    {

        void Application_Start(object sender, EventArgs e)
        {
            RouteTable.Routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            RouteTable.Routes.IgnoreRoute("{resource}.aspx/{*pathInfo}");

            //api
            var route = RouteTable.Routes.MapHttpRoute(name: "DefaultApi",
            routeTemplate: "api/{controller}/{action}/{id}", defaults: new { id = RouteParameter.Optional });
            route.RouteHandler = new SessionStateHttpControllerRouteHandler();

3.改一下WebAPI,須要理解FormBody,FromUri的區別.返回Json仍是xml格式,是根據請求時的ContentType決定的.

public class UserController : ApiController
    {
        // GET api/<controller>
        public IEnumerable<string> Get()
        {
            return new string[] { "value1", "value2" };
        }

        // GET api/<controller>/5
        [HttpGet()]
        //[ActionName("getValue")]
        public string GetById([FromBody]dynamic obj)
        {
            var session = HttpContext.Current.Session;
            var user = HttpContext.Current.User;
            return "value" + "aabbccdd";
        }

        // POST api/<controller>
        [HttpPost]
        public object Test(dynamic value)
        {
            var x = value["A"];
            return x;
        }

4,js調用 WebAPI方法,注意發送數據的格式.是字符串,不是Json.

function test() {
            var options = {};
            options.url = "/api/user/Test";
            options.type = "post";
            options.data = 

JSON.stringify

({ 'A': 1, 'B': 2 });
            options.contentType = "application/json";
            options.success = function (customer) {
                alert(customer);
            };
            options.error = function (err) { alert(err.statusText); };
            $.ajax(options);
        };

 function submitForm() {
            var s = $("#from1").serializeArray();
            alert(s);
            var options = {};
            options.url = "/api/user/submit";
            options.type = "post";
            options.contentType = "application/json";
            options.data = JSON.stringify(s);
            options.success = function (customer) {
                alert(customer);
            };
            options.error = function (err) { alert(err.statusText); };
            $.ajax(options);
        }

二,webform 中 js-> asp.net mvc

1,在webform中添加 asp.net mvc相關的程序集引用.建議直接從asp.net mvc項目拷貝引用.

2,在web.config中須要設置做這些設置.

<compilation debug="true" targetFramework="4.0" >
      <assemblies>
        <add assembly="System.Web.Abstractions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
        <add assembly="System.Web.Helpers, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
        <add assembly="System.Web.Routing, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
        <add assembly="System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
        <add assembly="System.Web.WebPages, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
      </assemblies>
    </compilation>

 

<pages>
      <namespaces>
        <add namespace="System.Web.Helpers" />
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Routing" />
        <add namespace="System.Web.WebPages"/>
      </namespaces>
    </pages>

3,在webform程序中,添加一個controller

4,在Global.asax.cs中添加mvc路由

 

public class Global : System.Web.HttpApplication
    {

        void Application_Start(object sender, EventArgs e)
        {
            RouteTable.Routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            RouteTable.Routes.IgnoreRoute("{resource}.aspx/{*pathInfo}");
            
            //mvc
            RouteTable.Routes.MapRoute(
                name: "Default",
                url: "mvc/{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }

5,在controller中添幾個測試方法,一樣須要注意js調用時的數據格式,默認只接收post調用.get請求時.需設置JsonRequestBehavior.AllowGet

public class HomeController : Controller
    {
        public JsonResult Index()
        {
            ViewBag.Message = "修改此模板以快速啓動你的 ASP.NET MVC 應用程序。";

            return Json(3,JsonRequestBehavior.AllowGet);
        }

        public JsonResult About()
        {
            ViewBag.Message = "你的應用程序說明頁。";
            return Json("aaa");
        }

        public ActionResult Contact(int age,string name)
        {
            ViewBag.Message = "你的聯繫方式頁。";
            return Json("bbbbbbbbbbbbb");
        }

6,添加測試js

function mvcpost() {
            var options = {};
            options.url = "/mvc/home/Contact";
            options.type = "post";
            options.data = JSON.stringify({ 'age': 1, 'name': 'xiaowy' });
            options.contentType = "application/json";
            options.success = function (customer) {
                alert(customer);
            };
            options.error = function (err) { alert(err.statusText); };
            $.ajax(options);
        }

在上面的代碼中,用到了一個自定義的類 SessionStateHttpControllerHandler. 這個是爲了在Web API中使用 session.

 

public class SessionStateHttpControllerHandler : HttpControllerHandler, IRequiresSessionState
    {
        public SessionStateHttpControllerHandler(RouteData routeData)
            : base(routeData)
        {

        }
    }

  public class SessionStateHttpControllerRouteHandler : HttpControllerRouteHandler
    {
      protected override IHttpHandler GetHttpHandler(RequestContext requestContext)
        {
            return new SessionStateHttpControllerHandler(requestContext.RouteData);
        }
    }

若是你照上面的步驟仍然不成功,那就下載這個,本身修改一下.