How to show images on an HTML page

Question

I am developing a ASP.NET MVC 4 web api to show product image associated with a company. In the database I have stored CompanyID & CompanyProductImageURL or CompanyProductImageFilepath. Now using my web api, when I click on 'Show Image' button, I want to show the product image on the same page. Right now, the url is localhost:1111/ViewCompanyProductImage.html ; when I enter CompanyID =31 & click on 'Show Image' button new tab opens with url http://localhost:1111/api/Images/?CompanyID=31 and then the CompanyProductImageURL or CompanyProductImageFilepath associated with that Company opens in another tab. I want the image to show up in localhost:1111/ViewCompanyProductImage.html under the 'SHow Image' button. Here's the code I have.

    webapiconfig.cs 
public static void Register(HttpConfiguration config)
        {
               config.Routes.MapHttpRoute(
                name: "ImagesApi",
                routeTemplate: "api/Images/{companyid}"
                defaults: new { Controller = "Images", companyid = @"\d+" }
            );}

----Controller

    public class ImagesController : ApiController
    {
    private static T ConvertFromDBVal<T>(object obj)
        {
            if (obj == null || obj == DBNull.Value)
            {
                return default(T); // returns the default value for the type
            }
            else
            {
                return (T)obj;
            }
        }

    [System.Web.Http.AcceptVerbs("GET")]
        public HttpResponseMessage Get(int companyid)
        {
            Images oldImages = new Images();
            string sql = "select companyid,companyproducturl from [dbo].[CompanyImage]  WHERE companyid = @companyid";
            using (SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["connection"].ConnectionString))
            {
                using (SqlCommand query = new SqlCommand(sql, connection))
                {
                    SqlDataReader rdr;
                    query.Parameters.Add(new SqlParameter("@companyid", companyid));
                    query.CommandType = CommandType.Text;
                    connection.Open();
                    query.CommandTimeout = 90;
                    rdr = query.ExecuteReader();
                    if (rdr != null)
                    {
                        while (rdr.Read())
                        {
                            oldImages.companyid = ConvertFromDBVal<int>(rdr["companyid"]);
                            oldImages.companyproducturl = ConvertFromDBVal<string>(rdr["companyproducturl"]);
 }
                    }
                }
            }
            if (oldImages.companyid == 0 )
            {
  throw new HttpResponseException(Request.CreateErrorResponse(HttpStatusCode.NotFound, String.Format("No records found for companyid: {0} ", companyid)));
            }
            HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
            System.Diagnostics.Process.Start(oldImages.imageproducturl);
           return response;
       }


---view
 public class Images
    {
        [Required(AllowEmptyStrings = false, ErrorMessage = "companyid Required")]
        [Range(1, 10000)]
        public int companyid { get; set; }
        [Required(AllowEmptyStrings = false, ErrorMessage = "imageproducturl Required")]
        public string companyproducturl { get; set; }
     }

--index.cshtml

<div id="body">
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1> Web API!</h1>
            </hgroup>
        </div>
    </section>
    <section class="content-wrapper main-content clear-fix">
        <p>
            For API documentation: @Html.ActionLink("API", "Index", "Help", new { area = "" }, null)
        </p>
        <p>
           View Company Images:<a href="ViewCompanyProductImage.html">Click Here!</a>
        </p>

    </section>
</div>

--ViewCompanyProductImage.html
<div class="jumbotron" align="center">
    <h1>Images Web API</h1>
    <p class="lead"></p>
</div>
<div class="row">
    <div class="col-md-4" align="center">
        <div class="first" align="center">
            <form action="api/Images/" method="get" target="_blank">
                companyid:
                <br />
                <input type="text" name="companyid"><br>
                <td>
                    <input type="submit" value="Show Image" />
            </form>
        </div>
     </div>
</div>

How can I show product image on the localhost:1111/ViewCompanyProductImage.html itself? Thanks R

Answer 1

You can do this using JavaScript.

Place an image element on the page, give it an ID and on button click, instead of submit, find the image element and set its src property to the desired URL.

<img src="" id="companyImage" />

<input type="text" name="companyid" />
<input type="button" value="Show Image" onclick="previewImage" />

And then in JS:

function previewImage() {
    var companyId = getElementById('companyid').value;
    getElementById('companyImage').src = "api/Images/?companyID=" + companyId;
}