javascript - 对每个带有 class/id 的 div 使用 ajax

Question

所以我有一个asp.net core 2项目，其中有一个带有以下html的主视图:

<div>
@foreach (var factory in Model.factoryList)
{
    <div class="factory-panel-content">
        <div class="factory-main-info">
            @factory.Name
            <div class="city-name">@factory.CityName</div>
            <div class="factory-some-value">
                @factory.someValue
            </div>

        </div>
        <div id="factory-plot-content">

        </div>
    </div>
}

以及一个部分 View (仅限 html)

<div class="row">
<div class="col-md-4">
    <div id="flot-line-chart" style="height: 100px"></div>
</div>
<div class="col-md-2">
    <div id="flot-pie-chart" style="height: 100px"></div>
</div>
<div class="col-md-2">
    <div id="gauge"></div>
</div>

我需要的是在我的每个工厂的主视图中获取每个#factory-plot-content的部分 View 。使用像下面这样的 ajax 仅更改 #factory-plot-content 之一 - 第一个(我明白为什么)，但我不知道为工厂 div 调用 ajax.get 的最佳方法是什么。

我的ajax:(我在母版页中调用它。在查找工厂时调用它会很棒)

        $(document).ready(function () {

        $.ajax({
            url: '/home/ShowShortFactoryInfo',
            success: function (data) {
                $("#factory-plot-content").html(data);
            }
        });
    })

我的第一个想法是制作自定义 ID，例如“factory-plot-content-@Model.FactoryName”，但我有点确定这是达到我需要的结果的一种丑陋方法。

Answer 1

您可以尝试使用以下代码:

<div>
<script>
    var factoryNumber = 0;
</script>
@foreach (var factory in Model.factoryList)
{    
    <div class="factory-panel-content">
        <div class="factory-main-info">
            @factory.Name
            <div class="city-name">@factory.CityName</div>
            <div class="factory-some-value">
                @factory.someValue
            </div>
        </div>
        <div class="partial-data" id="factory-plot-content">
            <script>
                getPartialData(function(data){
                    let partialData = $(".partialData")[factoryNumber];
                    partialData.html(data);
                    factoryNumber++;
                });
            </script>
        </div>
    </div>
}
<script>
function getPartialData(cb){
    $.ajax({
        url: '/home/ShowShortFactoryInfo',
        success: function (data) {
            cb(data);
        }
    });
}
</script>

希望有帮助:)