채우기 자바스크립트/Jquery with Json data 클릭 시 상자 선택 옵션

채우기 자바스크립트/Jquery with Json data 클릭 시 상자 선택 옵션

저는 아직 Jquery를 배우고 있는데 제가 맡은 일이 조금 혼란스럽습니다.

간단한 일인 것 같네요...클릭할 때 옵션으로 채울 상자가 있습니다.누군가가 실제로 목록을 보기 위해 요청할 때만 페이지 로드에 해당 목록을 채우지 않았으면 합니다.또한 한 번만 채워야 합니다.누군가 목록을 확장할 때마다 요청이 나가는 것을 정말 원하지 않습니다.

Select(선택) 요소에 함수 호출이 있을 것으로 예상됩니다.

<select id="usersList" name="usersList" onclick="getUsers()">

그런 다음 자바스크립트 getUsers() 함수로 내 Json GetUsers() ActionMethod로 전화를 걸어 목록을 가져오도록 합니다.어떻게?

뭔가...?

function getUsers()
{
 getJSON("/Users/GetUsers", null, function (data){}
}

아니면 JQuery?

$("usersList").click(
  $.getJSON("/Users/GetUsers", null, function (data) {}
  )

이 게시물을 봤음을 말씀드려야겠습니다: selectlist가 로드되면 JQuery의 json data로 채우기 (문서가 아닌)

하지만 저는 이 모든 것을 정리하는 데 도움이 필요합니다.미리 감사드립니다!

여기 선택 상자를 채우기 위해 사용할 자바스크립트가 있습니다.

$.getJSON("/Users/GetUsers", null, function(data) {
    $("#UsersList option").remove(); // Remove all <option> child tags.
    $.each(data.Users, function(index, item) { // Iterates through a collection
        $("#UsersList").append( // Append an object to the inside of the select box
            $("<option></option>") // Yes you can do this.
                .text(item.Description)
                .val(item.Id)
        );
    });
});

사용자가 선택 상자를 클릭할 때가 아니라 페이지 로드에서 이를 트리거하는 것을 권장합니다. jQuery AJAX는 기본적으로 비동기식이므로 선택 상자가 비어 있는 상태가 되어 사용자에게 큰 혼란을 줄 수 있습니다.

이것이 당신의 질문의 정도였습니까 아니면 MVC측에서도 도움이 필요했습니까?ASP를 사용하는 경우.Net MVC에는 실제로 JsonResult의 특정 결과 유형이 있으며, 이는 JSON 컨트롤러 메소드를 생성하는 것을 좀 더 쉽게 만들어 줍니다. 이는 해당 뷰를 필요로 하지 않기 때문입니다.또한 익명의 데이터 구조를 사용할 수 있으므로 메소드별 예측을 좀 더 단순화할 수 있습니다.

---

EDIT 여기 위의 jQuery 코드가 이해할 수 있는 JSON 구조를 반환하는 기본 방법이 있습니다.참고: 속성은u.Username그리고.u.IDUsers 개체에 따라 달라집니다.

[HttpPost] 
public JsonResult GetUsers() { 
    return Json(new {
        Users = from u in _usersRepository.Get()
                select new { Description = u.Username, ID = u.ID }
    }); 
}

하지만 가능한 한 빨리 이 방법을 버리고 표준 JSON 메시지 구조를 사용하는 것을 권장합니다.제가 사용하는 것은 이런 것입니다.

{
    Success: bool,
    LoggedIn: bool,
    ClientErrors: [
        { Number: int, Description: string, Parameter: string },
        { Number: int, Description: string, Parameter: string }...
    ],
    ServerErrors: [
        { Id: int, Message: string },
        { Id: int, Message: string }...
    ],
    Data: {}
}

다음과 같은 몇 가지 이유가 있습니다.

1. 당신의 JSON 메서드 라이브러리는 일종의 프로토콜이므로 표준 헤더의 이점을 얻을 수 있습니다.
2. 오류 처리로 인한 이점이 가장 큽니다.사용자에게 무엇인가 잘못되었음을 알리는 일관된 방법을 갖는 것은 앞으로 매우 귀중한 일입니다.
3. 클라이언트 오류(잘못된 사용자 이름, 잘못된 암호 등)와 서버 오류(오프라인 데이터베이스)를 구별하는 것이 매우 중요합니다.하나는 사용자가 고칠 수 있고 다른 하나는 고칠 수 없습니다.
4. 클라이언트 오류는 해당 입력 필드 옆에 이러한 오류 메시지를 쉽게 표시할 수 있도록 메시지뿐만 아니라 해당 매개 변수를 원인으로 하는 매개 변수를 반환해야 합니다.
5. 또한 클라이언트 오류는 오류를 식별하는 고유한 숫자(메소드별)를 제공해야 합니다.이를 통해 다국어 지원이 가능합니다.
6. 서버 오류는 기록된 오류의 ID를 제공해야 합니다.이렇게 하면 사용자가 지원부에 문의하여 발생한 특정 오류를 참조할 수 있습니다.
7. 로그인 부울을 사용하면 JSON 메서드의 리디렉션 작업 결과가 영향을 주지 않으므로 인증이 필요한 메서드를 사용하는 모든 페이지에서 사용자를 로그인 화면으로 쉽게 다시 리디렉션할 수 있습니다.
8. 마지막으로 Data 필드는 메소드별 데이터를 제공해야 하는 곳입니다.

---

당신은 결코 나의 구조를 그것을 하는 방법으로 생각해서는 안됩니다.분명히 당신의 지원 요구는 저와 크게 다를 수 있습니다.어떤 특정 구조보다 일관성이 여기서 교훈입니다.

편집: 2016년 06월 01일 - 사람들이 여전히 이 답변을 보고 있는 것을 볼 때.드롭다운을 채우는 것과 관련하여 양방향 바인딩 프레임워크를 사용하는 것을 검토하는 것을 추천합니다.저는 개인적으로 녹아웃을 더 좋아합니다.각도는 있지만 얼마나 쉽고 가벼운지에 대한 JS.JS도 그 일을 할 것입니다.그 외에 이 답변의 나머지 부분은 여전히 상당히 최신 상태입니다.

편집: 8/10/2016 - 코드에 쉼표가 없습니다.

저는 jQuery 옵션을 사용하겠습니다.

// You are missing the new anonymous function call
$("#usersList").click(function() {
    // If the select list is empty:
    if ($(this).find("option").size() > 0) {
        // Documentation on getJSON: http://api.jquery.com/jQuery.getJSON/
        $.getJSON("/Users/GetUsers.php", null, function (data) {
            $.each(data.items, function(i,item){
                // Create and append the new options into the select list
                $("#usersList").append("<option value="+item.id+">"+item.yourName+"</option>");
            });
        });
    }
});

부터.append()연산은 상대적으로 'expensive'이므로 정보를 포함하는 문자열을 만들어 다음과 같이 한 번만 추가할 수도 있습니다.

var collaboration = "";
$.each(data.items, function(i,item){
    collaboration += "<option value="+item.id+">"+item.yourName+"</option>";
});
$("#usersList").append(collaboration);
...

다음은 선택 목록이 비어 있는지 확인하는 방법을 보여주는 jsfiddle입니다.

언급URL : https://stackoverflow.com/questions/10233464/populate-select-box-options-on-click-with-javascript-jquery-with-json-data