ボタンを押したときにテキストが消えるMVC/Razor

Question

私の目標は、ボタンを押すとテキストが消え、テキストボックスが再び表示され、テキストを編集できます。 Razorを使用しているので、現在私のプロジェクトにはJSやJqueryがありません。ここで

は私が私の見解では、これまで持っているものです。

@model ScribblyDump.Models.Gebruiker 
@{ 
ViewBag.Title = "userPage"; 
} 
@using (Html.BeginForm("Index", "Gebruiker")) 
{ 
    if (Session["Username"] != null) 
    { 
     <div id="userdescr"> 
      <p> 
       @Model.Description  
      </p> 
     </div>  
    } 
} 

@using (Html.BeginForm("Description", "Gebruiker")) 
{ 
    <div> 
     <input type="submit" name="hidetext" value="Edit User Description"/>  
    </div> 
} 

私は私のコントローラ内の空のActionResultを持っています。

どうすればよいですか？とにかくコントローラに何かを置くことができますか、とにかくそこにjavascriptを置くべきですか？

編集：それでは、私は結論に達しました。私はcshtmlに少しのJSを追加します。それがどれくらいかわいいか分かりませんが、もっと簡単になるでしょう。しかし、それでもまだうまくいきません。

@using (Html.BeginForm("Index", "Gebruiker")) 
{ 
    if (Session["Username"] != null) 
    { 
     <div id="userdescr"> 
      <p id="userdescrLabel"> 
       @Model.Description  
      </p> 
      <input id="userdescrTextBox" type="text" 
value="@Model.Description" style="visibility: hidden" /> 
     </div> 
    } 

} 

@section Scripts{ 
    <script> 
     $("#userdescr").click(function(){ 
     $("#userdescrLabel").hide(); 
     $("userdescrTextBox").show(); 
    }); 
    </script> 
} 

これはユーザーの説明のみです。ボタンはありません。テキストをクリックすると、何も残さずに消えます。これをどうやって解決するのですか？

Answer 1

この処理をどこに実行するかは、おそらく最善の方法です。基本的に2つのオプションがあります：サーバーまたはクライアント。

これは非常にビューベースなので、おそらくこのクライアント側を行うのが最善でしょう。つまり、コードを.cshtmlファイルに保存する必要があります。 これを念頭において、JavaScriptを使用してこれを実装するのが最も簡単です。 Ismailが提供するJavaScriptは、JQueryライブラリを利用したこの例の完全な例です。私が行う唯一の違いは、あなたのhtmlをJavaScriptの外に置くことです。JavaScriptの仕事は、既存のHTML要素にプロパティを設定することだけです：

HTMLを次のように変更してください：

その後、

@using (Html.BeginForm("Index", "Gebruiker")) 
{ 
    if (Session["Username"] != null) 
    { 
     <div id="userdescr"> 
      <p id="userdescrLabel"> 
       @Model.Description  
      </p> 
      <input id="userdescrTextBox" type="text" value="@Model.Description" style="display:hidden" /> 
     </div>  
    } 
} 

そしてそうのようなあなたのjavascriptを持っている：これは100％の構文が正しくない場合は、私は私が仕事でだとしてそれをテストすることはできないんだけど、うまくいけば、それは意志

@section Scripts{ 
    <script> 
     $("#userdescr").click(function(){ 
     $("#userdescrLabel").hide();   
     $("userdescrTextBox").show(); 
    }); 
    </script> 
} 

謝罪あなたを正しい道に置いてください！

Answer 2

JavaScriptまたはJQueryを使用してDOMを再生できます。または、コントローラを使用してEdit View（）で新しいページを表示することもできます。 この種のシンプルな作業のためにサーバーをビジーにする必要がないので、ここでJQueryを使用することをお勧めします。 プロジェクトにJQueryを組み込んだ後でこのコードを使用します。

$("#userdescr").click(function(){ 
     $("#userdescr").hide(); 
     $("[name= hidetext]").val($("#userdescr").html()); 
     $("[name= hidetext]").show(); 
    });