如何创建国家/地区州下拉菜单

时间:2019-07-03 20:23:32

标签: c# asp.net-mvc model-view-controller

我正在创建一个项目,需要在其中创建带有连续国家/地区州/省/自治县/直辖市/自治区下拉菜单栏的注册菜单。我只是不知道该怎么办。

我曾尝试查找其他内容,但找不到方法。我在AVC中工作,只了解基础知识。

我想做到这一点,因此首先需要一个国家/地区下拉列表,并在不重新加载页面的情况下更新状态下拉列表

1 个答案:

答案 0 :(得分:-2)

大部分代码来自 https://www.c-sharpcorner.com/blogs/cascading-dropdownlist-in-asp-net-mvc 但是有很多更改可以转换为您想要的

将其用于您所在的国家/地区并在视图中显示州/省

<div class="form-group">
        @Html.LabelFor(model => model.CountryStr, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
            @Html.DropDownListFor(model => model.CountryStr, ViewBag.Country as List<SelectListItem>, new { @class = "form-control" })
    </div>
</div>

<div class="form-group">
        @Html.LabelFor(model => model.StateStr, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.StateStr, new SelectList(string.Empty, "Value", "Text"), "--Select State--", new { @class = "form-control" })
        </div>
    </div>

及其下方

<script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">


        $(document).ready(function () {

            $("#CountryStr").change(function () {
                $("#StateStr").empty();
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("getState")',
                    dataType: 'json',
                    data: { id: $("#CountryStr").val() },
                    success: function (State) {

                        $.each(State, function (i, State) {
                            $("#StateStr").append('<option value="'
                                                       + State.Value + '">'
                                                 + State.Text + '</option>');
                        });
                    },
                    error: function (ex) {
                        alert('Failed.' + ex);
                    }
                });
                return false;
            })
        });
    </script>

将其添加到顶部以加载国家/地区列表(使用@ {}):

string[] whwhw = ListofCountries
IEnumerable<string>
why = whwhw;
SelectList CountryLit = new SelectList(why);

并将其放在您的控制器中

public void bindCountry()
    {
        List<SelectListItem> li = new List<SelectListItem>();
        li.Add(new SelectListItem { Text = "--Select Country--", Value = "0" });

        cs.Open();
        SqlDataReader dr = (da.SelectCommand = new SqlCommand("SELECT * FROM Country", cs)).ExecuteReader();

        while (dr.Read())
        {
            li.Add(new SelectListItem { Text = dr.GetValue(1).ToString(), Value = dr.GetValue(0).ToString()});
            ViewBag.Country = li;
        }
        cs.Close();
    }  
    public JsonResult getState(int id)
    {
        List<SelectListItem> liStates = new List<SelectListItem>();

        liStates.Add(new SelectListItem { Text = "--Select State--", Value = "0" });
        cs.Open();
        SqlDataReader dr = (da.SelectCommand = new SqlCommand("SELECT * FROM State WHERE CountryId = " + id, cs)).ExecuteReader();

        int count = 0;
        while (dr.Read())
        {
            liStates.Add(new SelectListItem { Text = dr.GetValue(1).ToString(), Value = dr.GetValue(0).ToString() });
            ViewBag.State = liStates;
            count += 1;
        }
        cs.Close();
        PersonValues.Country = count;
        return Json(new SelectList(liStates, "Value", "Text", JsonRequestBehavior.AllowGet));
    }

放入

bindCountry();

在返回页面视图之前,下拉条将位于