3 ASP.NET Repeater Control Tips


The ASP.NET Repeater control is a lightweight templated data-bound list control that allows customization of your layout by repeating a specified template for each item displayed in the list. In this article, we will see 3  lesser known ASP.NET Repeater Control tips

Tip 1: Bind an ASP.NET Repeater to List<string>

Let’s first declare a List<String> for ourselves. Create an Employee and EmployeeList Class

public class Employee
{
public int EmpID { get; set; }
public string EmpName { get; set; }
}

public class EmployeeList
{
static EmployeeList()
{
emp = new List<Employee>();
emp.Add(new Employee() { EmpID = 1, EmpName = “Marshall” });
emp.Add(new Employee() { EmpID = 2, EmpName = “Matt Damon” });
emp.Add(new Employee() { EmpID = 3, EmpName = “Larry King” });
}
public static List<Employee> emp { get; set; }
}

We have an EmployeeList exposed  through a get/set property public static List<Employee> emp { get; set; }. This allows us to consume this List<> using a LINQDataSource, which expects the TableName to be a property, in our case ’emp’.

Now declare a Repeater control with two columns to display this data:

<form id=”form1″ runat=”server”>
<div>
<asp:Repeater ID=”rptName” runat=”server”>
<HeaderTemplate>
<table>
<tr>
<th>EmployeeID</th>
<th>EmployeeName</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# ((Employee)Container.DataItem).EmpID %>
</td>
<td>
<%# ((Employee)Container.DataItem).EmpName %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table><br />
</FooterTemplate>
</asp:Repeater>
</div>
</form>

The <ItemTemplate> defines how items in the Repeater control are displayed. The most important step is to cast the Container.DataItem object to the ‘Employee’ type.

In the code behind Page_Load, bind the Repeater to the List<Employee> as shown below:

protected void Page_Load(object sender, EventArgs e)
{
rptName.DataSource = EmployeeList.emp;
rptName.DataBind();
}

and there you go. Your Repeater control is bound to a List<string>
image
Tip 2: Programmatically access a CheckBox inside a Repeater

Let us say you have a CheckBox defined inside a Repeater control

<asp:Repeater id=”rptName” runat=”server”>
<li><asp:checkbox id=”chkbox” runat=”server />
<input type=”checkbox” id=”<%# Container.DataItem %>”/>
</asp:Repeater>

To access this checkbox programmatically and print it’s value for each row generated, use this code in the rptName_ItemDataBound() event. Here we are assuming that the ‘married’ property is been bound to the CheckBox.

foreach (RepeaterItem item in rptName.Items)
{
CheckBox cb = item.FindControl(“chkbox”) as CheckBox;
if (cb.Checked)
{
Response.Write(“Status: ” + cb.Attributes[“married”].ToString() + “< br />”);
}
}

Tip 3: Binding a DropDownList control inside a Repeater

I have usually found developers binding the DropDownList inside the Repeater_ItemDataBound property of the Repeater Control. Ideally control databinding must be done at the Control level, rather than the Parent level. Here’s how

Let’s assume the following dropdownlist control is defined in the ItemTemplate of the Repeater

<asp:DropDownList ID=”ddlRating” runat=”server”
AutoPostBack=”true” EnableViewState=”false”>
</asp:DropDownList>
</td>

To populate this control, add an OnDataBinding event as shown below

<asp:DropDownList ID=”ddlCities” runat=”server”
AutoPostBack=”true” EnableViewState=”false”
OnDataBinding=”ddlCities_DataBinding”>
</asp:DropDownList>

and code the DataBinding event

protected void ddlCities_DataBinding(object sender, System.EventArgs e)
{
// populate DDL control here
}

 

Theo devcury

Quá khứ lầm lỗi và bài học cuộc đời


Cuối năm ngồi buồn ngẫm về quá khứ, thấy thời tuổi trẻ có nhiều thăng trầm quá, sắp sang năm mới rồi, nên cũng muốn chia sẻ cái quá khứ đó trong vài ngày còn lại của năm cũ, mong nhận đc sự đồng cảm từ các bác.

Mình năm nay 25t, sống ở 1 khu tập thể cũng khá nổi tiếng ở HN này, nếu nói ra chắc chắn 1 số bác ở đây biết mình là ai.xin phép đc giữ kín.

Read more of this post

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/

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";