Download Và Upload ảnh Sử Dụng ASP.NET Web API

Trang chủ » Chèn ảnh Vào Webform » Download Và Upload ảnh Sử Dụng ASP.NET Web API

Có thể bạn quan tâm

Bước 1: Thiết kế giao diện của trang đổi Avatar người dùng, chúng ta sẽ sử dụng luôn file Index.cshtml đã được sinh ra khi tạo project Web API ở phần trên. Giao diện của ứng dụng sẽ gồm:
  • 1 div để hiển thị thông tin về ứng dụng
  • 1 form download/upload avatar chứa: 1 image, 1 input text để nhập userId của người dùng, 2 input button để download và upload ảnh.
XHTML <div class="jumbotron"> <p class="lead">Using Web API Service in ASP.NET MVC: User Profile Avatar Change Demo</p> </div> <form role="form"> <div class="form-group"> <img alt="Avatar" src="~/Avatar/anonymous.gif" class="img-rounded" width="128" height="128" id="imgAvatar" /> </div> <div class="form-group form-inline"> <input id="txtUserId" type="text" class="form-control" placeholder="Enter UserId to get or set avatar" /> </div> <div class="form-group form-inline"> <input id="btnGetUserAvatar" type="button" width="128" class="btn btn-primary" value="Get Avatar" /> <input id="btnSetUserAvatar" type="button" width="128" class="btn btn-primary" value="Set Avatar" /> </div> </form>
123456789101112131415<div class="jumbotron"><p class="lead">Using Web API Service in ASP.NET MVC: User Profile Avatar Change Demo</p></div><form role="form"><div class="form-group"><img alt="Avatar"src="~/Avatar/anonymous.gif"class="img-rounded"width="128"height="128"id="imgAvatar" /></div><div class="form-group form-inline"><input id="txtUserId"type="text"class="form-control"placeholder="Enter UserId to get or set avatar" /></div><div class="form-group form-inline"><input id="btnGetUserAvatar"type="button"width="128"class="btn btn-primary"value="Get Avatar" /><input id="btnSetUserAvatar"type="button"width="128"class="btn btn-primary"value="Set Avatar" /></div></form>

Ở đây chúng ta sử dụng các class của Bootstrap để thiết kế giao diện cho đẹp và chuyên nghiệp. Nếu bạn chưa biết về Bootstrap thì có thể hiểu đơn giản Bootstrap là một CSS framework giúp chúng ta xây dựng các giao diện web rất nhanh chóng dễ dàng, có khả năng responsive và cross-browser. Các bạn có thể tìm hiểu thêm về Bootstrap tại đây: http://getbootstrap.com/

Từ khóa » Chèn ảnh Vào Webform