在mvc4我使用下拉框但它不工作 [英] In mvc4 I am using dropdown box but it is not working

问题描述

<pre>

This is my controller
public class HomeController : Controller
    {
        dropdownEntities db = new dropdownEntities();
        public ActionResult Index()
        {
            ViewBag.Country = new SelectList(db.CountryDetails, "CountryId", "CountryName");
            return View();
        }

        
        public JsonResult GetState(string id)
        {
            List<SelectListItem> states = new List<SelectListItem>();
            var stateList = this.Getstatevalue(Convert.ToInt32(id));
            var stateData = stateList.Select(m => new SelectListItem()
          //  SelectList new StateDetails
            {
                Text = m.StateName,
                Value = m.StateId.ToString(),
            });
            return Json(stateData, JsonRequestBehavior.AllowGet);
        }

        public List<StateDetail> Getstatevalue(int CountryId)
        {
            //Database1Entities db = new Database1Entities();

            return db.StateDetails.Where(m => m.StateId == CountryId).ToList();
        }
    
        public JsonResult GetCity(string id)
        {
            List<SelectListItem> cities = new List<SelectListItem>();
            var cityList = this.Getcityvalue(Convert.ToInt32(id));
            var cityData = cityList.Select(m => new SelectListItem()
            {
                Text = m.CityName,
                Value = m.CityId.ToString(),
            });
            return Json(cityData, JsonRequestBehavior.AllowGet);
        }
        public List<CityDetail> Getcityvalue(int StateId)
        {
            //Database1Entities db = new Database1Entities();

            return db.CityDetails.Where(m => m.CityId == StateId).ToList();
        }
    

        }

    }

这是我的Index.View

this is my Index.View

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>EmployeeData</legend>

        <div class="editor-label">
            @Html.Label("Country")<br />
        </div>

        <div>
            @Html.DropDownList("Country", ViewBag.Country as SelectList, "-- Please Select a Country  --", new { style = "width:150px", @id = "Country" })
        </div>
        <div class="editor-label">
            <br />
            @Html.Label("State")<br />
        </div>
        <div>
            @Html.DropDownList("State", new SelectList(string.Empty, "Value", "Text"), "-- Please select a State --",
                        new { style = "width:150px", @id ="State" })
        </div>

        <div class="editor-label">
            <br />
            @Html.Label("City")<br />
        </div>
        <div>
            @Html.DropDownList("City", new SelectList(string.Empty, "Value", "Text"), "-- Please select a city --",
                        new { style = "width:150px", @id = "City" })
        </div>

        <p>
            <input type="button" onclick="ddlInsert()" value="Submit" />
        </p>
    </fieldset>
}

<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/jquery-1.7.1.min.js"></script>


<script type="text/javascript">
    $(document).ready(function () {
        // this is Country Dropdown Selectedchange event
        $("#Country").change(function () {
            $("#State").empty();
            $.ajax({
                type: 'POST',
                url: '@Url.Action("Getstate")', // here we are Calling json method
                dataType: 'json',
                data: { id: $("#Country").val() },
                // Get Selected Country ID.

                success: function (States) {
                    $.each(States, function (i, state) {
                        $("#State").append('<option value="' + State.Value + '">' +
                             State.Text + '</option>');
                    });
                },
                error: function (ex) {
                    alert(' states retrieving fail.' + ex);
                }
            });
            return false;
        })

        $("#State").change(function () {
            $("#City").empty();
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetCity")', // here we are Calling json method
                dataType: 'json',
                data: { id: $("#State").val() },
                // Get Selected Country ID.

                success: function (cities) {
                    $.each(cities, function (i, city) {
                        $("#City").append('<option value="' + City.Value + '">' +
                             City.Text + '</option>');
                    });
                },
                error: function (ex) {
                    alert(' city retrieving fail.' + ex);
                }
            });
            return false;
        })
    });
</script>

我尝试过：



在控制器中我从数据库中调用数据并获取脚本和json，但它无法正常工作并且在index.view中



请检查它，如果我选择国家，它显示下拉列表，但在州和城市，它没有显示

What I have tried:

In controller i call the data from database and fetch into script and json but it is not working and in index.view

please check it and if i select Country it is showing dropdown but in state and city it is not showing

推荐答案

（ document ）。ready（ function （）{
// 这是Country Dropdown Selectedchange事件

(document).ready(function () { // this is Country Dropdown Selectedchange event

（ ＃Country）。change（ function （）{

("#Country").change(function () {

（ #State）。empty（）;

("#State").empty();

这篇关于在mvc4我使用下拉框但它不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！