내가처럼 보이는 웹 방법을 가지고

Question

jQuery를 아약스와 저장 프로 시저에 여러 매개 변수를 보내기 ans JS 오직 하나의 매개 변수가 저장 프로 시저로 보내지고 작동합니다. 을 console.log (drugName)와 CONSOLE.LOG (drugColor) 나는

{"drugColor":"rgb(255, 69, 0)"} 
{"drugName":"ORACEA"} 

가 어떻게 아약스 호출의 data 매개 변수는 한 번에 여러 매개 변수를 만들 수 있습니다 얻을에서 ? jQuery ajax를 사용하여 저장 프로 시저에 둘 이상의 매개 변수를 한 번에 전송할 때 알아야하는 일반적인 기술의 이름은 무엇입니까?

data: 'drugName='+ drugName + '&drugColor=' + drugColor; 

Answer 1

따라서이 같은 서비스 호출에 하나 개의 매개 변수를 가지고, 클라이언트 측에서 객체 리터럴을 구축하고 서비스에 그 전체 개체를 전달 고려 :

클라이언트 측 :

var myData = {}; 
myData.DrugName' = $(ui.draggable).find("span").text(); 
myData.DrugColor' = $(ui.draggable).css("background-color"); 

// Create a data transfer object (DTO) with the proper structure, which is what we will pass to the service. 
var DTO = { 'theData' : myData }; 

$.ajax({ 
    type: "POST", 
    contentType: "application/json; charset=utf-8", 
    url: "SendDrugName.asmx/InsertDrugNameToDatabase", 
    data: JSON.stringify(DTO), 
    dataType: "json", 
    success: function (data) { 
     //response(data.d); 
    }, 
    error: function (xhr, ajaxOptions, thrownError) { 
     console.log(xhr.status); 
     console.log(thrownError); 
    } 
}); 

이제 서비스 측에이 같은 문자가 위에서 만든 객체의 내용을 나타내는 클래스를 구축해야합니다

는

public class ServiceData 
{ 
    public string DrugName { get; set; } 
    public string DrugColor { get; set; } 
} 

마지막으로 변경하려면 웹 서비스 코드는 다음과 같이 하나 개의 매개 변수를 적용합니다 : JQuery와 통화에서 전달 된 데이터는 자동으로 긴 이름이 모두에 일치로 ServiceData 클래스에있는 클래스 속성와 일치한다 : 주

[WebMethod] 
public void InsertDrugNameAndColorToDatabase(ServiceData theData) 
{ 
    string cs = ConfigurationManager.ConnectionStrings["dbcs"].ConnectionString; 
    using (var con = new SqlConnection(cs)) 
    { 
     using (var cmd = new SqlCommand("spInsertDrugText", con)) 
     { 
      con.Open(); 
      cmd.CommandType = CommandType.StoredProcedure; 
      cmd.Parameters.AddWithValue("@drugName", theData.DrugName); 
      cmd.Parameters.AddWithValue("@drugColor", theData.DrugColor); 
      cmd.ExecuteNonQuery(); 
     } 
    } 
} 

클라이언트 측과 서버 측.

Answer 2

당신 같은 여러 데이터 항목을 지정할 수 있습니다. 이 시도 :

$(".drugAnswers").droppable({ 
    drop: function (event, ui) { 
     $.ajax({ 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      url: "SendDrugName.asmx/InsertDrugNameToDatabase", 
      data: { 
       'drugName': $(ui.draggable).find("span").text(), 
       'drugColor': $(ui.draggable).css("background-color") 
      }, 
      dataType: "json", 
      success: function (data) { 
       //response(data.d); 
      }, 
      error: function (xhr, ajaxOptions, thrownError) { 
       console.log(xhr.status); 
       console.log(thrownError); 
      } 
     }); 
    } 
}); 

ajax() 기능은 다음 당신을 위해 그것을 캐릭터 라인 화하고 C#을 엔드 포인트에 가로 질러 전달합니다.

Answer 3

당신은 전혀 캐릭터 라인 화 할 필요가 없습니다, 당신은 객체로 매개 변수를 전달할 수 있습니다 :