ASP.NET 앱 뒤에서 클라이언트 측 Javascript와 C # 코드간에 데이터를 어떻게 전달해야합니까?

21

ASP.NET 응용 프로그램 뒤에 클라이언트 쪽 JavaScript 코드와 C # 코드간에 데이터를 전달하는 가장 효율적인 표준 방법을 찾고 있습니다. 나는 이것을 달성하기 위해 다음과 같은 방법을 사용했지만 모두 약간의 퍼지 느낌.

JavaScript에서 C # 코드로 데이터를 전달하는 방법은 숨겨진 ASP 변수를 설정하고 포스트 백을 트리거하는 것입니다.

<asp:HiddenField ID="RandomList" runat="server" />

function SetDataField(data) {
      document.getElementById('<%=RandomList.ClientID%>').value = data;
}

그런 다음 C # 코드에서 목록을 수집합니다.

protected void GetData(object sender, EventArgs e)
{
      var _list = RandomList.value;
}

다른 방법으로 돌아 가면 종종 ScriptManager를 사용하여 함수를 등록하고 Page_Load 중에 데이터를 전달합니다.

ScriptManager.RegisterStartupScript(this.GetType(), "Set","get("Test();",true);

또는 포스트 백 전 또는 초기화 또는 사전 렌더링 단계 중에 컨트롤에 속성을 추가합니다.

Btn.Attributes.Add("onclick", "DisplayMessage("Hello");");

이 방법들은 저에게 도움이되었고 일을했지만 완벽하지는 않습니다. 클라이언트 측 JavaScript와 C # 백엔드 코드간에 데이터를 전달하는보다 표준적인 방법이 있습니까?

내가 좋아하는 몇 가지 게시물 본적 이 하나 는 HTMLElement 클래스를 설명; 이것이 내가 조사해야 할 것입니까?

web-development  c#  .net  javascript  asp.net 
— cwc1983
소스
5
— 오디드
서버와 클라이언트간에 데이터를 전달하여 의미에 따라 다릅니다. 페이지가 렌더링되는 시점에 데이터가 알려진 경우 리터럴 또는 유사하거나 다른 변형을 통해 데이터를 작성하거나 json을 설정하는 스크립트를 추가하는 것이 완벽하게 합리적입니다. OTOH, 포스트 백을하지 않고 서버와 상호 작용하는 페이지를 만들려고한다면 완전히 다른 문제입니다. 분명히 json을보십시오.
— Murph
예를 들어. xml 파일에서 일부 데이터를 가져 오는 클라이언트에서 버튼을 시작한 경우. 그런 다음 C #의 데이터에 대해 일부 계산이 수행됩니다. 그런 다음 완성 된 결과가 예쁜 자바 스크립트 그래픽 디스플레이로 표시되기를 원합니다. 그것은 포스트 백이 제기 될 때까지 클라이언트가 결과를 알지 못하는 하나의 포스트 백입니다.
— cwc1983
그 의견에서 당신은 여전히 ​​서버에서 모든 작업을 수행 할 수 있습니다-로드 / 프로세스 / 리턴-첫 번째 경우, 나는 그렇게 할 것입니다. 데이터를 json으로 형식화하고 페이지를 렌더링 할 때 json을 포함하십시오 (리터럴을 사용하면이 작업을 수행 할 수 있습니다). 그것이 작동하도록하면 아마도 더 비동기적인 것을 원할 것입니다. 그러나 동일한 json이 될 것입니다.
— Murph
모두 감사합니다. 여기에서 조언을 읽고 추가 연구를 한 후 내가하고 싶은 일을 달성하는 새로운 방법을 찾았습니다. 내가 얻는 주요 문제는 Ajax 게시물을 수행 할 때 클라이언트 측 코드를 가져 와서 프로그램의 위치를 ​​기억할 수 없다는 것입니다. 이제 JQuery $ Ajax.Post를 사용하여 클라이언트 저장 세션 데이터에 다시 성공 게시를 제공합니다.
— cwc1983

답변:

9

이 예제 와 같이 JavaScript에서 정적 페이지 메소드를 간단하고 쉽게 호출 할 수 있습니다 . 여러 페이지에서 메소드를 호출해야하는 경우 웹 서비스를 설정하고 동일한 방식으로 Javascript에서 호출 할 수 있습니다. 아래에 예제도 포함되어 있습니다.

.aspx 코드

<asp:ScriptManager ID="ScriptManager1" 
EnablePageMethods="true" 
EnablePartialRendering="true" runat="server" />

코드 숨김 코드

using System.Web.Services;

[WebMethod]
public static string MyMethod(string name)
{
    return "Hello " + name;
}

자바 스크립트 코드

function test() {
    alert(PageMethods.MyMethod("Paul Hayman"));
}

참고 : 페이지 방법은 정적이어야합니다. 응용 프로그램이 수행하려는 작업에 따라 문제가 될 수 있습니다. 그러나 정보가 전혀 세션을 기반으로하고 일종의 내장 인증을 사용하는 경우 WebMethod 데코레이터에 EnableSession 속성을 추가하면 HttpContext.Current.User에 액세스 할 수 있습니다. 세션 등

— 케이시 스피크 만
소스
좋은 예, 이것은 잘 작동하며 사용할 것입니다. 감사!
— Mausimo
3

jQuery를 살펴 보는 것이 좋습니다. JQuery를 사용하면 AJAX를 서버로 다시 호출하여 필요한 형식으로 데이터를 다시 전송할 수 있습니다. 자바 스크립트에서 직접 사용할 수 있기 때문에 JSON이 될 수 있습니다.

jQuery를 사용하여 서버에서 자바 스크립트로 데이터를 가져 오기 위해 다음 페치는 http://youserver.com/my/uri에 대한 비동기 요청을 작성 하고 제공된 함수의 서버에서 데이터를 수신합니다.

$.get("my/uri", 
    function(data) { 
       // client side logic using the data from the server
    })

자바 스크립트에서 서버로 데이터를 보내는 것은 비슷하게 작동합니다.

$.post("my/uri", { aValue : "put any data for the server here" }
    function(data) { 
       // client side logic using the data returned from the server
    })
— 기독교 호르 달
소스
고마워, 이것은 훌륭하지만 클라이언트가 무엇을 표시할지 알기 전에 포스트 백이 수행되는 상황을 구체적으로 언급합니다. "결과"가 c #을 통해 달성되면 어떻게 클라이언트에 "주입"합니까?
— cwc1983
3

마이크로 소프트는 UpdatePanel "표준"방식으로 아약스를 수행 할 수 통제를 있습니다. 개인적으로 사용하지 않는 것이 좋습니다 .JavaScript를 직접 사용할 때 가지고있는 풍부한 기능 세트 및 제어 근처에는 없습니다.

이것이 내가 개인적으로하는 방법입니다.

표준 페이지 포스트 백에 사용하려는 클라이언트 측 값에 대해 숨겨진 필드를 만듭니다 (예 : 사용자가 제출할 때)

<asp:HiddenField ID="selectedProduct" runat="server" />

코드 뒤에는 클라이언트 측을 사용하려는 컨트롤을 등록하십시오.

    /* Register the controls we want to use client side */

    string js = "var productBox = document.getElementById('" + selectedProduct.ClientID + "'); ";
    js += "var macCodeBoxBE = document.getElementById('" + beMacCode.ClientID + "'); ";


    ClientScript.RegisterStartupScript(this.GetType(), "prodBox", js, true);

javascript 라이브러리 *를 사용하여 ajax post / get을 수행 한 다음 JavaScript를 사용하여 응답에 따라 페이지를 업데이트하십시오.

$.get("../ajax/BTBookAppointment.aspx?dsl=" + telNumberBox.value + "&date=" + requiredDate.value + "&timeslot=" + ddTimeslot.value, function (response, status, xhr) {

    if (response.indexOf("not available") > -1) {
        loaderImage.src = "../images/cross.png"
        output.innerHTML = response;
    } });

작업을 수행하기 위해 render 메소드를 대체하는 seprate "ajax"페이지를 작성하십시오.

protected override void Render(HtmlTextWriter writer)
{
    if (string.IsNullOrEmpty(Request["mac"])) { return; }
    if (string.IsNullOrEmpty(Request["dsl"])) { return; }
    DataLayer.Checkers.BTmacCheckResponse rsp = DataLayer.Checkers.Foo.CheckMAC(Request["dsl"], Request["mac"]);

    writer.Write(rsp.Valid.ToString());
}

* 선택할 수있는 라이브러리가 많이 있으며 자신의 롤을 할 수도 있습니다. 안정적이고 광범위한 기능 세트를 갖춘 jQuery를 추천 합니다.

— 톰 스콰 이어스
소스
8
서버에서 JavaScript 스 니펫을 문자열로 작성하는 사람들을 위해 지옥에 특별한 장소가 있다고 확신합니다.
— Raynos
1
@Raynos JavaScript 서버 측을 생성하는 데 아무런 문제가 없습니다.
— Tom Squires
2
서버가 어떤 작업을 수행하려면 합리적인 데이터가있는 합리적인 URI로 HTTP 요청 (XHR 사용)을 보냅니다. 거기에서 HTTP 서버는 그것으로 무엇을 해야할지 알게 될 것입니다.
— Raynos
서버쪽에 JS를 넣지 마십시오. 그것은 클라이언트에게갑니다. 따라서 이름 클라이언트 측 코드입니다. 캡 잠금 키가 멈췄습니다.
— snowYetis
3

JSON은 작업을 수행하는 가장 좋은 방법입니다. "C #과 JavaScript"사이의 문제로 문제를 보지 마십시오. 이러한 사고 방식은 원래 게시물에있는 것과 같은 코드의 이상을 초래합니다.

더 일반적으로, 그것은 언어와 무관하게 클라이언트와 서버 사이에 객체를 전달하는 것입니다. JSON은 널리 지원되고 읽기 쉽기 때문에 작업에 좋습니다.

— 브라이언 맥키
소스
2

서버 측 ASP가 필요없는 입력 태그를 설정하려면 다음을 사용할 수 있습니다. 또는 양식 데이터 바인딩의 경우 <% # %>

html :

<input type="hidden" value='<%= RandomValues %>' name="RANDOM_VALUES" />

ASP 제어 :

<asp:HiddenField ID="RandomList" runat="server" />

포스트 백에서 값을 얻으려면

Request.Form["RANDOM_VALUES"]

그것의 ASP는 숨겨진 입력을 제어 할 수 있습니다

Request.Form[RandomList.UniqueID]

Request.Form의 좋은 부분은 동일한 "name"속성을 가진 여러 개의 태그가있는 경우 결과를 CSV로 반환한다는 것입니다.

— MackPro
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.