MVC CMSサイト "textboxfor"がクリックされるまでプレーンテキストのように書式設定されました

Question

編集モードで別のテキストフィールドをクリックするだけで編集できるCMSタイプのWebサイトを構築しようとしています。

問題は、TextBoxForコードを使用すると、既定のテキストボックススタイリングが形成されないようにすることです。

Razorの 'TextBoxFor'コードを通常の静的テキストと同じようにフォーマットできますが、編集可能なままにしておく方法はありますか？メインサイトで使用される既存のCSSクラスを使用する必要があります。

この理由は、ユーザーが編集中にサイトの外観をリアルタイムでプレビューするためです。

したがって、たとえば、画像におけるこれらのテキストフィールドの各（モデルから移入）が編集可能である必要はなく、そうする編集ボックスは、プレーンテキストのようになります。

これは可能ですか？私は.NET MVC 4を使用しています...

Answer 1

Razorは単純にHTMLを生成します。 あなたができることは、入力をクラスまたはIDでレンダリングするようにrazorに指示することです。例えば

：

@Html.TextBoxFor(m => m.Property, new { @class = "your-class" }) 

その後、あなたはCSSを使用して、ニーズに応じて、あなたのテキストボックスのスタイルを設定することができます。

.your-class:focus{ 
    //your style here 
} 

また、Razorは非常に役に立ちますが、スタティックにすることもできます。 場合によっては、目標を達成するためにプレーンHTMLを使用する必要があります。

Answer 2

contenteditableはHTML5です。どのように動作するかを理解するには、下記の例をご覧ください。

読むよりおよそcontenteditableLINK

$('.edit').click(function(){ 
 
    $(this).hide(); 
 
    $('.box').addClass('editable'); 
 
    $('.text').attr('contenteditable', 'true'); 
 
    $('.save').show(); 
 
}); 
 

 
$('.save').click(function(){ 
 
    $(this).hide(); 
 
    $('.box').removeClass('editable'); 
 
    $('.text').removeAttr('contenteditable'); 
 
    $('.edit').show(); 
 
});

body { 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    background: url(https://subtlepatterns.com/patterns/wood_pattern.png); 
 
} 
 

 
h3 { 
 
    padding-left: 20px; 
 
    text-transform: uppercase; 
 
} 
 

 
.box { 
 
    position: relative; 
 
    margin: 20px; 
 
    padding: 30px 10px 5px; 
 
    width: 400px; 
 
    min-height: 150px; 
 
    border: 1px solid grey; 
 
    border-radius: 3px; 
 
    background: #fff; 
 
} 
 

 
.editable { 
 
    border-color: #bd0f18; 
 
    box-shadow: inset 0 0 10px #555; 
 
    background: #f2f2f2; 
 
} 
 

 
.text { 
 
    outline: none; 
 
} 
 

 
.edit, .save { 
 
    width: 30px; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 0px; 
 
    padding: 4px 10px; 
 
    border-top-right-radius: 2px; 
 
    border-bottom-left-radius: 10px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    box-shadow: -1px 1px 4px rgba(0,0,0,0.5); 
 
} 
 

 
.edit { 
 
    background: #557a11; 
 
    color: #f0f0f0; 
 
    opacity: 0; 
 
    transition: opacity .2s ease-in-out; 
 
} 
 

 
.save { 
 
    display: none; 
 
    background: #bd0f18; 
 
    color: #f0f0f0; 
 
} 
 

 
.box:hover .edit { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3>inline editing with contenteditable & jquery</h3> 
 
<div class="box"> 
 
    <span class="edit">edit</span> 
 
    <span class="save">save</span> 
 
    <div class="text"> 
 
    Hover this box and click on edit! - You can edit me then. 
 
    <br>When you finished - click save and you saved it. 
 
    </div> 
 
</div>