QnA
사용언어
(칠해주세요) => (C#,VB) |
사용툴 (VS) : |
운영체제 (OS) : win |
상세언어(칠해주세요.)
=> 1) ASP.NET, 2) ASP.NET MVC, 3) ASP.NET AJAX |
질문은 아니고요.
그동안 질문드렸던 골치아팠던 문제를 완전히 해결하였기에
친절하게 도움주신분께 감사드리며 공유하고자 올려보겠습니다.
<div id="divid" style="width:500px; height:200px; border:thin gray solid" runat="server" contenteditable="true" >
위와 같이 div테그에 contenteditable="true" 옵션을 주면 웹편집기처럼 입력을 받을 수있습니다.
이 div에 입력된 html 데이터값을 서버로 보내는 방법입니다.
핵심은 HiddenField 서버컨트롤에 있습니다
각고의 노력끝에
HiddenField 가 서버컨트롤이면서 html 값을 담을 수있다는 것을 발견하게 되었습니다.
사용된 방법을 요약하면
1. 클라이언트에서 div 안에다 html 데이터를 타이프하고
2. Button 컨트롤에서 서버크릭과 클라이언트 크릭을 두개다 줍니다
<asp:Button ID="Button1" runat="server" Text="Button" [안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xxxx[안내]태그제한으로등록되지않습니다-xxxxOnClick="Button1_Click" OnClientClick="layerpass()" />
3. 클라이언트 크릭 : div의 데이터값을 HiddenField에 옮기는 자바스크립트를 실행
<script>
function layerpass()
{
document.getElementById("HiddenField1").value = document.getElementById("divid").innerHTML;
}
</script>
서버 크릭 : 중요
protected void Button1_Click(object sender, EventArgs e)
{
//서버작업
string HtmlData = HiddenField1.Value;
//전체 페이지를 다시그린다
//Page_Load의 내용을 모두 실행시켜야 합니다
divid.InnerHtml = HiddenField1.Value;
divc.InnerHtml = HiddenField1.Value;
}
전체소스입니다
==============================================================================================
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
id=divid<div id="divid" style="width:500px; height:200px; border:thin gray solid" runat="server" contenteditable="true" ></div>
<br />
id=divc<div id="divc" style="border:thin gray solid" runat="server" ></div>
<br />
<asp:HiddenField ID="HiddenField1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" [안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xxxx[안내]태그제한으로등록되지않습니다-xxxxOnClick="Button1_Click" OnClientClick="layerpass()" />
</div>
</form>
</body>
</html>
<script>
function layerpass()
{
document.getElementById("HiddenField1").value = document.getElementById("divid").innerHTML;
}
</script>
==============================================================================================
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
//서버작업
string HtmlData = HiddenField1.Value;
//전체 페이지를 다시그린다
//Page_Load의 내용을 모두 실행시켜야 합니다
divid.InnerHtml = HiddenField1.Value;
divc.InnerHtml = HiddenField1.Value;
}
}
나만 몰랐던 거라면 죄송합니다.
첫댓글 학생이신가본데... 열심히 하세요... 화 이 팅!
많은 지도 편달바랍니다 ㅋㅋㅋ
박수 짝짝짝.... 한가지 옥에 티 ... 안 잡아도 돼는거지만. 그래도 기왕이면 한가지만 알고 가시면 더 좋으실것 같아서 ㅎㅎ 별건 아니구요..^^;; 전체 페이지를 다시 그린다.. 라는 주석 부분이있는데.. 사실 전체 페이지를 다시 다 그리는건 아닙니다. div 부분에다가만 html을 입히는건지 전체 페이지를 다시 그리는건 onPaint이라는 서버 이벤트가 따로 잇습니다. .별로 중요한건 아니구요 ^^;; 아뭏든 맞게 잘하신거 같습니다.
HiddenField 이건 서버 컨트롤이구요 일반 html 히든 컨트롤이 잇쬬 <text type="hidden" ~~~ 여기에다가 html을 넣고 한번 보내보세요..서버 컨트롤이 아닌 일반 컨트롤로도 가능합니다. 방법은 이미 아실듯..
그리고 한가지 질문사항이 있는데요 html 태그가 들어가면 서버로 보낼때 에러 날텐데 에러 안났나요? Requset 어쩌구 저쩌구 노란색 에러가 뜰텐데..
오셨군요. 반갑습니다. 에라는 났지만 다들 전문가들이신데 제가 그것까지 적는다면 욕하실것 같아서 생략했습니다. 디버거가 어떻게 고치라고 다 안내하더군요. 가르쳐 주신 방법은 해보고 결과 보고 하겠습니다.
그리고 저도 이번에 새로 알게 됏네요 contenteditable="true" > 이런 태그가 있는걸 말이죠..
그럼 이제 편집기 안 쓰고도 가단히 웹 html 편집기능을 구현할수 있겟네요.. (익스 10 이상 크롬에서만 되다는게 안습이지만..)
제가 좋은 편집기들을 두고 contenteditable="true"를 쓰는 이유가 있습니다. 스마트폰에서 타이프할때 contenteditable="true"가 화려한 편집기보다 월등하고요. <textarea>의 경우 요즘 스마트폰자판에 그림 아이콘을 넣는 게 있습니다. 아이콘을 <textarea>에 삽입하면 ??이런 식으로 깨져서 보입니다. 요즘 ex10보다 스마트폰을 더 많이 보는 시대라 별수없이 따라가는 것입니다.
다른 이야기 이지만, Page_Load 함수 안에 꼭 습관적으로 if (!IsPostBack) {} 넣는 습관이 중요합니다. ^^;
포스백 콜백 ㅎㅎㅎ 한참 머리아펐습니다.
넌 왜 다른 애기하니? 콜라광고 그것도 한 10년된거나 올리고 말이야... 재운이 까는 카페 위원회~~~ㅋㅋㅋ
ㅎㅎㅎ
감동적이고 재밋던데요 ㅎㅎㅎ
카페지기님 재가 노인들 상대하는 사이트라 그거 좀 퍼가도 되겠습니까?
두시님.....괜찮아용.ㅎㅎㅎ
뭐지 이 기분은 내가 엄청 나쁜 사람이 된 기분인데...
프로그래머들은 원래 스트레스받고 머리아픈 작업입니다. 카페지기님깨서 카페에 재미있는 글도 올리시고 하는 것은 엄청 신경 쓰시는 것입니다. ㅎㅎㅎ
@두시 뜨아. ~~