How do I make the imag map link a parameter from the database?

Question

I would like that in the imag map area tag in the href attribute instead of placing the page link I want you to receive a parameter that is sent to a c method#.

HTML code

    <img src="../css/image/cores.png"   alt="Escolha a cor que deseja" usemap="#Cores" onclick="ImageMap_Click"/>
    <map name="Cores">
        <area  shape="rect" alt="Rosa" coords="8,8,96,116" href="<%#Eval("")%>">
         <area  shape="rect" alt="Rosas" coords="111,12,201,105" href="#"/>
        <area  shape="rect" alt="Rosa" coords="208,8,307,109" href="#"/>
        <area  shape="rect" alt="Rosa" coords="312,11,406,111" href="#"/>
        <area  shape="rect" alt="Rosa" coords="415,10,509,109" href="#"/>
        <area  shape="rect" alt="Rosa" coords="515,12,606,107" href="#"/>
        <area  shape="rect" alt="Rosa" coords="9,115,102,213" href="#"/>
        <area  shape="rect" alt="Rosa" coords="108,116,197,209" href="#"/>
        <area  shape="rect" alt="Rosa" coords="210,114,298,208" href="#"/>
        <area  shape="rect" alt="Rosa" coords="311,114,402,210" href="#"/>
        <area  shape="rect" alt="Rosa" coords="416,115,508,213" href="#"/>
        <area  shape="rect" alt="Rosa" coords="514,115,602,213" href="#"/>
        <area  shape="rect" alt="Rosa" coords="110,222,204,319" href="#"/>
        <area  shape="rect" alt="Rosa" coords="313,115,403,207" href="#"/>


         <area  shape="rect" alt="Rosa" coords="6,220,100,317" href="#"/>
        <area  shape="rect" alt="Rosa" coords="210,221,298,314" href="#"/>
        <area  shape="rect" alt="Rosa" coords="313,222,401,316" href="#"/>
        <area  shape="rect" alt="Rosa" coords="412,220,505,319" href="#"/>
        <area  shape="rect" alt="Rosa" coords="515,219,602,316" href="#"/>
        <area  shape="rect" alt="Rosa" coords="7,327,92,419" href="#"/>
        <area  shape="rect" alt="Rosa" coords="109,329,198,422" href="#"/>
        <area  shape="rect" alt="Rosa" coords="514,223,603,421" href="#"/>


        <area  shape="rect" alt="Rosa" coords="209,329,295,420" href="#"/>
        <area  shape="rect" alt="Rosa" coords="313,327,402,417" href="#"/>

        <area  shape="rect" alt="Rosa" coords="414,330,504,421" href="#"/>

        <area  shape="rect" alt="Rosa" coords="512,329,600,220" href="#"/>
    </map>

C#

public Static Datatable Getprodutosinatributos(string categoriaID, string pageNumber, out int howManyPages) {

      *DbCommand comm = GenericDataAcess.CreateCommand();
       comm.CommandText = "GetProdutoinAtributos";
       //cria um novo parametro
       DbParameter param = comm.CreateParameter();
       param.ParameterName = "@atributoValueID";
       param.Value = categoriaID;
       param.DbType = DbType.Int32;
       comm.Parameters.Add(param);* 

//This is where I got the @attribute

       //cria um novo parametro
       param = comm.CreateParameter();
       param.ParameterName = "@DescricaoTamnaho";
       param.Value = TendenciasConfigurations.ProdDescricaoTamnaho;
       param.DbType = DbType.Int32;
       comm.Parameters.Add(param);

       //cria um novo parametro
       param = comm.CreateParameter();
       param.ParameterName = "@Numpagina";
       param.Value = pageNumber;
       param.DbType = DbType.Int32;
       comm.Parameters.Add(param);


       //cria um novo parametro
       param = comm.CreateParameter();
       param.ParameterName = "@ProdutosPorPagina";
       param.Value = TendenciasConfigurations.ProdutosPorPagina;
       param.DbType = DbType.Int32;
       comm.Parameters.Add(param);


       //cria um novo parametro
       param = comm.CreateParameter();
       param.ParameterName = "@HowManyProducts";
       param.Direction = ParameterDirection.Output;
       param.DbType = DbType.Int32;
       comm.Parameters.Add(param);


       //executa a stored procedure e salva os resultados no datatable
       DataTable tabela = GenericDataAcess.ExecuteSelectCommand(comm);
       //calcula quantas paginas por produtos e define o parametro de saida
       int howmanyProducts = Int32.Parse(comm.Parameters["@HowManyProducts"].Value.ToString());
       howManyPages = (int)Math.Ceiling((double)howmanyProducts / (double)TendenciasConfigurations.ProdutosPorPagina);

       //retorna a pagina dos produtos
       return tabela;
   } 

Answer 1

Depending on what you want to do, you can use ajax request, that is, in your tag you would have the html onclick event that would call a javascript function, which would finally call your c# method through a service.

It would look something like this:

Page:

<map name="Cores">
    <area shape="rect" alt="Rosa" coords="8,8,96,116" onclick="teste('<%= valor1 %>');">
</map>

//Note: value1 is a variable I created in c#, use yours. Remembering that it should be public, you can also access a method that returns something instead of the variable. Example <%= Methodssomething() %>.

<script type='text/javascript'>
    function teste(valor1) {
        $.ajax({
            type: "POST",
            contentType: 'application/json; charset=utf-8',
            url: 'Teste.aspx/Teste',
            data: "'dados':'" + valor1 + "'}",
            dataType: 'json',
            success: function () {
                //faz algo
            },
            error: function (msg) {
                //alert("Erro! Tente novamente!");
            }
        });
    }
</script>

Backend:

public partial class Index : System.Web.UI.Page
{
    public String valor1 = "";
    protected void Page_Load(object sender, EventArgs e)
    {
        valor1 = "Parametro1";
    }

    [WebMethod]
    public static void Teste(string valor)
    {
        //Fal algo
    }

}