使用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,输入对应的参数会返回我们需要的数据

    
阅读更多
个人分类: 练习
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭