使用Angular4+kendo ui for Angular+ webapi+sqlserver创建一个简单的省市选择程序（一）

前言

本人是Angular4菜鸟一只，，，因为公司有项目需要Angular4，刚刚学些Angular4一个月。。顺手做了一个小项目。

使用的开发软件是vs2017和webstorm。

主要功能是通过选择grid里面的内容，dropdownlist和textbox会显示出grid中的City属性值，同时更改dropdownlist和textbox里面的值，grid里面的值对应也会改变。

样子是 灰常的难看 。主要是结合了不少的平时经常用到的框架，当做一个小栗子 ！如有不对欢迎指正。

第一步 构建一个webapi

不管是Angular4还是kendo ui for Angular都是前台框架，需要一个服务器传递数据，这里我们选择使用VS2017创建一个webapi。

（没有的小伙伴从这下载VS2017 ）

首先创建一个ASP.NET WEB项目，很简单。

在接下来的选择中选择WEB API

创建完成之我们手动创建一个controller 选择webapi2

里面填写数据库的交互内容，，我这里使用的是Linq to sql 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Data.Linq.Mapping;
using System.Data.Common;
using angulerProCityWebApi.Models;

namespace angulerProCityWebApi.Controllers
{
    public class getProCityController : ApiController
    {
        private proCityDataAccessDataContext proDb =new proCityDataAccessDataContext();
        public IHttpActionResult GetAllPro()
        {
            var allPro = (from a in proDb.provinces
                          select a).ToList();
            return Json<List<province>>(allPro);

        }
        public IHttpActionResult GetCityOfProId(int id)
        {
            if (id == 0)
            {
                var allCity = (from a in proDb.cities
                               select a).ToList();
                return Json<List<city>>(allCity);
            }
            else
            {
                var allCity = (from a in proDb.cities
                               where a.proId == id
                               select a).ToList();
                return Json<List<city>>(allCity);
            }

        }

    }
}

model使用的dbml方便快捷

数据库也顺便贴一下

到这里服务器内容就准备好了，，F5启动webapi，输入对应的参数会返回我们需要的数据