如何在选择列表中进行不显眼的 Ajax 调用？-解网

问：

我正在尝试在我的应用程序中设置一个下拉列表，允许用户根据元数据是否被归类为 PII 来选择元数据列表。我遇到的问题是如何从根本上将 @Ajax.ActionLink（）背后的逻辑合并到我的选项结果中并在不导航到 partialview 的情况下执行它们（因为我希望它显示在当前页面中）。

查看页面：

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

我将不胜感激任何反馈。

C# ASP.NET-MVC 剃刀不不显眼的 ajax

我的第一个想法是 - ajax 调用是否真的在进行 - 如果您在浏览器开发工具中观看，您会看到网络活动吗？OnChange 正在设置 location.href，但它不会触发 ajax 触发，对吧？创建一个锚标记，单击该标记时会被不显眼的库挂钩。通过将不显眼的数据属性添加到选项链接不会自动使它们成为可单击的项目。我的建议是先弄清楚如何手动执行此操作，然后看看是否可以在之后重构为不显眼。@Ajax.ActionLink

答：

0赞 C Murphy 10/26/2019 #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（）帮助程序，以便实现与我的初始设置类似的功能。如果有人碰巧弄清楚如何做到这一点，请发表评论或回答！

上一个：重新初始化不显眼的 jquery 验证

下一个：Div 使用不显眼的 javascript 打印

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

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

评论