如何在 Select 列表中进行不显眼的 Ajax 调用？

Question

我正在尝试在我的应用程序中设置一个下拉菜单，允许用户select 元数据列表，具体取决于它是否被归类为 PII。我运行遇到的问题是如何将 @Ajax.ActionLink() 背后的逻辑本质上合并到我的选项结果中并执行它们 而无需 导航到部分视图（如我希望它显示在当前页面中）。

查看页面：

    <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>

如果有任何反馈，我将不胜感激。

Answer 1

在 Andy Stagg 的评论之后，我决定改为设置一个 Ajax.BeginForm()，它将由选择一个选项触发，最终对我有用。

这是结果代码：

<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>

这里：

<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>

理想情况下，我希望了解如何设置我自己的 Ajax.DropdownList() 助手，以便实现与我的初始设置类似的功能。如果有人碰巧弄清楚如何做到这一点，请发表评论或回答！

如何在 Select 列表中进行不显眼的 Ajax 调用？

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

c#

asp.net-mvc

razor

unobtrusive-javascript

unobtrusive-ajax