ASP.net 드롭다운리스트 메인선택 박스에서 선택했을때 메인선택에 해당라는 디테일 선택을 2번째 드롭다운리스트에
JQuery를 사용하여 AJax로 뿌리는 코드입니다
--aspx페이지
1. 첫번째 메인선택 드롭다운리스트 는 CS단에서 뿌리고
2. 메인선택 드롭다운리스트에서 선택했을떄 onchang 이벤트에서 CS단의 웹메서드의 디테일 선택내용을
Jquery Ajax로 구현된 함수를 호출해서 디테일선택 드롭다운리스트을 채운다
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-ｅquiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
function getFoodKindDetail() {
$.ajax({
type: "POST",
url: "FoodReg1.aspx/LoadFoodKindDetail",
contentType: "application/json; charset=utf-8",
data: '{"mainfood" : "' + $("#rblByFoodKindsMst").val() + '"}',
dataType: "json",
success: function (result) {
$("#ddlByFoodKindsSub").empty();
$.each(result.d, function (key, value) {
$("#ddlByFoodKindsSub").append($("<option></option>").val(value.fkdCode).html(value.fkdName));
});
},
error: function (result) {
alert(result.status + ': ' + result.status.Text);
}
});
}
</script>
<script>
$(document).ready(function () {
$.ajax({
type: "POST",
url: "FoodReg1.aspx/LoadFoodKindDetail",
contentType: "application/json; charset=utf-8",
data: '{"mainfood" : "' + $("#rblByFoodKindsMst").val() + '"}',
// data: '{mainfood: ' + $('#<%=rblByFoodKindsMst.ClientID%>').val() + '}',
dataType: "json",
success: function (result) {
// result = result.d;
// alert($("#rblByFoodKindsMst").val());
$("#ddlByFoodKindsSub").empty;
$.each(result.d, function (key, value) {
$("#ddlByFoodKindsSub").append($("<option></option>").val(value.fkdCode).html(value.fkdName));
});
},
error: function (result) {
alert(result.status + ': ' + result.status.Text);
}
});
});
</script>
---CS단 코드비하인드
메인선택 드롭다운리스트는 페이지로드시 뿌리고
WwbMehod 속성의 정적 메소드에 디테일 드로박스에 뿌려질내용을 구현해 놓은후 Ajax Jquery에서 호출한다
*디테일 선택값을 CS 에서 사용하려면 히든컨트롤에 넣어서 엑세스해야한다
public partial class AjaxDropDown : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
// 디비에서가져다첫번째 메인선택 드롭다운리스트 박스를 채운다
//디비연결 엑세스과정 생략
}
}
[WebMethod]
public static List<foodDetail> LoadFoodKindDetail(string mainfood)
{
List<foodDetail> fkDetail = new List<foodDetail>();
DataSet dsFoodDetail = new DataSet();
DataTable dt = new DataTable();
// 데이터베이스 엑세스과정생략
// 파라미터 메인선택 VALUE mainfood 로 디테일 선택 내용을 DataTable dt에 받는다....
//...과정 생략
// 예) 데이터 테이블의 FKD_Code, FKD_Name컬럼을 뿌림
dt = dsFoodDetail.Tables[0];
for (int i = 0; i < dt.Rows.Count; i++)
{
fkDetail.Add(new foodDetail
{
fkdCode = dt.Rows[i]["FKD_Code"].ToString(),
fkdName = dt.Rows[i]["FKD_Name"].ToString()
});
}
return fkDetail;
}
public class foodDetail
{
public string fkdCode { get; set; }
public string fkdName { get; set; }
}
}
}
-- 힐링스케치 --
------- 닷넷덕후 -----
'닷넷덕후 (ASP.NET Tips)' 카테고리의 다른 글
| ASP.net 반경검색을 위한 다음 로컬 API 사용 TM 좌표 가져오기 (0) | 2015.11.25 |
|---|---|
| ASP.NET에서 다음 우편번호 Api 사용 (0) | 2015.11.25 |