要素をかみそりのテキストエリアに置き換えます

Question

タグを取り、@ Html.textarea（）razor htmlヘルパーに置き換えたいのですが、JQueryがDOM要素をhtmlヘルパーに置き換えることができるように見えません。これについてどうすればいいですか？

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

このdivを@Html.Textareaに置き換えるにはどうすればよいですか？ JQueryはdivタグとinputタグでそれを実現できます。

Answer 1

jQueryは@ Html.TextArea（）！タグで置き換えることはできません！

TextAreaヘルパーメソッドは、剃刀がビューをレンダリングしようとすると実行されるC＃メソッドです。これは、Webサーバーで発生します。 jQueryはクライアント側ライブラリであり、jQueryを使用することはブラウザのクライアント側で行われます。

しかし、これらのヘルパーメソッドはすべて最終的にDOM要素用のHTMLを生成します。つまり、jQueryを使用してその可視性を操作できます。あなたは、インライン編集のような何かをしようとしている場合

、あなたは、

まずで始まるあなたのラベルのdivと一緒にテキスト領域をレンダリングするが、それは最初に隠さ持って、このようなスクリプトを使用することができます。また、後で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は、参考になるものです