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.

My first thought is- is the ajax call actually being made- if you watch in the browser dev tools, do you see network activity? OnChange is setting the location.href, but it's not triggering the ajax to fire off, right? The `@Ajax.ActionLink` creates an anchor tag, which when clicked is hooked by the unobtrusive library. By adding the unobtrusive data attributes to the option link doesn't automatically make them a clickable item. My suggestion would be to figure out how to do this manually first, and then see if you could refactor to unobtrusive afterward. — Andy Stagg, Oct 24 '19 at 21:44

score 0 · Accepted Answer · answered Oct 25 '19 at 18:16

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!

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

1 Answers1