1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.
  2. COVID-19 Mantenham-se seguros: Pratiquem distanciamento físico de 2 metros. Lavem as mãos. Usem máscara.
    Informação sobre COVID-19. Ajuda a combater o COVID-19 com o [email protected] e com o [email protected].
    Remover anúncio
  3. Informação: A partir das 00:30 (hora de Lisboa) desta Terça-feira, 24 de Novembro, o fórum e restantes sites da ZWAME (Comparador, Jogos, Portal, etc) estarão inacessíveis por alguns minutos.
    Se necessário faremos actualizações via Twitter e Facebook.
    Remover anúncio

MVC Razor Add String In @Html.Raw .net

Discussão em 'Web Development' iniciada por alfinete, 10 de Novembro de 2020. (Respostas: 2; Visualizações: 274)

  1. alfinete

    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: 10 de Novembro de 2020
  2. alfinete

    alfinete Power Member

    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
     
  3. alfinete

    alfinete Power Member

    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