면도기 텍스트 영역으로 요소 바꾸기

태그를 가져 와서 @ Html.textarea() 면도기 HTML 도우미로 바꾸고 싶지만 JQuery가 DOM 요소를 html 헬퍼로 바꿀 수있는 것처럼 보이지 않습니다. 어떻게해야합니까?면도기 텍스트 영역으로 요소 바꾸기

using(@Html.BeginForm()) 
{ 
<a id="clickme">Edit</a> 
<div>@Model.username</div> 
}

어떻게이 div를 @Html.Textarea로 바꿀 수 있습니까? JQuery는 div 및 input 태그를 사용하여이를 수행 할 수 있습니다.

출처

2017-11-27 Stian

jQuery는 @ Html.TextArea()! 태그로 바꿀 수 없습니다!

도우미 메서드는 면도기가 뷰를 렌더링하려고 할 때 실행되는 C# 메서드입니다. 이것은 웹 서버에서 발생합니다. jQuery는 클라이언트 측 라이브러리이며 jQuery로 수행하는 모든 작업은 브라우저에서 클라이언트 측에서 수행됩니다.

그러나 이러한 모든 도우미 메서드는 궁극적으로 DOM 요소에 대한 일부 HTML을 생성합니다. 즉, jQuery를 사용하여이를 볼 수 있습니다. 당신은 인라인 편집과 같은 작업을 수행하려는 경우

, 당신은

먼저 시작하는이 같은 스크립트를 사용하여 라벨 사업부와 함께 텍스트 영역을 렌더링하지만, 처음에 숨겨진 수 있습니다. 또한 나중에 jQuery 선택기를 사용할 때 사용할 수있는 컨테이너 div 안에 레이블, 편집 링크 및 숨겨진 입력을 래핑하십시오. 사용자가 편집을 클릭 할 때

@using (@Html.BeginForm()) 
{ 
    <div class="edit-item"> 
     <a href="#" data-mode="label">Edit</a> 
     <div class="edit-label">@Model.FirstName</div> 
     @Html.TextAreaFor(a => a.FirstName, 
          new { style = "display:none;", @class = "edit-text" }) 
    </div> 

    <div class="edit-item"> 
     <a href="#" data-mode="label">Edit</a> 
     <div class="edit-label">@Model.UserName</div> 
     @Html.TextAreaFor(a => a.UserName, 
         new { style = "display:none;", @class = "edit-text" }) 
    </div> 
}

지금, 당신은 라벨과 숨겨진 입력의 가시성을 전환하고, 입력 요소의 값을 편집 할 사용자 후 레이블의 값을 업데이트해야합니다.

$(function() { 

    $("a[data-mode]").click(function (e) { 
     e.preventDefault(); 
     var _this = $(this); 
     var c = _this.closest(".edit-item"); 
     c.find(".edit-text").toggle(); 
     c.find(".edit-label").toggle(); 

     if (_this.attr("data-mode") === 'label') { 
      _this.attr("data-mode", 'edit'); 
      _this.text("done"); 
     } else if (_this.data("mode") === 'edit') { 
      c.find(".edit-label").text(c.find(".edit-text").val()); 
      _this.text("edit"); 
      _this.attr("data-mode", 'label'); 
     } 
    }); 

});

이것은 선두입니다. 필요에 따라이 코드를 최적화 할 수 있습니다.

Here은 참조 용으로 사용됩니다.

출처

2017-11-27 23:29:23 Shyju

면도기 텍스트 영역으로 요소 바꾸기

답변

관련 문제