Как проверить элемент dropdownlist с проверкой на стороне клиента с помощью MVC?

Question

Я хотел бы реализовать проверку на стороне клиента для выпадающего списка.

Model 

public partial class Beach
    {
        public int Beach_ID{ get; set; }
        [Required]
        public string NAME { get; set; }

        [Required]
        public Nullable<int> LOCATION_ID { get; set; }


        public virtual LOCATION LOCATION { get; set; }
    }

Controller

 public ActionResult Edit(int? id)
        {

            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            BEACH BEACH  = db.BEACH .Find(id);
            if (BEACH  == null)
            {
                return HttpNotFound();
            }
             ViewBag.LOCATION = new SelectList(db.LOCATION, "LOCATION_ID", "LOCATION_NAME", BEACH.LOCATION_ID);
            return View(BEACH);
        }

View

 <div class="form-group">
            <div class="col-md-10">
                @Html.DropDownList("LOCATION", null, "Select Location", htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.LOCATION_ID, "", new { @class = "text-danger" })
            </div>
        </div>

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

Answer 1

Проверка выпадающего jvery-запроса asp.net mvc

Вы можете обратиться по ссылке выше, это может помочь выяснить вашу проблему.

Answer 2

Вы можете использовать JQuery для проверки при нажатии кнопки.

Вы можете добавить идентификатор в свой DropDownList следующим образом

  @Html.DropDownList("LOCATION", null, "Select Location", htmlAttributes: new {  @id="dropdownid",@class = "form-control" })

И написать следующий код в теге script.

 $('#Submit').click(function(){
    var ddlvalue= $("#dropdownid option:selected").val();
    if(ddlvalue!='-1')
    {    
      //Do your work.
    }
  else
  alert('Please select Location");
   });