Now my javaScript code is something like this where i have written code to fetch city from controller then change locality as the city name changes and change sub locality name with change in locality name-----

The reason your $("#Locality").change(function () { is not working is because the following line

data: { id: $("Locality").val() },

return undefined. It needs to be

data: { id: $("#Locality").val() }, // add hash

however the correct approach is to use

data: { id: $(this).val() },

in order to avoid traversing the DOM again to get the element with id="Locality"

There are numerous other issues with your code, particularly in respect to validation and returning the view if ModelState is invalid

When generating List<SelectListItem>, do not add the label option
(i.e. sublocalities.Add(new SelectListItem { Text = "Select your
sublocality", Value = "0" });). You are giving the label option a
value which means that its always valid. As it currently is, you may
as well delete the @Html.ValidationMessageFor() associated with
each dropdown.

Never give the SelectList the same name as the property your
binding to (in your case City)

In your LoadLocalities() and LoadSubLocalities() methods you
first create List<SelectListItem> and then create a new
SelectList (which is IEnumerable<SelectListItem>) so its just
unnecessary extra overhead. In any case the client has no knowledge
of what a C# class is and you just returning twice as much data
across the wire as is necessary (the Selected,Disabled and
Group properties which you never use). Instead just pass back a
collection of anonymous objects containing 2 properties (for the
option value and text)

Email codedump link for Cascading drop down list (SubLocality) not working in asp.net mvc