MVC Razor Add String In @Html.Raw .net

alfinete

Power Member
boa tarde



a Função Js que funciona sem parametros na boa , passando os parametros do MOdel , e o Id do grafico

"CvDoughnutMake"

assim para cada grafico tenho de fazer uma função
o meo obejctivo seria fazer uma função com os paramnetros
  • id
  • labels
  • data
  • backgroundColor
  • hoverBackgroundColor
de forma poder apenas chamar a função para cada grafico diferente
________________________________________________________________________________________
Código:
  function init_chart_doughnut() {
  if ("undefined" != typeof Chart && (console.log("init_chart_doughnut"), $("#CvDoughnutMake").length)) {
  var a = {
  type: "doughnut",
  tooltipFillColor: "rgba(51, 51, 51, 0.55)",
  data: {
  labels:JSON.parse(@Html.Raw(Json.Encode(@Model.ArrayLabels))),

  datasets: [{
  data: @Model.ArrayPercentages,
  backgroundColor: JSON.parse(@Html.Raw(Json.Encode(@Model.ArrayBackgroungColors))),
  hoverBackgroundColor:JSON.parse(@Html.Raw(Json.Encode(@Model.ArrayColorsMouseOver))),
  }
  ]
  },
  options: {
  legend: !1,
  responsive: !1
  }
  };
  $("#CvDoughnutMake").each(function () {
  var e = $(this);
  new Chart(e, a)
  })
  }
  }

queria passar esses parametros na assinatura da função JS
não consigo por uma var do tipo string dentro de um Html Raw
_____________________________________________________________________________
Código:
function init_chart_doughnut(CanvasId, ALabels, APercentages, ABckColor, AMouseBckColor) {
  var LblsEncode = Json.Encode(ALabels);
  var LblsRaw = '';
  @{
  @:imgTopObj = '@Html.Raw(LblsEncode)';
  }
}

o meu objectivo é o seguinte
passar um param na função de passar no Html.Raw

Código:
  JSON.parse(@Html.Raw(Json.Encode(ALabels)))

se puser assim
com a var do modelo ele funciona

Código:
  JSON.parse(@Html.Raw(Json.Encode(@Model.ArrayLabels)))
 
Última edição:
o que eu quero fazer é o seguinte

estou a utilizar Mcv com razor e gentelella bootsrap graficos

https://colorlib.com/polygon/gentelella/

estas funções servem para chamar o grafico .


se chamar uma função para cada gráfico [como a que está na primeira mensagem deste topico] em que nessa função altero o id e os outros valores com o valor vindo directo do meu model, funciona perfeitamente

criar uma function com os parametros dos Arrays e um id como visto a baixo : da erros na construção do JS
_________________________________________________________________________________________________
Código:
function init_chart_doughnut(ID,ArrayLabls,ArrayPercentages,ArrayBackgroungColors,ArrayColorsMouseOver) {
  if ("undefined" != typeof Chart && (console.log("init_chart_doughnut"), $("#"+ID).length)) {
  var a = {
  type: "doughnut",
  tooltipFillColor: "rgba(51, 51, 51, 0.55)",
  data: {
  labels: JSON.parse( @ Html.Raw(Json.Encode(ArrayLabls))),

  datasets: [{
  data:  ArrayPercentages,
  backgroundColor: JSON.parse( @ Html.Raw(Json.Encode(ArrayBackgroungColors))),
  hoverBackgroundColor: JSON.parse( @ Html.Raw(Json.Encode(ArrayColorsMouseOver))),
  }
  ]
  },
  options: {
  legend: !1,
  responsive: !1
  }
  };
  $("#"+ID).each(function () {
  var e = $(this);
  new Chart(e, a)
  })
  }
}

de forma a chamar varios objectos do mesmo tipo na mesma pagina sem estar a toda esta função

e chamar a apenas a mesma com os parametros

e que os mesmos Vem do Controler

Código:
function init_chart_doughnut("teste",@Model.ArrayLabels,@Model.ArrayPercentages,@Model.ArrayBackgroungColors,@Model.ArrayColorsMouseOver);


mas não me aceita os parametros a serem chamados dentro do Html.Raw
não percebo pq

agradecia uma ajuda
 
Resolução possivel
so dou exemplo com dois graficos


feito num projecto
  • .net
  • mvc(razor
  • bootstrap

Ajudas

.net
  • Criar Tdos os objectos necessarios para os seguintes Pontos abaixo
  • criar uma sp para cada grafico com os mesmos campos de devolução
  • criar um enumerable type para cada grafico do mesmo tipo
  • criar uma função que para acesso a bd com o parametro tipo, em que conforme o tipo executa uma determinada sp, ja que todas trazem os mesmos campos, mas vão a sitios diferente, basta depois so tratar os campos, esta função devolve uma lista de dados de um tipo criado por nós.ExecuteDashboardDoughnut
  • no controler criar um metodo que trate estes dados todos para um objecto CallDoughnut
  • para cada grafico Chamar a FUnção acima no arranque do control

ex de dados directos referentes a função que gera o grafico


  • labels: ["Symbian", "Blackberry", "Other", "Android", "IOS"]
  • data : [5, 10, 15, 50, 20]
  • backgroundColor: ["#BDC3C7", "#9B59B6", "#E74C3C", "#26B99A", "#3498DB"],
  • hoverBackgroundColor: ["#CFD4D8", "#B370CF", "#E95E4F", "#36CAAB", "#49A9EA"]

Resolução Js/HTML

  • Criar Todas Variavels ao arramque do JS da propria pagina
  • criar a função com todos os parametros Referentes aos dados que le queremos passar
  • criar uma função inicializeVars() , para inicializarmos as vars que queremos passar para a função referente aos Vários Gráficos
  • no $(document).ready(function ()
  1. inicializamos inicializeVars()
  2. uma função de Construção de Grafico init_chart_doughnut() para Cada grafico com os respectivos parametros
Código:
<script type="text/javascript">
  var SOArrayLabels;
  var SOArrayPercentages;
  var SOArrayBackgroungColors;
  var SOArrayColorsMouseOver;

  var EntidadesLegaisArrayLabels;
  var EntidadesLegaisArrayPercentages;
  var EntidadesLegaisArrayBackgroungColors;
  var EntidadesLegaisArrayColorsMouseOver;
  
   function init_chart_doughnut(ID, ArrayLabels, ArrayPercentages, ArrayBackgroungColors, ArrayColorsMouseOver) {
  if ("undefined" != typeof Chart && (console.log("init_chart_doughnut"), $("#"+ID).length)) {

  var a = {
  type: "doughnut",
  tooltipFillColor: "rgba(51, 51, 51, 0.55)",
  data: {
  labels: ArrayLabels,
  datasets: [{
  data: ArrayPercentages,
  backgroundColor: ArrayBackgroungColors,//["#BDC3C7", "#9B59B6", "#E74C3C", "#26B99A", "#3498DB"],
  hoverBackgroundColor: ArrayColorsMouseOver,
  }
  ]
  },
  options: {
  legend: !1,
  responsive: !1
  }
  };
  $("#"+ID).each(function () {
  var e = $(this);
  new Chart(e, a)
  })
  }
  }
  
  function inicializeVars() {

  SOArrayLabels  = JSON.parse(@Html.Raw(Json.Encode(@Model.GraphDoughSO.ArrayLabels)));
  SOArrayPercentages  = @Model.GraphDoughSO.ArrayPercentages;
  SOArrayBackgroungColors = JSON.parse(@Html.Raw(Json.Encode(@Model.GraphDoughSO.ArrayBackgroungColors)));
  SOArrayColorsMouseOver  = JSON.parse(@Html.Raw(Json.Encode(@Model.GraphDoughSO.ArrayColorsMouseOver)));

  EntidadesLegaisArrayLabels  = JSON.parse(@Html.Raw(Json.Encode(@Model.GraphDoughEntidadesLegais.ArrayLabels)));
  EntidadesLegaisArrayPercentages  = @Model.GraphDoughEntidadesLegais.ArrayPercentages;
  EntidadesLegaisArrayBackgroungColors= JSON.parse(@Html.Raw(Json.Encode(@Model.GraphDoughEntidadesLegais.ArrayBackgroungColors)));
  EntidadesLegaisArrayColorsMouseOver = JSON.parse(@Html.Raw(Json.Encode(@Model.GraphDoughEntidadesLegais.ArrayColorsMouseOver)));
  }
  
  
  $(document).ready(function () {

  
  inicializeVars();
  
  init_chart_doughnut("CvDoughnutSO", SOArrayLabels, SOArrayPercentages, SOArrayBackgroungColors, SOArrayColorsMouseOver);
  init_chart_doughnut("CvDoughnutEntidadesLegais", EntidadesLegaisArrayLabels, EntidadesLegaisArrayPercentages, EntidadesLegaisArrayBackgroungColors, EntidadesLegaisArrayColorsMouseOver);
  

  });
  
</script>

Código Hrml Para Um grafico

Código:
<div class="section">
  <div class="container">
  <div class="row">
  <div class="col-md-6">
      
  <div class="panel-default">
  <div class="x_panel tile fixed_height_390 overflow_hidden">
  <div class="col-md-10">
  <h3>@Model.GraphDoughSO.Title</h3>
  <br>
  </div>
  <div class="col-md-2">


  <ul class="nav navbar-right panel_toolbox">
  <li>
  <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
  </li>

  </ul>
  <div class="clearfix"></div>
  </div>
  <div class="col-md-12">
  <div class="x_content">
  <table class="" style="width:100%">
  <tr>
  <th style="width:37%;">
  <p>Top Selected</p>
  </th>
  <th>
  <div class="col-lg-7 col-md-7 col-sm-7 ">
  <p class="">S.&nbsp;Operativo</p>
  </div>
  <div class="col-lg-5 col-md-5 col-sm-5 ">
  <p class="">Valor</p>
  </div>
  </th>
  </tr>
  <tr>
  <td>
  <!--IDGrafico-->
  <canvas id="CvDoughnutSO" class="canvasDoughnut" height="140" width="140" style="margin: 15px 10px 10px 0"></canvas>
  </td>
  <td>
  <table class="tile_info">
  <!--Gera a lista de Items para por ao lado do Grafico -->
  @for (int i = 0; i < Model.GraphDoughSO.LstItemsDoughnut.Count(); i++)
  {
  var Items = Model.GraphDoughSO.LstItemsDoughnut.ElementAt(i);

  <tr>
  <td>
  <p><i class="fa fa-square" style="color:@Items.Backgroundcolor"></i>@Items.Description</p>
  </td>
  <td style="width:20%">@Items.Value</td>
  <td style="padding-right:19%">&nbsp;</td>
  </tr>

  }

  </table>
  </td>
  </tr>
  <tr>
  <td colspan="2">
  <h5>Total Pedidos com Dispositivo:<b>@Model.GraphDoughSO.TotalRequestsSpec</b></h5>
  </td>
  </tr>
  </table>

  </div>
  </div>
  </div>
  </div>
  </div>
     </div>
   </div>
</div>


objectos necessarios para o C#
_____________________________________________________________________________________________________________
Tipos de grafico


Código:
 public static class Tipos
  {
  public static class GraphType
  {
   
  public const string TpSO = "TpSO";
  public const string TpEntidadesLegais = "TpEntidadesLegais";
  }

  }

Doughnut

Código:
public class Doughnut
  {
  public string  Description  {get;set;}
  public Int32  Value  {get;set;}
  public string  Backgroundcolor  {get;set;}
  public string  BackGroundcolorOver  {get;set;}
  public Int32  totalRecSpecific { get;set;}
  public Int32  TotalReq  {get;set;}
  public string  Titulografh  {get;set;}
  public float  PercentageValue { get; set; }
  // codigo referente a uma descricao
  public  string CodeDescription { get; set; }

  }

GraphDoughnut

Código:
public  class GraphDoughnut
  {
  public object ArrayPercentages { get; set; }
  public string ArrayLabels { get; set; }
  public string ArrayBackgroungColors { get; set; }
  public string ArrayColorsMouseOver { get; set; }
  public string Title  { get; set; }
  public string TotalRequests  { get; set; }
  public string TotalRequestsSpec  { get; set; }
  public List<Doughnut> LstItemsDoughnut { get; set; }
  }


View model

Código:
public partial class DashboardsViewModel
  {
  
  public GraphDoughnut GraphDoughSO { get; set; }
  public GraphDoughnut GraphDoughEntidadesLegais { get; set; }
}



Metodo Referente á sp
___________________________________________________________________________________________

Código:
  public List<Doughnut> ExecuteDashboardDoughnut(string DoughnutType)
  {

  DataTable Dados = null;
  string commandText = string.Empty;
  List <Doughnut> MyListDoughnut = null;

  var connectionString = ConfigurationManager.ConnectionStrings["COnStrWebConfig"];
  var factory = DbProviderFactories.GetFactory(connectionString.ProviderName);

  using (var connection = factory.CreateConnection())
  {
  connection.ConnectionString = connectionString.ConnectionString;

  switch (DoughnutType)
  {
  case GraphType.TpEntidadesLegais:
  commandText = "DashboardDoughnutEntidadesLegais";
  break;

  case GraphType.TpSO:
  commandText = "DashboarddoughnutSO";
  break;
  }

  

  var command = connection.CreateCommand();
  command.CommandText = commandText;
  command.CommandType = CommandType.StoredProcedure;

  

  try
  {
  connection.Open();
  var reader = command.ExecuteReader();
  Dados = new DataTable();
  Dados.Load(reader);
  reader.Close();
  connection.Close();

  MyListDoughnut = new List<Doughnut>();

  // datatable to LIst
  MyListDoughnut = (from DataRow dr in Dados.Rows
  select new Doughnut()
  {
  Description = dr[0].ToString()
  ,Value = Int32.Parse( dr[1].ToString())
  ,Backgroundcolor = dr[2].ToString()
  ,BackGroundcolorOver = dr[3].ToString()
  ,totalRecSpecific = Int32.Parse(dr[4].ToString())
  ,TotalReq = Int32.Parse(dr[5].ToString())
  ,Titulografh = dr[6].ToString()
  ,PercentageValue = float.Parse(dr[8].ToString())
  ,CodeDescription = dr[7].ToString()

  }).ToList();

  }
  catch (Exception ex)
  {
  _logger.Error(ex, string.Format("while ExecuteDashboardDoughnut Dashboard. ConString={0}",  connection.ConnectionString));
  }
  }

  return MyListDoughnut;
  }




metodo generico C# para tratar dos dados do grafico que vem da Sp
____________________________________________________________________________________________________________
Código:
private GraphDoughnut CallDoughnut(string TypeGraph)
  {
  
  GraphDoughnut GDoughnut = null;


  // arrays a levar para o modelo
  string jArrayLabels = string.Empty;
  string ArrayPercentages = string.Empty;
  string ArrayBackgroungColors = string.Empty;
  string ArrayColorsMouseOver = string.Empty;

  // strings de concatenação
  string StrLabels = string.Empty;
  string StrPercentages = string.Empty;
  string StrBackgroungColors = string.Empty;
  string StrColorsMouseOver = string.Empty;

  

  int i = 0;

  string GenArray = @"[{0}]";
  string StrQuotes = "'{0}',";
  string StrNoQuotes = "{0},";
  char[] ChrtrimEnd = new char[] {','};
  string GenLabel = string.Empty;

  // Chamada á SP
  MyDoughnut = _DashboardsService.GetExecuteDashboardDoughnut(TypeGraph);



  GDoughnut = new GraphDoughnut();
  // criamos os arrays
  foreach (var Item in MyDoughnut)
  {
  if (i == 0)
  {
  GDoughnut.Title = Item.Titulografh;
  GDoughnut.TotalRequests = Item.TotalReq.ToString();
  GDoughnut.TotalRequestsSpec = Item.totalRecSpecific.ToString();
  }
  switch (TypeGraph)
  {
  case Tipos.GraphType.TpCategorias:
  case Tipos.GraphType.TpEquipamentos:
  case Tipos.GraphType.TpEstadoPedidos:
  case Tipos.GraphType.TpPedidosOperador:
  case Tipos.GraphType.TpSO:
  GenLabel = Item.Description;
  break;
  case Tipos.GraphType.TpEntidadesLegais:
  GenLabel = Item.CodeDescription;
  break;
  }
  StrLabels = StrLabels + string.Format(StrQuotes, GenLabel);
  StrPercentages = StrPercentages + string.Format(StrNoQuotes, Item.PercentageValue.ToString().Replace(",","."));
  StrBackgroungColors = StrBackgroungColors + string.Format(StrQuotes, Item.Backgroundcolor);
  StrColorsMouseOver = StrColorsMouseOver + string.Format(StrQuotes, Item.BackGroundcolorOver);
  i = i + 1;
  }



  //labels
  jArrayLabels = string.Format(GenArray, StrLabels.TrimEnd(ChrtrimEnd));
  GDoughnut.ArrayLabels = GetArrayStringJson(jArrayLabels);
  //percentages
  ArrayPercentages = string.Format(GenArray, StrPercentages.TrimEnd(ChrtrimEnd));
  GDoughnut.ArrayPercentages = JArray.Parse(ArrayPercentages);
  //BckColors
  ArrayBackgroungColors = string.Format(GenArray, StrBackgroungColors.TrimEnd(ChrtrimEnd));
  GDoughnut.ArrayBackgroungColors = GetArrayStringJson(ArrayBackgroungColors);
  //MouseOverColors
  ArrayColorsMouseOver = string.Format(GenArray, StrColorsMouseOver.TrimEnd(ChrtrimEnd));
  GDoughnut.ArrayColorsMouseOver = GetArrayStringJson(ArrayColorsMouseOver);

  //listaDoughnut

  GDoughnut.LstItemsDoughnut = MyDoughnut.OrderByDescending(p=> p.Value).ToList();



  return GDoughnut;

chamada de Grafico C#

Código:
  var model = new DashboardsViewModel();
  model.GraphDoughSO = CallDoughnut(Tipos.GraphType.TpSO);
  model.GraphDoughEntidadesLegais = CallDoughnut(Tipos.GraphType.TpEntidadesLegais);



se possivel por no repositorio de codigo

obrigado
 
Back
Topo