博客

实现区域或城市选择的功能是一个常见的需求，可以通过使用 ASP.NET MVC 框架来实现。以下是详细的攻略：

步骤1：创建数据库

在 SQL Server 中创建一个名为“City”的数据库，并添加以下表：

Province 表

City 表

Area 表

步骤2：创建 ASP.NET MVC 项目

在 Visual Studio 中创建一个名为“City”的 ASP.NET MVC 项目。

步骤3：创建模型

在 Models 文件夹中创建一个名为“City”的模型，并添加以下代码：

public class Province
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<City> Cities { get; set; }
}

public class City
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int ProvinceId { get; set; }
    public List<Area> Areas { get; set; }
}

public class Area
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int CityId { get; set; }
}

这个模型包含三个类：Province、City 和 Area。每个类都表示数据库中的一个表。

步骤4：创建控制器

在 Controllers 文件夹中创建一个名为“CityController”的控制器，并添加以下代码：

public class CityController : Controller
{
    private readonly CityContext _context;

    public CityController(CityContext context)
    {
        _context = context;
    }

    public IActionResult Index()
    {
        var provinces = _context.Provinces.Include(p => p.Cities).ToList();
        return View(provinces);
    }

    public IActionResult GetCities(int provinceId)
    {
        var cities = _context.Cities.Where(c => c.ProvinceId == provinceId).ToList();
        return Json(cities);
    }

    public IActionResult GetAreas(int cityId)
    {
        var areas = _context.Areas.Where(a => a.CityId == cityId).ToList();
        return Json(areas);
    }
}

这个控制器包含三个方法：Index、GetCities 和 GetAreas。Index 方法返回一个视图，该视图包含省份、城市和区域的下拉列表。GetCities 方法接收一个省份 ID，并返回该省份的城市列表。GetAreas 方法接收一个城市 ID，并返回该城市的区域列表。

步骤5：创建视图

在 Views 文件夹中创建一个名为“Index”的视图，并添加以下代码：

@model List<Province>

@{
    ViewData["Title"] = "City";
}

<h1>@ViewData["Title"]</h1>

<div class="form-group">
    <label for="province">Province:</label>
    <select id="province" class="form-control">
        <option value="">-- Select Province --</option>
        @foreach (var province in Model)
        {
            <option value="@province.Id">@province.Name</option>
        }
    </select>
</div>

<div class="form-group">
    <label for="city">City:</label>
    <select id="city" class="form-control">
        <option value="">-- Select City --</option>
    </select>
</div>

<div class="form-group">
    <label for="area">Area:</label>
    <select id="area" class="form-control">
        <option value="">-- Select Area --</option>
    </select>
</div>

@section Scripts {
    <script>
        $(function () {
            $('#province').change(function () {
                var provinceId = $(this).val();
                if (provinceId) {
                    $.get('/City/GetCities?provinceId=' + provinceId, function (data) {
                        var $city = $('#city');
                        $city.empty();
                        $city.append($('<option>').val('').text('-- Select City --'));
                        $.each(data, function (i, city) {
                            $city.append($('<option>').val(city.id).text(city.name));
                        });
                    });
                }
            });

            $('#city').change(function () {
                var cityId = $(this).val();
                if (cityId) {
                    $.get('/City/GetAreas?cityId=' + cityId, function (data) {
                        var $area = $('#area');
                        $area.empty();
                        $area.append($('<option>').val('').text('-- Select Area --'));
                        $.each(data, function (i, area) {
                            $area.append($('<option>').val(area.id).text(area.name));
                        });
                    });
                }
            });
        });
    </script>
}

这个视图包含三个下拉列表：省份、城市和区域。在视图中，我们使用 Razor 循环遍历省份列表，并将其添加到省份下拉列表中。当用户选择省份时，我们使用 Ajax 技术从服务器获取该省份的城市列表，并将添加到城市下拉列表中。当用户选择城市时，我们使用 Ajax 技术从服务器获取该城市的区域列表，并将其添加到区域下拉列表中。

示例1：获取城市列表

假设我们要获取省份 ID 为 1 的城市列表。我们可以使用代码：

$.get('/City/GetCities?provinceId=1', function (data) {
    console.log(data);
});

这个代码将调用 CityController 的 GetCities 方法，并返回省份 ID 为 1 的城市列表。

示例2：获取区域列表

假设我们要获取城市 ID 为 1 的区域列表。我们可以使用以下代码：

$.get('/City/GetAreas?cityId=1', function (data) {
    console.log(data);
});

这个代码将调用 CityController 的 GetAreas 方法，并返回城市 ID 为 1 的区域列表。

以上就是“ASP.NET MVC 实现区域或城市选择”的完整攻略。