MVC：ボタンを押した後にテーブルを表示

Question

こんにちは私は、ボタンが押された後にテーブルを表示する機能を持つことが可能です。いくつかのIF関数を試してみましたが、うまく機能しませんでした。 マイコード：

@using (Html.BeginForm("Search", "Home", FormMethod.Post)) 
    { 
     <br /> 
     <span style="font-weight: bold">Tytuł filmu:</span> @Html.TextBox("VideoName") 
     <input type="submit" value="Szukaj" class="btn-primary" /> 
     <br /> 
     <br /> 
     <table cellpadding="0" cellspacing="0"> 
      <tr> 
       <th> 
        @Html.DisplayNameFor(model => model.ImageUrl) 
       </th> 
       <th> 
        @Html.DisplayNameFor(model => model.VideoName) 
       </th> 
      </tr> 

      @foreach (var item in Model) 
      { 
       <tr> 
        <td> 
         @Html.DisplayFor(modelItem => item.ImageUrl) 
        </td> 
        <td> 
         @Html.DisplayFor(modelItem => item.VideoName) 
        </td> 
       </tr> 
      } 
     </table> 
    } 

Answer 1

次のように条件ブロック内のマークアップを置く場合：

@if (true) 
{ 
    @* PUT MARKUP HERE *@ 
} 

をif条件が真であるとき、そして、マークアップがのみ表示されます。

また、クライアント側のコードを使用してマークアップを非表示にすることもできます。あなたが何をしているのかについての詳細を提供していないので、私はどちらが最善であるか分かりません。

というボタンの代わりに、あなたがどのようなボタンを持っているのか、それが何をすべきかを話していたはずです。それがサーバー側で動作する場合、私の最初の提案を使用してください。クライアント側で作業する必要がある場合は、私の2番目の提案を使用してください。

Answer 2

テーブルの表示を切り替えるボタンを使用できます。ボタンをクリックすると、テーブルの表示/非表示を切り替えることができます。

のdocument.getElementById（ 'mytableは'）style.display = 'ブロックを';：

function toggleTable() { 
    var lTable = document.getElementById("YourTableId"); 
    lTable.style.display = (lTable.style.display == "table") ? "none" : "table"; 
} 

Answer 3

あなたは

• Javascriptを、いくつかの方法でそれを行うことができます。 IDをあなたのテーブルを与え、block;

function buttonClick(){ 
 
    document.getElementById('myTable').style.display = 'block'; 
 
}

<table id='myTable' style='display:none;'>...</table> 
 
<input type="submit" value="Szukaj" class="btn-primary" onclick='buttonClick()' />

ノートをテーブル表示を切り替えるボタンをクリックの上にはJavaScriptを使用して、その後、最初にnone;にその表示を設定します。
を - それはすることができますjqueryを使用している方がはるかに簡単になる
- ボタンのクリックにイベントリスナーを使用できます

• サーバー側のコード：あなたのアクションメソッドで は、この値が存在する場合TempDataをやViewBag変数を設定し、HTMLのチェックでは、真のショーであればテーブル

私はに他の多くの方法があると確信していますそれは大部分が私が挙げた両方のアイデアの周りにあります。

Answer 4

あなたはいくつかの良い答えがありますが、それは達成しようとしているものによって異なります。私は何が提供されているの様々な使用しました。あなたはボタンをクリックすると表を表示すると言います。あなたはまた、ボタンが再びクリックされた場合にテーブルを非表示にする必要がありますか？もしそうなら、クライアント側のjQueryと.toggle（）が役に立ちます。

$(document).ready(function(){ 
 
    $("button").click(function(){ 
 
     $("#myTable").toggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<button>Toggle</button>  
 
<table id="myTable" style="border: 1px solid black; display: none"> 
 
    <tr> 
 
    <th>Header 1</th> 
 
    <th>Header 2</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Data 1</td> 
 
    <td>Data 2</td> 
 
    </tr> 
 
</table>