Question

我试图与ViewComponents接触，但是在尝试单击按钮时重新加载ViewComponent时遇到麻烦。解决这个问题的正确方法是什么？

最初在加载页面上看起来像这样

我的控制器中有

  public IActionResult ReloadViewComponent(int characterRegionId, int materialTypeId)
  {           
      return ViewComponent("MarketOrderComponent", new { characterRegionId, materialTypeId});
  }

在剃刀视图中，我正在将参数传递给ReloadViewComponent方法

<td><button class="btn btn-sm btn-outline-primary" value="@material.MaterialTypeID" onclick="location.href='@Url.Action("ReloadViewComponent", "BlueprintBreakdown", new { Model.CharacterRegionId, material.MaterialTypeID })'">View</button></td>

完整的剃刀视图

<body>
<div class="row" style="margin-top:5px;">
    <div class="col-lg-4 col-md-12">
        <div class="card" style="margin-bottom:0; ">
            <div class="header" style="margin-bottom:55px;">                    
                <h2 class="text-primary">Blueprint Breakdown</h2>
            </div>
            <div class="body">
                <div>
                    <h5 class="text-center">@Model.BlueprintName</h5>
                </div>
                <div class="row text-center">
                    <div class="col-6 border-right pb-4 pt-4" style="padding-top:0px !important; padding-bottom:0px !important;">
                        <img src="@Model.ImageUrl" alt="@Model.BlueprintName">
                    </div>
                    <div class="col-6 pb-4 pt-4" style="padding-top:0px !important; padding-bottom:0px !important;">
                        <img src="@Model.ProductImageUrl" alt="@Model.BlueprintName">
                    </div>
                </div>
                <div class="text-center" style="margin-top:5px;">
                    <text style="font-size:small;">Material Quantity Based on Manufacturing Efficiency</text>
                    <br />
                    <text style="font-size:small;">Price Based on Lowest Region Market Sell Orders</text>
                    <br />
                    <text style="font-size:small;">Current Region is <span class="text-green">@Model.CharacterRegionName</span></text>
                </div>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-hover table-custom spacing5">
                <thead>
                    <tr>
                        <th></th>
                        <th>Material</th>
                        <th>Quantity</th>
                        <th>Price</th>
                        <th>Market</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var material in Model.RequiredMaterials)
                    {
                        <tr class="text-cente" style="font-size:small;">
                            <td><img src="@(String.Format("{0}{1}{2}", "https://imageserver.eveonline.com/Type/", material.MaterialTypeID, "_32.png"))" /></td>
                            <td>@material.TypeName</td>
                            <td>@material.Quantity</td>
                            <td>@material.MaterialCost</td>
                            <td><button class="btn btn-sm btn-outline-primary" value="@material.MaterialTypeID" onclick="location.href='@Url.Action("ReloadViewComponent", "BlueprintBreakdown", new { Model.CharacterRegionId, material.MaterialTypeID })'">View</button></td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>  
    <div class="col-lg-8 col-md-12">
        @await Component.InvokeAsync("MarketOrderComponent", new { Model.CharacterRegionId, Model.RequiredMaterials.First().MaterialTypeID })
    </div>
</div>

但是当单击视图按钮以重新加载ViewComponent时，将呈现为这样。

Answer 1

请注意，使用ViewComponent() controller method，您的客户只会获得视图的组成部分。因此，您应该发送ajax请求并动态替换右侧内容，而不是更改浏览器的当前位置。

添加一个id='MarketOrderComponent'属性，以便我们以后可以引用该元素：

<div id='MarketOrderComponent' class="col-lg-8 col-md-12">
    @await Component.InvokeAsync("MarketOrderComponent", new { Model.CharacterRegionId, Model.RequiredMaterials.First().MaterialTypeID })
</div>

并更改按钮单击事件处理程序以发送ajax请求。例如，为了重新加载市场订单组件，您可以如下更改代码：

<script>
    function reload(url){
        return $.ajax({ 
            method:"get", 
            url:url, 
            success:function(resp){ $('#MarketOrderComponent').html(resp);},
        });
    }
</script>

<div class="card" style="margin-bottom:0; ">
    ...
</div>

<div class="table-responsive">
    ...
        <tbody>
            @foreach (var material in Model.RequiredMaterials)
            {
                <tr class="text-cente" style="font-size:small;">
                    <td><img src="@(String.Format("{0}{1}{2}", "https://imageserver.eveonline.com/Type/", material.MaterialTypeID, "_32.png"))" /></td>
                    <td>@material.TypeName</td>
                    <td>@material.Quantity</td>
                    <td>@material.MaterialCost</td>
                    <td>
                        <button class="btn btn-sm btn-outline-primary" 
                            value="@material.MaterialTypeID" 
                            onclick="var link='@Url.Action("ReloadViewComponent", "BlueprintBreakdown", new { Model.CharacterRegionId, material.MaterialTypeID })'; event.preventDefault(); reload(link)" 
                        >
                            View
                        </button>
                    </td>
                </tr>
            }
        </tbody>
    ...
</div>
<div id='MarketOrderComponent' class="col-lg-8 col-md-12">
    @await Component.InvokeAsync("MarketOrderComponent", new { Model.CharacterRegionId, Model.RequiredMaterials.First().MaterialTypeID })
</div>

asp.Net Core ViewComponent不显示CSS

1 个答案: