MVC中使用Web API和jQuery通过GET或POST来获取数据
2014-07-29 18:46:36  By: dwtedx

介绍

在本文中,您可以了解如何使用的WebAPI与MVC和jQuery的。

我已经定义了GET,POST,PUT和使用模型类在客户端和MVC控制器来使用它在jQuery的删除方法。

有关的WebAPI

的ASP.NET Web API是一个框架,它可以很容易地构建达成了广泛的客户端,包括浏览器和移动设备的HTTP服务。

的ASP.NET Web API是为。NET Framework上构建RESTful应用程序的理想平台。

我们已经知道WCF服务和Web服务两者都是基于SOAP的服务和它们使用HTTP作为传输层的协议。

这意味着,它们使用HTTP协议只是为了隧道在互联网上的SOAP消息。但是,所有的客户端都没有处理到合适的SOAP消息。

SOAP消息是内部的XML和XML的处理可能会很复杂某些客户端。而最好的例子非基于SOAP客户端是JQUERY的。

我们可以克服这个问题,我们引入了剩下的WCF服务。如果你是熟悉REST,请通过WCF REST服务的网站,先学会它。

REST是一种架构风格,它说使用更有效和更简单的方式在网络的现有功能。

如果你想了解的功能,并学习它们,这些都是HTTP动词一样的GET,POST,PUT和DELETE。

在REST中,每个东西都是独一无二的识别,并不总是在XML进行通信可以等通过XML,JSON。使用此功能,为此我们呼吁HTTP的REST服务。

使用WCF的REST服务,它需要大量的配置设置,这是一个有点复杂。服务背后的主要目的是建立面向服务的架构不支持REST。

现在,微软简化了,最后才出现的解决方案,创建的ASP.NET的一部分,被称为ASP.NET的Web API。这是ASP.NET技术创建REST服务的一部分。

MVC与API

与MVC4应用程序选择的Web API的模板,这包括一个简单的Web API调用ValuesController。在这里,你会发现很多的特点,是一样的MVC。

这意味着不完全相同,但其代码模式是类似的。如果您不是一个MVC的开发,这些东西可能是困难的你,否则它很容易理解。

让我们来讨论一下这。在MVC中,有一个附加的MVC控制器,而在卷筒纸的API中,有一个附加的API的控制器。

在API的控制器,操作方法是HTTP动词像GET,POST,PUT和DELETE甚至我们可以重载这个方法。


public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Person", 
            action = "Index", id = UrlParameter.Optional }
            );
    }
} 
让我们来讨论一下MVC的路由如何MVC是使用Web API实现。你会得到App_Start文件夹并打开它。


当请求到达的MVC,它需要的URL,并通过它的三个部分。第一个名字是控制器,它用它的名字找到控制器。

其次是行动,那么它找到具有该名称的方法。

而且,我们有默认的id与选项UrlParameter。就这样,我们WebApiConfig.cs文件:


config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
就这样在的WebAPI默认名称为DefaultApi。只是为了与MVC的路由的Web API的路由模板保持独立的第一个定义是API。


我们可以将其更改为customerapi,facebookapi等按我们的要求。

接下来是控制器和id选项RouteParameter。最主要的是,它并没有采取行动在这里,我们只有HTTP方法取决于客户的需求。

如果是get请求,get方法会调用和post请求,那么post方法将调用等。


Controller

让我们创建一个Person类里面的模型文件夹。
public class Person
{
    public int ID { get; set; }
    public string Name { get; set; }
    public string Address { get; set; }
    public DateTime DOB { get; set; }
}
public class PersonEntities : DbContext
{
    public DbSet<person> Persons { get; set; }
}   

使用的Web API的get方法

在MVC中默认阿比的名字是ValuesController。我已经改变了,而不是返回改为人列表的字符串。


如果你会看到有两个Get方法中值的API,一个用另一个参数与id参数。

对于列表中,我们呼吁不带参数,以获得所有的人的详细信息。请参阅下面的详细资料


public class ValuesController : ApiController
{
    PersonEntities db = new PersonEntities();
    // GET api/values
    public IEnumerable<person> Get()
    {
         return db.Persons.ToList();
         //return new string[] { "value1", "value2" };
    }
}    
我都谈到了默认的返回值。我也dded,我已经在模型类中定义了PersonalEntities。


当您将运行的应用程序,通过浏览使用XML在Chrome浏览器了../ API/数值/你会得到的数据。您可以从GET方法请求获取数据的JSON表示。

对于这一点,我在指数2查看页面设计它。这仅仅是作为内容协商。根据客户端请求时,它返回的数据。

当客户说的XML,它返回的XML和JSON,甚至说我们回到我们自己的自定义格式,像名片,阶级或任何东西。


$(document).ready(function () {
        $.ajax({
            url: "http://localhost:49493/api/Values",
            type: "Get",
            success: function (data) { 
                for (var i = 0; i < data.length; i++) {
                    $("
<tr></tr>

<td></td>
" + data[i].Name + "</td>
<td></td>
" + data[i].Address + "</td>
<td></td>
" + data[i].DOB + "</td></tr>").appendTo("#tbPerson");                   
                }
            },
            error: function (msg) { alert(msg); }
        });
    });    

使用的Web API的删除方法


<script>
    $(document).ready(function () {
        $("#deleteApi").click(function () {
           // debugger;
            var id = $("#ID").val();
            $.ajax({
                url: "http://localhost:49493/api/Values/" + id,
                type: "Delete", 
                success: function (data) {
                    alert(´Deleted Successfully´);
                    window.location.href = "../Index";
                },
                error: function (msg) { alert(msg); }
            });
        });
    });
</script>
但在删除情况下如果我们将检查API方法只有一个参数。为此,我们必须在MVC格式的URL发送参数。

所以,我已经添加在URL中的id参数的值,类型为删除。然后,它会调用的WebAPI的删除方法,其中的API方法如下如下。

public void Delete(int id)
 {
       Person obj = db.Persons.Find(id);
       db.Persons.Remove(obj);
       db.SaveChanges();
 }
对于操作结果我在这里访问相同的WebAPI方法。

[HttpPost]// POST: /Person/Delete/5 
public ActionResult Delete(int id, FormCollection collection)
{
	try
	{
		db.Delete(id);
		return RedirectToAction("Index");
	}
	catch
	{
		return View();
	}
}

结论

的ASP.NET Web API是一个框架,它可以很容易地构建达成了广泛的客户端,包括浏览器和移动设备的HTTP服务。

的ASP.NET Web API是为。NET Framework上构建RESTful应用程序的理想平台。

源码下载链接:http://dwtedx.com/download.html?bdkey=s/1pJwj8wV 密码: pbn2

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+