How to Validate Cascading Selectlist

jewel 1,006 Reputation points
2023-10-16T05:56:45.74+00:00

I have created two selectlists. Changing the value of one will show the value of the other.

The function is working correctly but the validation is not working. <span asp-validation-for="VenderID" class="text-danger"></span> an error message does not show .

But if i use alert, then the alert of the first selectlist works, even if the next selectlist is empty, the program continues without showing the alert or <span asp-validation-for="CompanyID" class="text-danger"></span> error message.

It would be helpful if an experienced person could solve the issue.


@model RedwoanEntDistributor.Models.Product.tbl_product 
<div >     
	<select asp-for="VenderID" asp-items="ViewBag.vender" id="VenderDrop">         
		<option value="0">---Select Vender Name----</option>     
	</select> 
</div> 
<div> 	
	<span asp-validation-for="VenderID" class="text-danger"></span> 
</div> 
<div> 	
	<select asp-for="CompanyID" id="CompanyDrop"> 		
		<option value="0">---Select Company Name----</option> 	
	</select> 
</div> 	 	
<div> 	
	<span asp-validation-for="CompanyID" class="text-danger"></span> 	
</div> 	
<div> 	
	<button id="btnadd" onclick="addata()">Save</button> 	
</div>  

<script>  	
	$('#VenderDrop').change(function () 
	{ 
		var id = $(this).val(); 		
		$('#CompanyDrop').empty(); 		
		$('#CompanyDrop').append('<option>---Select Company Name----</option>');  		
		$.ajax({
			url: '/Home/Compnayname?id=' + id, 			
			success: function (result) { 				
				$.each(result, function (i, data) { 					
				$('#CompanyDrop').append('<option value=' + data.company_ID + '>' + data.compnay_Name + '</option>'); 
				}); 			
			} 		
		});  	
	}); 	

	function addata() {  		
		if ($('#VenderDrop').val() == 0) { 		    
			alert("Select Vender Name") 		    
			return false;
		}; 		
		if ($('#CompanyDrop').val() == 0) 
		{
			alert("Select Company Name") 			
			return false;
		};  		
		alert("program is running")}  
</script>

public IActionResult Index(){             
	ViewBag.vender = new SelectList(_context.tbl_Venders.ToList(), "vender_ID", "vender_Name");                         
	return View();         
}
         
public JsonResult Compnayname(int id){
	var compnay = _context.tbl_Compnays.Where(x => x.vender_ID == id).ToList();             
	return Json(compnay);         
}

public int productID { get; set; }   
       
[Required(ErrorMessage = "Select Vender Name")]         
public int VenderID { get; set; }   
      
[Required(ErrorMessage = "Select Company Name")]         
public int CompanyID { get; set; }
ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,612 questions
0 comments No comments
{count} votes

Accepted answer
  1. Tiny Wang-MSFT 2,731 Reputation points Microsoft Vendor
    2023-10-16T09:35:04.7366667+00:00

    Hi jewel, please take a look at my test result and see if it matches your requirement.

    Animation6

    my code snippet:

    @model WebAppMvc.Models.HelloViewModel;
    
    <form asp-controller="Hello" asp-action="Index" method="post">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="UserName" class="control-label"></label>
            <input asp-for="UserName" class="form-control" />
            <span asp-validation-for="UserName" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="CountryId" class="control-label"></label>
            <select id="selectCountry" class="form-control" asp-for="CountryId"
                    asp-items="@(new SelectList(Model.Countries, nameof(Country.Id), nameof(Country.Name)))">
                <option value="" hidden disabled selected>Select a country</option>
            </select>
            <span asp-validation-for="CountryId" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="CityId" class="control-label"></label>
            <select id="selectCity"  class="form-control" asp-for="CityId"
                    asp-items="@(new SelectList(Model.Cities, nameof(City.Id), nameof(City.Name)))">
                <option value="" hidden disabled selected>Select a city test</option>
            </select>
            <span asp-validation-for="CityId"></span>
        </div>
        <div class="form-group">
            <input type="submit" value="Save" class="btn btn-primary" />
        </div>
    </form>
    
    @section Scripts{
        <script>
            $('#selectCountry').change(function () {
                var id = $(this).val();
                $('#selectCity').empty();
                $('#selectCity').append('<option value="0">---Select a city----</option>');
                $.ajax({
                    url: '/Hello/getCities?id=' + id,
                    success: function (result) {
                        console.info(result);
                        $.each(result, function (i, data) {
                            console.info(i);
                            console.info(data);
                            $('#selectCity').append('<option value=' + data.id + '>' + data.name + '</option>');
                        });
                    }
                });
            });
        </script>
    }
    

    My controller and model view.

    public class HelloController : Controller
    {
        public IActionResult Index()
        {
            HelloViewModel model = new HelloViewModel
            {
                Countries = new List<Country>
                {
                    new Country { Id = 1, Name = "Country1" },
                    new Country { Id = 2, Name = "Country2" }
                },
                Cities = new List<City> { 
                    new City { Id = 11, Name="City1",CountryId = 1},
                    new City { Id = 22, Name="City2",CountryId = 1},
                }
            };
        
            return View(model);
        }
    
        [HttpPost]
        public IActionResult Index(HelloViewModel model) {
            HelloViewModel temp = new HelloViewModel
            {
                Countries = new List<Country>
                {
                    new Country { Id = 1, Name = "Country1" },
                    new Country { Id = 2, Name = "Country2" }
                },
                Cities = new List<City> {
                    new City { Id = 11, Name="City1",CountryId = 1},
                    new City { Id = 22, Name="City2",CountryId = 1},
                }
            };
            return View(temp);
        }
    
    
        public List<City> getCities(int id) {
            var res = new List<City>();
            if (id == 1)
            {
                return new List<City> {
                    new City { Id = 11, Name="City1",CountryId = 1},
                    new City { Id = 22, Name="City2",CountryId = 1},
                };
            }
            else {
                return new List<City> {
                    new City { Id = 33, Name="City3",CountryId = 2},
                    new City { Id = 44, Name="City4",CountryId = 2},
                };
            }
        }
    }
    
    public class Country
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
    
    public class City
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int CountryId { get; set; }
    }
    
    public class HelloViewModel {
        [Required]
        public string UserName { get; set; }
        //[Required(ErrorMessage = "Select a country11")]
        [Range(1, int.MaxValue, ErrorMessage = "Select a country11")]
        public int CountryId { get; set; }
    
        public List<Country> Countries { get; set; }
        //[Required(ErrorMessage = "Select a city11")]
        [Range(1, int.MaxValue, ErrorMessage = "Select a city11")]
        public int CityId { get; set; }
        public List<City> Cities { get; set; }
    }
    
    
    

    In your code, you have validation both in the frontend and the backend, what you have in "addata()" is using js to validate the select item, it's also ok, but in this scenario, the "[Required(ErrorMessage = "Select Vender Name")]" doesn't make sense. When you use form submit like what I shared, the model validation will work.

    1 person found this answer helpful.
    0 comments No comments

0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.