CODEWITHSUNDEEP
angularjsasp.net-mvcasp.net-coreangular-ui-gridui-grid
rasoo
rasoo

Reputation: 73

How to use .cshtml razor file as ui-grid celltemplate?

In my ASP.net MVC web project, I am using ANgularJS ui-grid for better data display option. In the other razo view pages I have used partial view load

<partial name="TestPartialView" model="data.TestPartialData" /> Now in the ui-grid, in a column I also want to use the partial view.

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

But I really dont know how to do this. Also in my TestPartialView.cshtml, I need to inject a model class. As a current alternative, I have defined the template again in the javascript file.But I want reuse the template. Any idea?

Update: enter image description here

So the above screenshot is my scenario. I will have a grid column statistics. And in the cell I will show bar chart based on some row specific model data. Yes I have done this (as seen on the picture) with column definition. Now the similar bar chart I have used a .cshtml file where a model class is passed and the view is loaded partially. I want to reuse the partial view her in the grid also.

Upvotes: 0

Views: 280

Answers (1)

Tiny Wang
Tiny Wang

Reputation: 16076

I think you can create a Controller to return your target View. And then you call this endpoint to obtain the view as the response and add it into your 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);
  });

The Controller will return 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>

Upvotes: 0

Related Questions