Gọi Ajax Cross-Domain với JSONP


SONP là gì?

Khi bạn sử dụng Ajax bạn không thể gọi sang domain khác (cross domain), để giải quyết vấn đề này bạn có thể sử dụng Proxy để lấy dữ liệu từ server/domain khác sau đó trả về cho server/domain hiện tại nhưng bạn sẽ gặp khó khăn trong việc gọi dữ liệu.

JSONP hoặc JSON with Padding là phương thức dùng để gọi sang server/domain khác (cross domain), dùng JSONP bạn có thể lấy dữ liệu từ server/domain khác để trả về cho client mà không cần phải dùng proxy server.

Bạn có thể đọc thêm về JSONP ở đây

Trả về 1 loạt ảnh từ API của Flickr với JSONP (ví dụ tôi lấy ở trang jquery)

<!DOCTYPE html>
<html>
<head>
  <style>img{ height: 100px; float: left; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="images"></div>

<script>
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
  {
    tags: "cat",
    tagmode: "any",
    format: "json"
  },
  function(data) {
    $.each(data.items, function(i,item){
      $("<img/>").attr("src", item.media.m).appendTo("#images");
      if ( i == 3 ) return false;
    });
  });
</script>

</body>
</html>

trong đoạn code trên bạn có thể để ý đến Request Url của tôi có thêm jsoncallback=?
khi bạn sử dụng JSONP thì bạn bắt buộc phải có param này.
http://api.jquery.com/jQuery.getJSON/

Advertisements

Tự động resize ảnh trong nội dung bài viết


Khi bạn đăng 1 ảnh lên blog hoặc diễn đàn bạn sẽ gặp ngay phải vấn đề đó là ảnh của bạn quá to so với
kích cỡ nội dung của blog diễn đàn đó dẫn đến ảnh sẽ bị “chửa” ra ngoài nhìn rất mất thẩm mĩ hoặc tệ hơn
là một phần của bức ảnh sẽ “bị mất” do phần tử cha được gán overflow:hidden

Để giải quyết vấn đề này nếu bạn là Webmaster bạn cần phải sử lý:

1. Đưa ảnh về đúng kích cỡ
2. Giữ lại Aspect Ratio (tỷ lệ) của bức ảnh đó để ảnh không bị méo

bạn có thể code css như sau:

Tại thẻ div Container (chứa ảnh) viết cho thẻ img

divContainer img {

    max-width: 550px;
    height: auto !important;
    width: expression(this.width > 550 ? 550: true);
}

max-width: 550px chiều rộng tối đa của ảnh là 550px
height: auto tự động co giãn chiều cao để phù hợp với tỷ lệ bức ảnh

 

Hoặc để đơn giản như  sau:

 

#divContainer img {
max-width: 95%;

}

Để ở 95% vì không muốn hình ảnh đầy form, gây xấu, các bạn có thể để 100% tùy vào nhu cầu

Như vậy khi đưa lên bất kỳ ảnh nào trong thẻ div Container sẽ bị resize về cỡ 550px tuy nhiên code trên mới
chỉ chạy được trên: Firefox 3.0 trở lên, Opera 10, IE 7 trở lên, Google Chrome, Safari 4

IE 6 không hỗ trợ.

Bạn thường viết web Control như thế nào?


Cách 1: Tôi tạo ra một trang abc.ASPX với file code là abc.ASPX.cs, rồi viết code xử lý với các control vào trang này, thế là xong. Tôi thấy bạn tôi làm thế, thầy tôi dạy tôi thế, nhiều công ty nhỏ làm thế, khỏi phải suy nghĩ nhiều. Cần gì chỉnh sửa giao diện thì vào trang code ấy mà sửa, vừa tiện lợi.
Read more of this post

Xóa khoảng trắng của chuỗi với JQuery


Khi người dùng nhập dữ liệu vào textbox có thể bị thừa ra các khoảng trống ở đầu hoặc cuối textbox.

JQuery cung cấp hàm $.trim() để xóa các khoảng thừa ở đầu hoặc cuối chuỗi người dùng nhập vào textbox.

Ở đây bạn có thể bắt sự kiện OnBlur của textbox sau đó dùng hàm trim() của JQuery để xóa khoảng trống:

 

$(function () {
           $('input.textbox').blur(function () {                   
               $(this).val(
                   $.trim($(this).val())
               );
           });
       });
với mỗi thẻ input có class là textbox bạn sẽ gán sự kiện blur vào để với mỗi textbox đó bạn sẽ lấy được giá trị người dùng nhập hiện tại lên và dùng hàm trim() để xóa khoảng trắng.

tôi có textbox như sau:

<input id="Text1" type="text" class="textbox" /><br /><br />
<input id="Text2" type="text" class="textbox" />

Tùy biến Meta Description và Meta Keywords trong ASP.NET


Khi tạo website asp.net bạn có thể dễ dàng tùy biến Title của website thông qua thuộc tính Page.Title tại sự kiện Page_Load nhưng bạn muốn website của mình thân thiện với Search Engine hơn qua việc thêm 2 thẻ

meta name=”description”

meta name=”keywords”

Trong ASP.NET 3.5 bạn không thể đưa 2 thẻ này vào trang dễ như thẻ title được

chúng ta có thể làm như sau: trong sự kiện Page_Load bạn khai báo thêm

HtmlMeta metakeywrd = new HtmlMeta();
metakeywrd.Name = "keywords";
metakeywrd.Content = "add keywords here";

HtmlMeta metadesc = new HtmlMeta();
metadesc.Name = "description";
metadesc.Content = "add meta description here";

Page.Header.Controls.Add(metakeywrd);
Page.Header.Controls.Add(metadesc);

và khi chạy bạn sẽ thấy chúng ở ngay trên thẻ đóng của thẻ head

Với .Net 4.0 mọi chuyện sẽ đơn giản hơn nhiều

tương tự như Page.Title bạn sẽ có thêm Page.MetaDescription và Page.MetaKeywords

Page.Title = "Page Title here";
Page.MetaDescription = "Meta Description Here";
Page.MetaKeywords = "Meta Keyword here";

Dùng JQuery để gọi ASP.NET Handler (ASHX)


ASP.NET Handler được dùng để trả về cho client một nội dung động từ QueryString (bạn có thể trả về dạng Image,Xml,JSON hoặc file văn bản …)

Tại sao phải sử dụng file ASHX mà không phải là ASPX?

– Nhanh hơn: khi bạn sử dụng file Ashx để trả dữ liệu về cho client sẽ nhanh hơn từ 5–>10%
khi bạn sử dụng file aspx vì file ashx chỉ sử lý 1 sự kiện duy nhất đó là ProcessRequest.

Viết Code JQuery để post dữ liệu lên ASHX

 

<scriptlanguage="javascript"type="text/javascript"src="Scripts/jquery-1.4.1.js"></script>
<scriptlanguage="javascript"type="text/javascript">
    $(function () {
        $("#btnSay").click(function () {
            $.post("Hello.ashx", { txtName: $("#txtName").val() }, function (result) {
                alert(result);
            });
        });
    });
</script>
Html Code
<input type="text" name="txtName" id="txtName" />
<input type="button" name="btnSay" id="btnSay" value="Say" />
Viết Code trong file ASHX để trả dữ liệu về cho client
public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "text/plain";
    context.Response.Write("Hello " + context.Request["txtName"]);
}
 click vào nút btnSay để xem giá trị ở Textbox

Xóa ký tự không phải là số tự nhiên ra khỏi một chuỗi


Nếu bạn muốn người dùng nhập số vào textbox bạn có thể dùng Javascript để check nhưng với trường hợp nào đó code javascript của bạn bị lỗi và người dùng vẫn có thể nhập ký tự lạ vào textbox và khi submit lên Server hệ thống sẽ báo lỗi không thể Convert sang kiểu Integer

Chúng ta có thể loại bỏ ký tự lạ này bằng cách sử dụng RegularExpression:

var str = “12d223*23#22″;
var newStr = Regex.Replace(str, @”[^\d]”, “”);

và kết quả của chúng ta sẽ là

//122232322