create table City ( Id int identity, Name varchar(30), Pid int , )
MVC顯示頁面
@{
ViewBag.Title = "Index";
}
@using MVC.Models;
<h2>Index</h2>
<div id="sel">
<select onchange="BandNext(this)">
<option value="-1">--請選擇--</option>
@foreach (City item in ViewBag.Xiala as List<City>)
{
<option value="@item.Id">@item.Name</option>
}
</select>
</div>
<script>
function BandNext(obj) {
var Pid = $(obj).val();
$(obj).nextAll().remove();
if (Pid ==-1) {
return;
}
$.ajax({
url: "https://localhost:44372/API/API?Pid=" + Pid,
//dataType: "json",
type: "get",
success: function (d) {
var sel = '<select onchange="BandNext(this)"> '
sel += '<option value="-1">--請選擇--</option> '
$(d).each(function () {
sel += ' <option value="' + this.Id + '">'+this.Name+'</option>'
})
sel += '</select>';
$("#sel").append(sel);
}
})
}
</script>
MVC 后台
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVC.Models;
using Newtonsoft.Json;
namespace MVC.Controllers
{
public class MVCController : Controller
{
HttpClientHelper helper = new HttpClientHelper("https://localhost:44372/API/API/");
// GET: MVC
public ActionResult Index()
{
string json = helper.Get("GetShow?Pid=0");
ViewBag.Xiala = JsonConvert.DeserializeObject<List<City>>(json);
return View();
}
}
}
API 代碼
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using System.Web.Http; using System.Data.SqlClient; using Dapper; using System.Data; using API.Models; namespace API.Controllers { public class APIController : ApiController { public List<City> GetShow(int Pid = 0) { using (IDbConnection conn = new SqlConnection("Data Source=.;Initial Catalog=x1rk16;Integrated Security=True")) { string sql = $"select * from City where 1=1 and Pid={Pid}"; List<City> model = conn.Query<City>(sql).ToList(); return model; } } } }
