我正在尝试开发一个 GET API 以根据单选按钮选择从数据库中过滤掉结果，该单选按钮选择在.NET Core 中没有提交按钮

Question

api前端：

我正在尝试开发一个 GET API 来根据单选按钮选择从数据库中过滤掉结果，然后使用过滤后的数据填充“州/省”下拉列表。就像，如果将选择美国，那么下拉列表应该填充来自美国的州。我对 .NET Core 相当陌生，因此很难弄清楚如何开始。任何人都可以帮助我编写类似这样的 API 的代码框架吗？

我试图寻找一些 YouTube 教程，但大多数都在 WinForms 上。我还查看了一些代码，但难以理解它们并在我的 API 中遵循相同的代码。

Answer 1

任何人都可以帮助我编写这样的 API 的代码框架吗 跟随？

根据场景，您应该知道您的前端团队如何向您的 API 发送请求。同时作为 API 开发人员，您应该将国家名称作为您的 API 参数来处理，而不是单选按钮更改事件的工作方式——正如您所说，这应该是前端团队的关注点。因此，我为您提供了完整的示例：

模型数据：

假设您有以下国家和州：

国家：

public static List<Country> ListOfCountry = new List<Country>()
        {
            new Country() { CountryId =101, CountryName ="INDIA", },
            new Country() { CountryId =102, CountryName ="UnitedStates", },
            new Country() { CountryId =103, CountryName ="UK", },
            new Country() { CountryId =104, CountryName ="Canada", },
        };

状态：

public static List<State> ListOfState = new List<State>()
        {
            //INDIA
            new State() { CountryId =101, StateId =1, StateName = "Delhi" },
            new State() { CountryId =101, StateId =2, StateName = "Haydrabad" },
            new State() { CountryId =101, StateId =3, StateName = "Pune" },
            //USA
            new State() { CountryId =102, StateId =4, StateName = "New York" },
            new State() { CountryId =102, StateId =5, StateName = "Silicon Valley" },
            new State() { CountryId =102, StateId =6, StateName = "Dallaus" },
            //UK
            new State() { CountryId =103, StateId =7, StateName = "London" },
            new State() { CountryId =103, StateId =8, StateName = "Cardif" },
            new State() { CountryId =103, StateId =9, StateName = "Sundarland" },
             //Candada
            new State() { CountryId =104, StateId =10, StateName = "Alberta" },
            new State() { CountryId =104, StateId =11, StateName = "Ontario" },
            new State() { CountryId =104, StateId =12, StateName = "Manitoba" },
        };

笔记：看到列表希望你有足够的知识自己写POCO模型类。

API 控制器：

public class CascadingDropdownController : Controller
    {
        [HttpGet]
        public async Task<ActionResult> GetStateByCountryName(string countryName)
        {
            int getCountryId = ListOfCountry.Where(name => name.CountryName == countryName).Select(id => id.CountryId).FirstOrDefault();
            var state = ListOfState.Where(cId => cId.CountryId == getCountryId).ToList();

            return Ok(state);

        }
         public IActionResult Index() // This action is for the view
          {
              return View();
          }

}

看法：

<div class="container">
    <div class="form-group">
        <input type="radio" name="country" value="UnitedStates" /><span><strong> United States</strong></span>
        <input type="radio" name="country" value="Canada" /> <span><strong> Canada</strong></span>
        <input type="radio" name="country" value="India" /> <span><strong> India</strong></span>
    </div>
    <br />
    <table class="table table-sm table-bordered table-striped">
        <tr>
            <td> <span><strong>City</strong></span> <input class="form-control" placeholder="Enter City" /></td>
            <td>
                <span><strong>State/Province</strong></span>
                <select class="form-control" id="ddlState"> </select>
            </td>
            <td><span><strong>Zip/Postal Code</strong></span><input id="zip" class="form-control" placeholder="Enter Zip/Postal Code" /> </td>
            <td><input type="submit" style="margin-top:22px" value="Search" class="btn btn-primary" /></td>
           
        </tr>
     
    </table>
   
</div>

@section scripts {
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script>
        $(document).ready(function () {
            var ddlState = $('#ddlState');
            ddlState.empty();
            ddlState.append($("<option></option>").val('').html('Choose State'));
            $('input[type=radio][name=country]').change(function () {
                var country = "";
                if (this.value == 'UnitedStates') {
                  country = "UnitedStates"
                }
                else if (this.value == 'Canada') {
                    country = "Canada"
                }
                else if (this.value == 'India') {
                    country = "INDIA"
                }

                if (country != "") {
                    var ddlState = $('#ddlState');
                    ddlState.empty();
                    ddlState.append($("<option></option>").val('').html('Please wait ...'));


                    $.ajax({
                        url: 'http://localhost:5094/CascadingDropdown/GetStateByCountryName',
                        type: 'GET',
                        dataType: 'json',
                        data: { countryName: country },
                        success: function (d) {

                            ddlState.empty(); // Clear the please wait
                            ddlState.append($("<option></option>").val('').html('Choose State'));
                            $.each(d, function (i, states) {
                                ddlState.append($("<option></option>").val(states.stateId).html(states.stateName));
                            });
                        },
                        error: function () {
                            alert('Error!');
                        }
                    });
                }

            });

        });
    </script>
}

笔记：这里'input[type=radio][name=country]').change 基于radio button 更改事件，您必须获取选定的国家/地区名称，然后需要调用您的API，即GetStateByCountryName，它需要一个国家名称作为参数并基于该参数搜索州列表并返回您完成。

输出：

笔记：我使用了国家/地区的静态列表，并声明您都需要从您的数据库中搜索。另外，我已经设置了一个提交按钮，在这个阶段它什么也没做，因此任何进一步的提交都需要它。