Can't seem to render partial view - controller not being hit - asp.net-mvc

Question

I have a drop down list that I want to render a partial view depending on what item is chosen. For this, I am using jquery and MVC 5. After having put breakpoints in my controller, my Url.Action() call doesn't seem to be getting there when I change the dropdown selection. I'm not sure I understand how to use route values correctly so that could be it. This is what I've got:
Relevant part of starting view
<div>
#if (role == "admin")
{
<p>Choose state to view:</p>
<select id="stateList">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="IA">Iowa</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MD">Maryland</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="NC">North Carolina</option>
<option value="NE">Nebraska</option>
<option value="NJ">New Jersey</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="SC">South Carolina</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</select>
<div id="#partialPlaceHolder">
</div>
}
JQuery to get to controller
//Load partial view when an admin changes the state selection
$('#stateList').change(function () {
var selection = $(this).val();
var url = '#Url.Action("StateData", "Visualizations")' + '?StateID=' + selection;
//url ends up looking like this: /Visualizations/StateData?StateID=IA (or some other state abbreviation)
$("#partialPlaceHolder").load(url, function () {
console.log("it worked");
});
});
Model
public class VisualizationModels
{
public String StateID { get; set; }
}
Controller for generating partial view
public ActionResult StateData(string stateID)
{
VisualizationModels vm = new VisualizationModels();
vm.StateID = stateID;
return PartialView("_SpecificStateData", vm);
}
UPDATE
Oddly enough, if I use $.get instead of #Url.Action, I will actually hit the controller action, it just won't render the partial view now for some reason...
//Load partial view when an admin changes the state selection
$('#stateList').change(function () {
var selection = $(this).val();
var url = '/Visualizations/StateData?StateID=' + selection;
$.get(url, function (data) {
$('#partialPlaceHolder').html(data);
});

Answer 1

Cannot you use something like this
var url = '#Url.Action("StateData", "Visualizations", new { StateID = selection})'
instead of
var url = '#Url.Action("StateData", "Visualizations")' + '?StateID=' + selection;
and check if this is working. Because if your parameter would not be passed correctly. Your route handler will not able to map correct action method.

Answer 2

I figured it out... it's the stupidest, peskiest little issue. In my main view (at the top of my original post) I had typed the id of my div wrong...
Wrong:
<div id="#partialPlaceHolder"></div>
Right:
<div id="partialPlaceHolder"></div>
Everything is working as expected now. Final JS looks like this:
//Load partial view when an admin changes the state selection
$('#stateList').change(function () {
var selection = $(this).val();
var url = '#Url.Action("StateData", "Visualizations", new { StateID = "_state" })'.replace("_state", selection);
$("#partialPlaceHolder").load(url, function () {
console.log("it worked");
});
});