Question

我正在开发一个ASP.NET MVC 4 web api来显示与公司相关的产品图像。在数据库中，我存储了CompanyID＆amp; CompanyProductImageURL或CompanyProductImageFilepath。现在使用我的web api，当我点击“显示图像”按钮时，我想在同一页面上显示产品图像。现在，网址是localhost:1111/ViewCompanyProductImage.html;当我输入CompanyID = 31＆amp;单击“显示图像”按钮，将打开新选项卡，其中包含URL http://localhost:1111/api/Images/?CompanyID=31，然后在另一个选项卡中打开与该公司关联的CompanyProductImageURL或CompanyProductImageFilepath。我希望图像显示在localhost：1111 / ViewCompanyProductImage.html下的“SHOW Image”按钮下。这是我的代码。

    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>

如何在localhost上显示产品图片：1111 / ViewCompanyProductImage.html本身？谢谢 [R

Answer 1

您可以使用JavaScript执行此操作。

在页面上放置一个图像元素，给它一个ID，然后单击按钮，而不是提交，找到图像元素并将其src属性设置为所需的URL。

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

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

然后在JS：

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

如何在HTML页面上显示图像

1 个答案: