asp.net 웹 페이지 동적 조회 조건 의 실현

장면 에 최근 에 필요 한 것 이 있 습 니 다.mongodb 에 각종 유형의 데 이 터 를 삽입 합 니 다.업무 로 그 를 기록 하 는 데이터 베이스 라 고 할 수 있 습 니 다.업무 대상 유형 이 다 르 기 때문에 삽 입 된 데이터 형식 도 완전히 다르다.그 밖 에 데 이 터 를 검색 할 수 있 는 검색 인터페이스 도 제공 해 야 한다.데 이 터 를 삽입 하 는 것 은 문제 가 없 지만 조 회 는...디자인 방안 을 조회 할 때 먼저 생각 나 는 것 은 사용자 에 게 mongodb 조회 문법 을 직접 입력 하 게 하 는 것 입 니 다.json 형식 과 유사 합 니 다.하지만 이용자 들 도 개 발 했 지만 이 문법 에 익숙 하지 않 아 포기 했다.두 번 째 아 이 디 어 는 SQL 문 구 를 입력 하고 변환 하 라 는 것 입 니 다.결 과 는 실패 로 끝 났 습 니 다.마지막 으로 아 이 튠 즈 스마트 재생 목록 의 상호작용 디자인 을 보 았 습 니 다.여기 서 조건 을 삽입 할 수도 있 고 조건 을 삽입 할 수도 있 습 니 다.(괄호 를 삽입 한 것 과 같 습 니 다.괄호 안에 많은 조건 이 있 습 니 다)그림 속 의 표현 식 은 Score>3&&Type='Music'&&&Author=='&&'(Author=='&&Author==='&&&Author==')이 라 고 볼 수 있다.즉,이러한 상호작용 은 각종 내장 논 리 를 충분히 실현 할 수 있다 는 것 이다.데이터 구 조 는 이런 구 조 를 설계 하기 위해 서 는 데이터 구 조 를 잘 생각해 야 한다.분석 한 결과 여기 에는 사실 두 가지 유형 이 있 는데 하 나 는 Query Group 이 고 하 나 는 Query Item 이 라 고 볼 수 있다.코드 는 다음 과 같 습 니 다.

 
public class QueryGroup 
{ 
public GroupType GroupType { get; set; } 
public List<QueryItem> Items { get; set; } 
public List<QueryGroup> Groups { get; set; } 
} 

public class QueryItem 
{ 
public string Name { get; set; } 
public QuerySymbol OperatorType { get; set; } 
public string Value { get; set; } 
public DataType ValueType { get; set; } 
} 

Query Group 은 검색 조건 을 포함 하고 하위 Query Group 도 포함 합 니 다.또한 중요 한 속성 Group Type 도 있 습 니 다.이 데 이 터 를 대표 하 는 논리 적 관 계 는 And 또는 Or 입 니 다.즉,상기 인터페이스의'모든'과'임 의'옵션 이다.Query Item 내부 속성 은 필드 이름,논리 작업 유형(같 음,같 지 않 음,...이상),속성 유형(정수,텍스트...)입 니 다.데이터 구 조 를 설계 한 후에 몇 가지 난점 이 있 을 것 이다.1.전단 상호작용 은 어떻게 디자인 합 니까?2.백 엔 드 에 어떻게 전달 하나 요?3.백 엔 드 에서 데 이 터 를 얻 은 후 어떻게 조회 표현 식 으로 변환 합 니까?그럼 한 명 씩 정복 하 자!전단 디자인 인 터 랙 션여 기 는 boottstrap 을 사용 하 는데 화면 이 매우 아름 답 습 니 다!먼저 전단 설계 방안 을 살 펴 보 자.위 는 동적 조건 이 고 아래 는 고정된 조건 이다.이곳 의 구 조 는 위의 데이터 구조 와 일치 하여 html 를 두 가지 로 나 누 었 습 니 다.Query Group 과 Query Item.각각 두 개의 숨겨 진 div 에 넣 어 모드 로 사용 합 니 다.코드 는 다음 과 같 습 니 다.

 
<div style="display: none;"> 
<div class="query-group-template"> 
<div class="query-group well"> 
<div class="query-title"> 
<span class="help-inline">    </span> 
<select class="input-small group-type"> 
<option value="1">  </option> 
<option value="2">  </option> 
</select> 
<span class="help-inline">  ：</span> 
<button type="button" class="btn btn-mini btn-success add-query-item" title="      "> 
<i class="icon-plus icon-white"></i> 
</button> 
<button type="button" class="btn btn-mini btn-info add-query-group" title="      "> 
<i class="icon-th-list icon-white"></i> 
</button> 
<button type="button" class="btn btn-mini btn-danger delete-query-group" title="      "> 
<i class="icon-minus icon-white"></i> 
</button> 
</div> 
</div> 
</div> 
<div class="query-item-template"> 
<div class="query-item"> 
<input type="text" value="" placeholder="   " title="   " class="property-name" /> 
<select class="input-mini operate-type" title="  "> 
<option value="1">==</option> 
<option value="2">!=</option> 
<option value="3">></option> 
<option value="4">>=</option> 
<option value="5"><</option> 
<option value="6"><=</option> 
<option value="7">LK</option> 
</select> 
<input type="text" class="query-value" value="" placeholder=" " title=" " /> 
<select class="input-medium value-type"> 
<option value="3">String</option> 
<option value="1">Int</option> 
<option value="2">Double</option> 
<option value="4">DateTime</option> 
</select> 
<button type="button" class="btn btn-mini btn-danger delete-query-item" title="    "> 
<i class="icon-minus icon-white"></i> 
</button> 
</div> 
</div> 
</div> 

여 기 는 어렵 지 않 습 니 다.가장 중요 한 것 은 바로 각 버튼 의 사건 입 니 다.자세히 보면 모두 4 개의 버튼 이 있 습 니 다.위의 세 가 지 는 한 줄 의 조건 을 추가 하고 한 조 의 조건 을 추가 하 며 본 조 의 조건 을 삭제 하 는 것 입 니 다.단일 조건 오른쪽 하 나 는:이 조건 을 삭제 합 니 다.이 논 리 는 사실 매우 간단 합 니 다.

 
$('#queryContainer').append($('.query-group-template>.query-group').clone()) 
$('#queryContainer>.query-group').first().find('.delete-query-group').remove(); 
$('button.add-query-item').live('click', function () { 
$(this).parent().parent().append($('.query-item-template>.query-item').clone()); 
return false; 
}); 
$('button.add-query-group').live('click', function () { 
$(this).parent().parent().append($('.query-group-template>.query-group').clone()); 
return false; 
}); 
$('button.delete-query-group').live('click', function () { 
if (!$(this).parent().parent().parent().hasClass('query-group')) { return false; } 
$(this).parent().parent().remove(); 
return false; 
}); 
$('button.delete-query-item').live('click', function () { 
$(this).parent().remove(); 
return false; 
}); 

또한 코드 앞의 두 줄 을 보고 처음 불 러 올 때 조건 을 추가 하 는 것 을 잊 지 마 세 요.그리고 기본 그룹의'이 그룹 조건 삭제'단 추 를 제거 하 세 요.전단 데이터 처리 인터페이스 의 상호작용 은 정말 간단 하지만 어떻게 이 데 이 터 를 백 엔 드 에 전달 합 니까?폼 을 한 필드 씩 꺼 내 서 전달 할 까요?그 백 엔 드 가 울 것 같 습 니 다.그럼...검색 조건 의 구조 가 매우 뚜렷 한데 왜 먼저 자바 script 의 대상 이 될 수 없 습 니까?그 다음 에 이 대상 을 직렬 화...그리고 제 이 슨 을 백 엔 드 에 전달 합 니 다.마지막 으로 백 엔 드 는 같은 구조의 유형 을 정의 한 다음 에 반 직렬 화 합 니 다.즉,이 상호작용 과정 에서 폼 데이터 인 스 턴 스 를 자바 script 의 대상 으로 만 들 면 됩 니 다!그럼 제 가 먼저 두 대상 을 정의 하 겠 습 니 다.(필드 이름 은 백 엔 드 와 같 아야 합 니 다)

 
function QueryGroup() { 
this.GroupType = 0; 
this.Items = []; 
this.Groups = []; 
} 
function QueryItem() { 
this.Name = ''; 
this.OperatorType = 0; 
this.Value = ''; 
this.ValueType = 0; 
} 

인 스 턴 스 를 대상 으로 하 는 방법 도 매우 간단 합 니 다.재 귀 를 사용 해 야 합 니 다.기본 논 리 는 가장 바깥쪽 Query Group 내부 의 대상 을 한 번 순환 하고 Query Item 이 라면 값 을 가리 키 며 Query Group 이 라면 재 귀 하여 이 방법 을 호출 하 는 것 입 니 다.코드 는 다음 과 같 습 니 다.

 
function GetQueryGroup(group) { 
group = $(group); 
var queryGroup = new QueryGroup(); 
queryGroup.GroupType = parseInt(group.find('.group-type').val()); 
var queryItems = group.children('.query-item'); 
for (var k = 0; k < queryItems.length; k++) { 
var queryItem = new QueryItem(); 
queryItem.Name = $(queryItems[k]).find('.property-name').val(); 
queryItem.OperatorType = parseInt($(queryItems[k]).find('.operate-type').val()); 
queryItem.Value = $(queryItems[k]).find('.query-value').val(); 
queryItem.ValueType = parseInt($(queryItems[k]).find('.value-type').val()); 
queryGroup.Items.push(queryItem); 
} 
var childGroups = group.children('.query-group'); 
for (var k = 0; k < childGroups.length; k++) { 
queryGroup.Groups.push(GetQueryGroup(childGroups[k])); 
} 
return queryGroup; 
} 

마지막 으로 폼 은 폼 을 제출 하고 최종 적 으로 하나의 대상 을 생 성 합 니 다.이 대상 을 json 으로 정렬 한 다음 에 인 코딩 합 니 다.encodeURIComponent(JSON.stringify(item)백 엔 드 데이터 처리 백 엔 드 데이터 처 리 는 주로 두 부분 으로 나 뉘 는데 그것 이 바로 역 직렬 화,조회 조건 으로 전환 합 니 다.데이터 구 조 는 위 에서 정 의 했 습 니 다.필드 이름 이 json 과 같 으 면 바로 역 직렬 화 할 수 있 습 니 다.

 
var json = Uri.UnescapeDataString(Request["query"]); 
var item = JsonConvert.DeserializeObject<QueryGroup>(json); 

두 줄 의 코드 가.net 의 대상 이 됩 니 다!마지막 으로 조회 조건 을 만 드 는 것 도 매우 간단 하고 방법 이기 도 합 니 다.재 귀적 으로 호출 하면 됩 니 다.기본 논리 와 전단 에서 폼 데 이 터 를 예화 하 는 과정 이 매우 비슷 합 니 다.저 는 Query Group 에서 하나의 방법 을 확 장 했 습 니 다.그 중에서 ICriteria 는 IMongoQuery 와 구조 가 비슷 합 니 다.mongodb 를 사용 한 학생 들 은 IMongoQuery 라 고 생각 하면 됩 니 다.이 방법 은 한 겹 만 쌌 을 뿐 결국은 IMongoQuery 를 생 성 했 습 니 다.

 
public class QueryGroup 
{ 
public GroupType GroupType { get; set; } 
public List<QueryItem> Items { get; set; } 
public List<QueryGroup> Groups { get; set; } 
public ICriteria ToICriteria() 
{ 
ICriteria result = null; 
foreach (var criteria in GetICriteriaList()) 
{ 
if (result == null) 
{ 
result = criteria; 
continue; 
} 
if (GroupType == Model.GroupType.AndAlse) 
{ 
result = result.Add(criteria); 
continue; 
} 
if (GroupType == Model.GroupType.OrElse) 
{ 
result = result.Or(criteria); 
continue; 
} 
} 
return result; 
} 
private List<ICriteria> GetICriteriaList() 
{ 
var list = new List<ICriteria>(); 
foreach (var item in Items) 
{ 
list.Add(new Criteria(item.Name, item.OperatorType, new QueryValue(item.ValueType, item.Value, FieldHierarchyLevel.Child))); 
} 
foreach (var group in Groups) 
{ 
list.Add(group.ToICriteria()); 
} 
return list; 
} 
} 

조회 조건 대상 을 받 은 후 관련 조회 방법 을 직접 호출 하면 된다.후기 본 장면 에서 사용 하 는 것 은 mongodb 이기 때문에 최종 적 으로 전환 한 것 은 mongodb 조회 대상 이다.사실 SQL 을 바 꾸 는 것 도 편리 하 다.또한,조금 복잡 하 게.net 의 표현 식 트 리 로 전환 하 는 것 도 문제 가 있 습 니 다!마지막 으로 gif 의 데모작성 자:Dozer