Выпадающий список с ajax сгенерированными параметрами отображает все города для разных штатов в режиме редактирования, пока выбранное состояние не изменится, оно не станет нормальным - PullRequest
1 голос
/ 17 апреля 2020

это происходит только в первый раз, когда отображается вид редактирования, но после изменения выбранного состояния становится нормальным, как управлять раскрывающимся списком, отображающим только города с указанным c состоянием в представлении редактирования? Проблема в действии редактирования или в ajax скрипт? Может быть, мой вопрос прост, но я хочу узнать, я вам благодарен? Сначала я использую код asp. net mvc 5. Ниже приведено описание действия моего контроллера и сценариев. модели в предыдущем вопросе

    //Donator Controller
        public class DonatorsController : Controller
        {
            private ApplicationDbContext db = new ApplicationDbContext();

            // GET: Donators
            public ActionResult Index()
            {
                var donators = db.Donators.Include(d => d.cit).Include(d => d.state);
                return View(donators.ToList());
            }

            // GET: Donators/Details/5
            public ActionResult Details(int? id)
            {
                if (id == null)
                {
                    return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
                }
                Donator donator = db.Donators.Find(id);
                if (donator == null)
                {
                    return HttpNotFound();
                }
                return View(donator);
            }


            // GET: Donators/Edit/5
            public ActionResult Edit(int? id)
            {
                if (id == null)
                {
                    return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
                }
                Donator donator = db.Donators.Find(id);
                if (donator == null)
                {
                    return HttpNotFound();
                }
                ViewBag.StateId = new SelectList(db.state, "StateId", "StateName", donator.StateId);
                ViewBag.CityId = new SelectList(db.city, "CityId", "CityName", donator.CityId);
                return View(donator);
            }

            // POST: Donators/Edit/5
            // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
            // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
            [HttpPost]
            [ValidateAntiForgeryToken]
            public ActionResult Edit([Bind(Include = "Id,Name,gender,Age,BloodType,StateId,CityId")] Donator donator)
            {
                if (ModelState.IsValid)
                {

                    db.Entry(donator).State = EntityState.Modified;
                    db.SaveChanges();
                    return RedirectToAction("Index");
                }

                ViewBag.StateId = new SelectList(db.state, "StateId", "StateName", donator.StateId);
                ViewBag.CityId = new SelectList(db.city, "CityId", "CityName", donator.CityId);

                return View(donator);
            }

            public JsonResult Citylist(int id)
            {
                var city = from c in db.city
                           where c.StateId == id
                           select c;
                return Json(new SelectList(city.ToArray(), "CityId", "CityName"), JsonRequestBehavior.AllowGet);
            }
}

    //Edit View


<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>    l CCR.Models.Donator

    @{
        ViewBag.Title = "Edit";
    }

    <h2>Edit</h2>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")

    <script type="text/jscript">
        $(function () {
           

            $('#State').change(function () {
                $.getJSON('/Donators/Citylist/' + $('#State').val(), function (data) {
                    var items = '<option>Select a City</option>';
                    $.each(data, function (i, city) {
                        items += "<option value='" + city.Value + "'>" + city.Text + "</option>";
                    });
                    $('#city').html(items);
                });
            });
        });
    </script>

    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
        
        <div class="form-horizontal">
            <h4>Donator</h4>
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            @Html.HiddenFor(model => model.Id)

            <div class="form-group">
                @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.gender, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EnumDropDownListFor(model => model.gender, htmlAttributes: new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.gender, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Age, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Age, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.BloodType, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.BloodType, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.BloodType, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.StateId, "StateId", htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("StateId", null, htmlAttributes: new { @class = "form-control", id = "State" })
                    @Html.ValidationMessageFor(model => model.StateId, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.CityId, "CityId", htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("CityId", null, htmlAttributes: new { @class = "form-control", id = "city" })
                    @Html.ValidationMessageFor(model => model.CityId, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Save" class="btn btn-default" />
                </div>
            </div>
        </div>
    }

    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>

1 Ответ

0 голосов
/ 18 апреля 2020

Попробуйте связать раскрывающийся список состояний со значением модели, как показано ниже

@Html.DropDownListFor(x=> x.StateId, ViewBag.StateId, htmlAttributes: new { @class = "form-control", id = "State" })

переименуйте ViewBag.StateId в Viewbag.States, потому что его список выбора для состояний То же самое можно сделать с раскрывающимся списком Город.

Еще одна вещь, которую я хочу вам сказать: написать javascript код внизу страницы и написать $('#State').change событие в document.ready вместо автозапуска javascript function

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...