C# - 텍스트 상자 값 가져 오기 및 자바 스크립트 함수에 보내기

Question

동일한 텍스트 상자에 세 개의 텍스트 상자와 <canvas>이있는 간단한 양식이 있으며이 세 필드의 유효성을 검사 한 다음 유효성을 검사하면 JavaScript로 보내야합니다. 기능을 사용하여 그림과 일부 텍스트를 <canvas> 요소 안에 그릴 수 있습니다. 사용자가 다른 값으로 다른 결과를 시도 할 수 있기 때문에 양식과 텍스트 상자는 값을 제출 한 후에 사라질 필요가 없습니다. 이전에는 다른 형식을 사용했지만 Ajax를 사용하지는 않았습니다. 클라이언트 측 유효성 검사를 사용하고 jQuery로 텍스트 상자 값을 얻을 수 있지만이 세 값을 사용하는 서버 측 코드가 더 많이 실행된다는 것을 알고 있습니다. 어떻게해야합니까?

Answer 1

컨트롤러에 결과를 처리 할 메서드를 만듭니다. 나는 이것이 로깅만을위한 것으로 가정하고 실제로 데이터를 반환 할 필요는 없다.

public useResults(string value1, string value2) 
{ 
    // ... Do something with the results 

    return Json(true); 
} 

위의 동작에 대한 URL을 구성하는 방법을 찾아보십시오. 아마도 숨겨진 분야에서;

@Html.Hidden("useResultsUrl", Url.Action("useResults", "controllerName")) 

는 그런 다음 자바 스크립트에서, 당신은 아마 이미 가지고있는 (자바 스크립트 작업을 트리거)와 아약스 호출에 추가 버튼에 클릭 이벤트를 붙이는 것.

다음은 JQuery를 사용하지만 원하는 경우 microsoft AJAX를 사용할 수 있습니다. 당신이 JQuery와 방법에 컨트롤러 액션의 URL을 제공하고, 당신을위한 AJAX 호출을 처리합니다 - JQuery.post 또는 JQuery.ajax을 사용 중 -

$(function() { 
    $("#button").click(function() { 
     $.ajax({ 
      url: $("input[name='useResultsUrl']").val(), // Get the url from the hidden field 
      type: "POST", 
      dataType: "JSON", 
      data: $("input[type='text']").serialize() // Get the value of the text inputs and serialise them. 
     }); 
    }); 

    // ... do other stuff 
}); 

Answer 2

보기는 jQuery를 사용하여 서버에 아약스 전화를 걸 수 있습니다.

그런 다음, 컨트롤러의 행동에, 당신은 JsonResult 반환 - JSON 형식으로 당신을 위해 데이터를 직렬화 : 마지막으로

e.g. return Json(model); 

을보기에서 JQuery와 아약스 호출에 성공 기능을 구현 -이 줘야을 컨트롤러가 반환 한 데이터를 원하는대로 처리 할 수 ​​있습니다.