Binding country state city in mvc

CountryRepository.cs
--------------------------
public class CountryRepository : Repository<Country>
    {
        private DataBaseContext _context = null;
        public CountryRepository(DataBaseContext context, UnitOfWork _uom)
            : base(context, _uom)
        {
            _context = context;
        }

        public List<Country> GetAllCountries()
        {
            return base.GetAll().ToList().OrderBy(x => x.SortCode).ThenBy(y => y.CountryName).ToList();
            //.OrderBy(x => new { x.SortCode }).ThenBy(y => y.CountryName)
        }

        public string GetCountryCode(int countryId)
        {
            return base.GetAll(x => x.CountryId == countryId).Select(x => x.CountryCode).ToString();
        }

        public string GetCountryName(int countryId)
        {
            return base.Get(x => x.CountryId == countryId).CountryName;
        }
    }


StateRepository.cs
-----------------------
 public class StateRepository : Repository<State>
    {
        private DataBaseContext _context = null;
        public StateRepository(DataBaseContext context, UnitOfWork _uom)
            : base(context, _uom)
        {
            _context = context;
        }

        public List<State> GetAllStates(int countryId)
        {
            return base.GetAll(x => x.CountryId == countryId).ToList();
        }

        public List<State> GetStateCode()
        {
            return base.GetAll().ToList();
        }      
    }

HomeController.cs
-------------------------


  public void BindDropDownListShipment(Model model)
        {
            UnitOfWork uow = new UnitOfWork();      
            //Bind Country For From Address
            model.CountryList = GenericSelectListItems.Instance.GetAllCountries();
            //Bind State For From Address                            
            model.StateList = GenericSelectListItems.Instance.GetAllStates(model.CountryId);          
        }

View
------------
    <div class="form-group">
  <label>Country<span class="text-red">*</span></label>
  @Html.DropDownListFor(m => m.CountryId, Model.CountryList, "Select Country", new { @class = "form-control  required", @data = "Country" })
  </div>
  </div>                                    
  <div class="col-md-4">
  <div class="form-group">
  <label>State<span class="text-red">*</span></label>
  @Html.DropDownListFor(m => m.StateId, Model.StateList, "Select State", new { @class = "form-control" })
 </div>
 </div>


 //Add new option
            function AddNewOptionToStateDropdown(id) {
                var newOption1 = $('<option selected="selected">');
                newOption1.attr('value', 0).text("Select State");
                $('#' + id).append(newOption1);
            }


//Get states from country
                $('#CountryId').change(function () {
                    $('#StateId').empty();
                    AddNewOptionToStateDropdown('StateId');

                    if (isNaN(parseInt($(this).val()))) {
                        return;
                    }
                        var CountryList = $('#CountryId :selected').text();
                        $('#StateId').css('pointer-events', 'auto');
                        $.ajax({
                            method: "GET",
                            url: "@Url.Action("GetStateByCountryAndZip", "Home")",
                            data: { 'CountryName': CountryList },
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (result) {
                                if (result != undefined && result != null) {
                                    $('#City').empty();
                                    $('#City').val(result["City"]);
                                    var newOption1 = $('<option selected="selected">');
                                    newOption1.attr('value', result["State"]).text(result["State"]);
                                    $('#StateId').append(newOption1);
                                }
                            },
                            failure: function () {
                            }
                        });
                    }
                });