사용자 정의 컨트롤을 통한 ASP.NET MVC 데이터 피드백

Question

새 제품에는이 필드에 올릴 올바른 값을 검색해야하는 몇 가지 데이터 입력 필드가 있습니다.

이 데이터 입력 필드를 입력하면보기 (예 : Ajax 구현)에서 검색 옵션을 제공하고 데이터베이스 값 검색을 허용하지만 결과가 반환 될 때 검색의 영향을받지 않는 다른 필드의 기존 값을 유지하십시오.

그러나 MVC를 사용하여이 작업을 수행하는 방법을 잘 모릅니다. 이 작업을 수행하는 방법에 대한 제안이있는 사람이 있습니까?

Answer 1

ASP.NET MVC보기의 일반적인 방법으로 에 데이터 입력 페이지를 작성하십시오. Ajax없이 작동 시키십시오. (예 : 자동 완성을 사용하지 않고 값만 입력하면 올바르게 전송됩니다).

사용자가 특정 동작을 수행 할 때 (예 : 특정 컨트롤의 키를 누를 때) 호출 할 JavaScript 메서드의 프로토 타입을 작성합니다. 그러나 이것은 aspx 페이지의 스크립트 태그 안에 있습니다. 불행히도, 스택 오버플로 내 예제에서는 스크립트 태그를 "sanitize"것, 그래서 그 부분을 보여줄 수 없습니다. 하지만 JavaScript 프로토 타입은 다음과 같습니다.

function startAutoComplete() { 
} 

이제 사용자 인터페이스 컨트롤에서 이벤트 처리기를 연결합니다. 응용 프로그램에 적합한 이벤트 핸들러를 프로토 타입 화 한 함수를 호출해야합니다. 귀하의 설명에서 onkeydown을 사용하고자하는 것처럼 들리지만, lots of events to choose from이 있습니다. 응용 프로그램에 적합한 두 개 이상의 이벤트를 처리해야 할 수도 있습니다.

지금까지 수행 한 모든 작업은 표준 aspx 및 JavaScript입니다. 이 단계에서는 ASP.NET MVC와 완전히 다른 전체 프로세스의 유일한 부분을 수행합니다. 방금 작성한 JavaScript 프로토 타입에 의해 (간접적으로) 호출 될 액션을 컨트롤러에 추가해야합니다. 액션은 적절한 입력 (예 : 컨트롤의 텍스트를 나타내는 문자열 등)을 받아 들여 JSON 형식으로 결과를 반환해야합니다. 여기에 아주 간단한 예를 보여 드리겠습니다. 실제 응용 프로그램에서 더 복잡한 코드를 자유롭게 사용할 수 있습니다.

public ActionResult GetSuggestions(string searchText) 
{ 
    return Json(new {SearchText = searchText}); 
} 

이 예제는 함수에 전달 된 값이 들어있는 하나의 속성을 포함하는 JavaScript 객체를 반환합니다. 당신이 말했듯이, 당신은 당신의 어플리케이션에 더 유용한 것을 쓸 수 있습니다.

이제이 함수를 JavaScript에서 호출해야합니다.

http://localhost/mycontroller/GetSuggestions?searchText=Foo 

아약스 자바 스크립트 라이브러리없이 호출하지만 당신이 jQuery를 또는 당신을 위해 크로스 브라우저 호환성 문제를 처리하는 다른 라이브러리를 사용하면 훨씬 쉽게 할 수 있습니다 : URI는 같을 것입니다. jQuery가 마음에 들었으므로 그 사실을 보여줄 것입니다. 이제 우리가 이전에 프로토 타입 startAutoComplete 방법을 업데이트하자

function startAutoComplete() { 
    var searchText = $("#myeditorid").text(); 
    $.getJSON("/mycontroller/GetSuggestions?searchText=" + searchText, 
     null, 
     autoCompleteResponse); 
} 

첫 번째 줄은 ID의 myeditorid와 컨트롤의 텍스트를 얻기 위해 jQuery를 사용합니다. 이를 ASP.NET MVC 액션에 searchText 인수로 쿼리 문자열 매개 변수로 추가하여 전달합니다.

$ .getJSON으로 시작하는 다음 행은 지정한 URI에 대한 Ajax 호출을 수행하는 jQuery 함수를 호출합니다.autoCompleteResponse라는 인수를 전달합니다. autoCompleteResponse는 Ajax 호출의 응답이 성공할 경우 호출 할 JavaScript 메소드의 이름입니다. 이제 autoCompleteResponse를 작성해야합니다.

function autoCompleteResponse(data) { 
    if (data.SearchText) 
    { 
     $("#myeditorid").text(data.SearchText); 
    } 
} 

이것은 "반환 된 데이터의 SearchText 속성이있는 경우 컨트롤의 텍스트를 해당 값으로 설정합니다."라고 말합니다. 다시 한 번, 반환 된 데이터를 사용하여 응용 프로그램에 적합한 작업을 수행하십시오.