How to make an Unobtrusive Ajax call within a Select List?

Question

I am attempting to set up a drop down in my App that allows users to select a list of metadata depending upon whether or not it is classified as PII. The problem I am running into is how to essentially incorporate the logic behind @Ajax.ActionLink() into my option results and execute them without navigating to the partialview (as I want it to be displayed within the current page).

View Page:

    <div class="col-md-4">
        <select class="form-control" onchange="location.href = this.value">
            <option value="">Select a PII Designation List</option>
            <option data-ajax="true" data-ajax-begin="ClearMetadataResults" data-ajax-loading="#divMetadataLoading" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#divMetadata" value='@("/Applications/Metadata?applicationName=" + Model.ApplicationName + "&isPii=" + true)'>Yes</option>
            <option data-ajax="true" data-ajax-begin="ClearMetadataResults" data-ajax-loading="#divMetadataLoading" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#divMetadata" value='@("/Applications/Metadata?applicationName=" + Model.ApplicationName + "&isPii=" + false)'>No</option>
        </select>
    </div>

I would greatly appreciate any feedback.

Answer 1

After Andy Stagg's comment, I decided to instead set up an Ajax.BeginForm() that would be triggered by a selection of an option, which ended up working for me.

Here is the resultant code:

<div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4">
    @{using (Ajax.BeginForm("Metadata", "Applications", new
      {
          applicationName = Model.ApplicationName,
          isPii = Model.SampleMetadataTable.IsPii
      }, new AjaxOptions
      {
          HttpMethod = "GET",
          UpdateTargetId = "divMetadata",
          InsertionMode = InsertionMode.Replace,
          LoadingElementId = "divMetadataLoading",
          OnBegin = "ClearMetadataResults"
      }, new
      {
          id = "metadataDropdownForm"
      }))
      {
        @Html.HiddenFor(model => model.ApplicationName)
        @Html.HiddenFor(model => model.SampleMetadataTable.IsPii)
        <select class="form-control" id="metadataDropdown" onchange="SubmitMetadataForm(this.value)">
            <option value="">Select a PII Designation List</option>
            <option value=true >Yes</option>
            <option value=false >No</option>
        </select>
      }}
    </div>
    <div class="col-md-4"></div>
</div>

And here:

<script>
function SubmitMetadataForm(x) {
    $("#SampleMetadataTable_IsPii").val(x);

    var boolValue = "";

    //console.log("Selected Dropdown option value = " + x);
    //console.log("Selected Dropdown option data type = " + typeof(x));

    //if(x == "true") {
    //    boolValue = "true";
    //}
    //else {
    //    boolValue = "false";
    //}

    //alert("Value of Application Name = " + $("#ApplicationName").val() + " and Value of IsPii = " + boolValue);

    $("#metadataDropdownForm").submit();
}

function ClearMetadataResults() {
    $("#divMetadata").empty();
}
</script> 

Ideally, I would have liked to find out how to set up my own Ajax.DropdownList() helper so as to achieve something similar to my initial setup. If anyone happens to figure out how to do this, please comment or answer!