What is the best way to pass information to View?

Question

What is the best way to pass information to View?

Navigation

#1 by (2 votes)

3

I have the following code:

   public ActionResult AtualizaCliente(int id)
    {
        ViewBag.idFoto = new SelectList(dao.fotos, "idFoto", "Foto");
        ViewBag.idInformacao = new  SelectList(dao.informacoes, "idInformacao", "titulo");
        return View(dao.cliente.Find(id));
    }


    private string PegarCaminhoImagem(Int16 controle)
    {
        sistema_mobileEntities dao = new sistema_mobileEntities();
        dao.fotos.Find(controle);
        var caminho = dao.fotos.First().Foto;
        return caminho;
    }


    public WebImage ObterWebImage(short idFoto)
    {
        int largura = 100;
        int altura = 100;
        String caminhoFoto = PegarCaminhoImagem(idFoto);
        return new WebImage(@caminhoFoto).Resize(largura, altura, false, false);
    }


    public ActionResult AtualizaFoto(Int16 caminhofoto)
    {
        try
        {
            WebImage webImagem = ObterWebImage(caminhofoto);
            return File(webImagem.GetBytes(), "image/png");
        }
        catch (Exception ex)
        {
            return Json("A Imagem não existe : " + ex.Message);
        }

    }


    public string ObterFotoBase64(Int16 caminhofoto)
    {
        try
        {
            WebImage webImagem = ObterWebImage(caminhofoto);
            return Convert.ToBase64String(webImagem.GetBytes());
        }
        catch (Exception ex)
        {
            return "A Imagem não existe : " + ex.Message;
        }
    }

on the Controller.

What is the best way to pass the image path so that it is viewed?

@model ProjetoDelphiMobile.Models.cliente

@{
    ViewBag.Title = ""; 
}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script><script>$(document).ready(function(){$("#idFoto").on("change", function () {
            var srcRecebe = $($(this)).val();

            if (srcRecebe > 0) {
                $.post("@Url.Action("ObterFotoBase64", "ConsultaCliente")", { idFoto: srcRecebe }).done(function (data) {
                alert(data);
                $('#foto').attr("src", "data:image/image/png;base64," + data);
            });
        }
    });
});
</script>



<form>
    <fieldset data-role="controlgroup">


           <label>Foto:</label>
           <div id="selecao">
                 @Html.DropDownList("idFoto", String.Empty) 
           </div>
           <br />

          <div>
             <img id="foto" src="@Url.Action( "AtualizaFoto", "ConsultaCliente", new {caminhofoto = 1 })" alt="thumbnail" />
          </div>


           <br />

           <label>Nome:</label>
            @Html.TextBoxFor(model => model.nome, new { disabled = false })

           <label>Nome:</label>
            @Html.TextBoxFor(model => model.nome, new { disabled = false })

            <label>Nome do pai:</label>
            @Html.TextBoxFor(model => model.pai, new { disabled = false })

            <label>Nome da Mãe:</label>
            @Html.TextBoxFor(model => model.mae, new { disabled = false })

            <label>Data de Nascimento:</label>
            @Html.TextBoxFor(model => model.datanascimento, new { disabled = false })



        <ul data-role="listview" data-inset="true" data-divider-theme="e">
            <li><a href="/ConsultaCliente">Retornar para consulta</a></li>
        </ul>

    </fieldset>
</form>

javascript jquery c# asp.net-mvc

asked by anonymous 05.05.2015 / 04:27

1 answer

How to replace script tag data with jQuery? Insert dynamic filter into an angle expression

score 2 · Answer 1

One solution to your case, which needs to load the image with both Ajax and Postback, is to use two different methods: one that returns the bytes of the image the way you were already doing and another to return the serialized image in Base64. Then it would look more or less like the code (I adapted to be able to test):

public WebImage ObterWebImage(short idFoto)
{
    int largura = 100;
    int altura = 100;
    String caminhoFoto = PegarCaminhoImagem(idFoto);
    return new WebImage(@caminhoFoto).Resize(largura, altura, false, false);
}

public ActionResult AtualizaFoto(Int16 caminhofoto)
{
    try
    {
        WebImage webImagem = ObterWebImage(caminhofoto);
        return File(webImagem.GetBytes(), "image/png");
    }
    catch (Exception ex)
    {
        return Json("A Imagem não existe : " + ex.Message);
    }

}

public string ObterFotoBase64(Int16 caminhofoto)
{
    try
    {
        WebImage webImagem = ObterWebImage(caminhofoto);
        return Convert.ToBase64String(webImagem.GetBytes());
    }
    catch (Exception ex)
    {
        return "A Imagem não existe : " + ex.Message;
    }
}

Javascript:

$(document).ready(function () {
    $("#idFoto").on("change", function () {
        var srcRecebe = $($(this)).val();

        if (srcRecebe > 0) {
            $.post("@Url.Action("ObterFotoBase64", "ConsultaCliente")", { idFoto: srcRecebe }).done(function (data) {
                alert(data);
                $('#foto').attr("src", "data:image/image/png;base64," + data);
            });
        }
    });
});

And the Html:

<div>
    <img id="foto" src="@Url.Action( "AtualizaFoto", "Home", new {caminhofoto = 1 })" alt="thumbnail" />
</div>

Note: I noticed that your code had some errors:

The second parameter of the File fault method of the Controller receives content-type of the image, you were passing the path;
As a result of $.post , you were trying to set the src attribute of an image with id "# path" . For your code, the id of the image is "# photo" ;
The name of your parameter is "pathFoto" of type Int16 . Would not it be more consistent to call this "idFoto" parameter? Because it can be confusing, especially when calling the method from Javascript. In your code, in the HTML of the view, you are passing the { caminhofoto = "caminho" } parameter which gives error because it tries to convert the string "path" to Int16.