如何使用 .cshtml 剃须刀文件作为 ui-grid 单元格模板？

Posted 2023-03-27

【中文标题】如何使用 .cshtml 剃须刀文件作为 ui-grid 单元格模板？

【英文标题】：How to use .cshtml razor file as ui-grid celltemplate?

【发布时间】：2021-10-06 14:55:39

【问题描述】：

在我的 ASP.net MVC Web 项目中，我使用 AAngularJS ui-grid 来获得更好的数据显示选项。 在其他 razo 视图页面中，我使用了部分视图加载

<partial name="TestPartialView" model="data.TestPartialData" /> 现在在 ui-grid 的列中，我也想使用局部视图。

```$scope.columns = [
        
            name: 'TestColumn',
            field: '..xxx',
            width: '30%',
            cellTemplate: 'Templates/TestPartialView.cshtml'
        ,]  ```

但我真的不知道该怎么做。同样在我的 TestPartialView.cshtml 中，我需要注入一个模型类。 作为当前的替代方案，我在 javascript 文件中再次定义了模板。但我想重用模板。 有什么想法吗？

更新：

所以上面的截图是我的场景。我将有一个网格列统计。在单元格中，我将显示基于某些行特定模型数据的条形图。 是的，我已经通过列定义做到了这一点（如图所示）。 现在类似的条形图我使用了一个 .cshtml 文件，其中传递了模型类并部分加载了视图。 我也想在网格中重用她的部分视图。

【参考方案1】：

我认为您可以创建一个控制器来返回您的目标视图。然后您调用此端点以获取视图作为响应并将其添加到您的 cellTemplate 中。

$http.get("https://localhost:44391/Home/GetTemplateFromPartial")
  .then(function(response) 
      $scope.columns = [
        
            name: 'TestColumn',
            field: '..xxx',
            width: '30%',
            cellTemplate: $sce.trustAsHtml(response.data)
        ]; 

        console.log($scope.columns);
  );

Controller 会返回 IActionResult

public IActionResult GetTemplateFromPartial()

    LocalMallUser user = new LocalMallUser
        
            id = 1,
            age = 18,
            user_name = "test_user"
        ;
        return PartialView("_SayHello", user);

_SayHello.cshtml：

@model WebApplication1.Models.LocalMallUser

<h1>@Model.user_name</h1>
<h2>@Model.age</h2>

【讨论】：

感谢您的回答。 - 我怎样才能通过我在问题中已经提到的模型 "data.TestPartialData" 。 - 因为我想在网格视图列中使用它，所以创建部分视图的请求将是行数。

@rasoo 我不确定我是否在某些地方误解了，但我认为可以将模型数据添加到控制器中（使用模型返回视图）。如果我犯了错误，请指出来吗？

我想你已经理解我的问题了 :) 但为了更好地理解我已经用我的真实场景更新了主帖。

嗯，我真的很难理解你在问题中更新了什么。您的目标是什么或问题出在哪里？