webform 中使用ajax
常用的方式有 js –> WebService , js->*.ashx, js->WebAPI, js->MVC Controller->Action. 前两种就不说了.
一、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); } }
如果你照上面的步骤仍然不成功,那就下载这个,自己修改一下.