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

Question

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

Answer 1

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>