Fatal编程技术网
  • javascript/
  • Javascript JSON数据在C#Web API中解析不正确

Javascript JSON数据在C#Web API中解析不正确

javascript json web knockout.js asp.net-web-api

Javascript JSON数据在C#Web API中解析不正确,javascript,json,web,knockout.js,asp.net-web-api,Javascript,Json,Web,Knockout.js,Asp.net Web Api,我目前正在学习一个在线教程，学习如何使用WebAPI创建电话簿。在我开始使用javascript和knockout.js绑定视图模型之前，一切都很正常。现在没有数据加载到页面上 当我试图通过http://localhost:{port_no}/api/Data/1我的浏览器试图下载存储数据的JSON数据 有人能解释一下为什么会发生这种情况，以及为什么JSON数据没有被正确解析吗 控制器类： namespace TelephoneDirectory.Controllers { public

我目前正在学习一个在线教程，学习如何使用WebAPI创建电话簿。在我开始使用javascript和knockout.js绑定视图模型之前，一切都很正常。现在没有数据加载到页面上

当我试图通过
http://localhost:{port_no}/api/Data/1
我的浏览器试图下载存储数据的JSON数据

有人能解释一下为什么会发生这种情况，以及为什么JSON数据没有被正确解析吗

控制器类：

namespace TelephoneDirectory.Controllers
{
    public class DataController : ApiController
    {
        public async Task<IEnumerable<TelephoneEntry>> Get()
        {
            using (var context = new DataContext())
            {
                return await context.TelephoneEntries.ToListAsync();
            }
        }

        public async Task<TelephoneEntry> Get(int id)
        {
            using (var context = new DataContext())
            {
                return await context.TelephoneEntries.FirstOrDefaultAsync(t => t.Id == id);
            }
        }


        public async Task<int> Post([FromBody] TelephoneEntry telephoneEntry)
        {
            using (var context = new DataContext())
            {
                if (telephoneEntry.Id == 0)
                {
                    context.Entry(telephoneEntry).State = EntityState.Added;
                }
                else
                {
                    context.Entry(telephoneEntry).State = EntityState.Modified;
                }

                await context.SaveChangesAsync();

                return telephoneEntry.Id;
            }
        }
    }
}
WebApiConfig类：

namespace TelephoneDirectory.App_Start
{
    public class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            config.MapHttpAttributeRoutes();
            config.Routes.MapHttpRoute("DefaultApi", "api/{controller}/{id}", new { id = RouteParameter.Optional });

            JsonMediaTypeFormatter jsonFormatter = config.Formatters.OfType<JsonMediaTypeFormatter>().First();

            jsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
        }
    }
}
index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/site.css" rel="stylesheet" />
</head>
<body>
    <script src="Scripts/jquery-1.9.0.min.js"></script>
    <script src="Scripts/knockout-3.1.0.js"></script>
    <script src="Scripts/index.js"></script>

    <div class="container-narrow">
        <div class="row">
            <h1>Telephone Directory</h1>
        </div>
        <div class="row shaded padded">
            <div class="col-sm-3">
                <label for="firstName">First Name</label>
                <input id="firstName" name="firstName" type="text" class="form-control" data-bind="value: firstName" required="required" />
            </div>
            <div class="col-sm-3">
                <label for="lastName">Last Name</label>
                <input id="lastName" name="lastName" type="text" class="form-control" data-bind="value: lastName" required="required" />
            </div>
            <div class="col-sm-3">
                <label for="phoneNumber">Phone Number</label>
                <input id="phoneNumber" name="phoneNumber" type="text" class="form-control" data-bind="value: number" required="required" />
            </div>
            <div class="col-sm-12">
                <button id="add" name="add" type="submit" data-bind="click: add, text: addText">Add</button>
                <button id="reset" name="reset" type="reset" data-bind="click: reset, text: resetText">Reset</button>
            </div>
        </div>
    </div>
    <div class="container-narrow">
        <div class="row">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Phone Number</th>
                        <th>&nbsp;</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: telephoneEntries">
                    <tr>
                        <td><span data-bind="text: firstName"></span></td>
                        <td><span data-bind="text: lastName"></span></td>
                        <td><span data-bind="text: number"></span></td>
                        <td>
                            <a href="#" data-bind="click: $parent.edit">Edit</a>&nbsp;<a href="#" data-bind="click: $parent.delete">Delete</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</body>
</html>{"id":1,"firstName":"Jon","lastName":"Preece","number":"4444"}


电话簿
名字
姓
电话号码
添加
重置
名字
姓
电话号码
{“id”：1，“firstName”：“Jon”，“lastName”：“Preece”，“number”：“4444”}
要在文档就绪时设置绑定，请执行以下操作

改变这个

ko.applyBindings(new TelephoneViewModel());
对此

$(function(){ 
    ko.applyBindings(new TelephoneViewModel());
});
没有错误，只是页面上没有加载数据，单击“添加”、“编辑”和“删除”按钮似乎没有任何作用。在“文档准备就绪”中应用数据绑定。在chrome或firebug中打开“网络”选项卡和“控制台”选项卡，检查发送到browserHi@MatthewPigram的内容，当您使用浏览器请求服务时，可以查看返回的JSON数据的内容。如果这是您所期望的，那么问题就在您的绑定中。另一方面，您的问题有很多代码要处理，其中大部分与问题无关。你能不能把它裁剪到只有相关的部分，使它成为一个最小的复制品？让我们更容易（或至少：邀请）帮助您。 
ko.applyBindings(new TelephoneViewModel());

$(function(){ 
    ko.applyBindings(new TelephoneViewModel());
});