ボタンをMVCビューでクリックした後に非表示にするにはどうすればいいですか？

Question

これは私のMVCビューです。私はしたいボタンを隠すとid = btn（ボタンはコードの一番下のdivに定義されています）クリックすると特定のテーブルの値が表示されます。どのようにそれを達成するための任意のアイデア？このボタンは、意図した機能を果たした後は目的を果たさない。ボタンのonClickイベントに

document.getElementById("btn").style.display = "none"; 

を追加

@model IEnumerable<MovingApplication.Models.Class1> 

@{ 
    Layout = null; 
    ViewBag.message = "hello world"; 
} 

<div class="jumbotron" style="background:#E74C3C !important" > 
    <h2 style="text-align:center">Table Data</h2> 
</div> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<link href="~/Content/bootstrap.css" rel="stylesheet" /> 

<!----------------------------Table 1 Defined---------------------------------> 
<div id="table2"> 
    <table id="tableA" border="1" align="center" 
      class="table tableA table-bordered table-hover 
      table-condensed table-layout: fixed text-center"> 
     <tr><td><b>Table 1</b></td></tr> 
     @{ 
       foreach (var item in ViewBag.userdetails) 
       { 
        <tr><td width="10%">@item.name</td></tr> 
       } 
      } 
    </table> 
</div> 
<div id="table3"> 
</div> 

<!------------Autocomplete Text Sent to MoveData Method-------------------> 

<script type="text/javascript"> 
    function abc() { 
     $.ajax({ 
      url: "/Home/MoveData", 
      type: "get", 
      dataType: "html", 
      data: { a: $("#name").val() }, 
      success: function (data) { 
      $("#table3").html(data); 
      } 

     }); 

    } 
</script> 

<!---------------Code to show contents of Table 2-----------------------> 


<script type="text/javascript"> 
    function def() 
    { 

     $.ajax 
      ({ 
      url: "/Home/ShowData", 
      type: "get", 
      dataType: "html", 
      data: { a: $("#name").val() }, 
      success: function (data) { 
       $("#table3").html(data); 
      } 
      }); 
    } 
    </script> 


<!-----------------Code to load autocomplete list--------------------------> 



<script type="text/javascript"> 

    $(document).ready(function() { 
     $("#name").autocomplete({ 
      source: function (request, response) { 
       $.ajax({ 
        url: "/Home/Index", 
        type: "POST", 
        dataType: "json", 
        data: { Prefix: request.term }, 
        success: function (data) { 
         response($.map(data, function (item) { 
          return { label: item.name }; 
         })) 

        } 
       }) 
      }, 
      messages: { 
       noResults: "", results: "" 
      } 
     }); 
    }) 
</script> 

<!----------------------------Input Field---------------------------------> 

@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 

    <div id="button1"> 
     <hr /> 
     <div > 
      <div class="text-center" > 
       <p><b>Enter Any Data</b></p> 
       <div class="col-lg-4 col-lg-offset-4"> 
        @Html.Editor("name", new { 
        htmlAttributes = new { @class = "form-control text-mywidth" } }) 
       </div> 
      </div> 

      <div class="text-center col-lg-4 col-lg-offset-4"><br /> 
       <input type="button" style="grid-row-align:start;" 
       value="Move/Add" onclick="abc();" class="btn btn-success" /> 

       <input type="button" style="align-self:auto;" 
       value="Show Table 2" id="btn" onclick="def();" class="btn btn-info" /> 

      </div> 
     </div> 
    </div> 
    <br /> 

    /*---------------Buttons defined to Add/Move/Show data-------------------*/ 
} 

Answer 1

してみてください。

Answer 2

def機能に$("#btn").hide();を追加します。

function def() 
    { 
     $("#btn").hide(); 
     $.ajax 
      ({ 
      url: "/Home/ShowData", 
      type: "get", 
      dataType: "html", 
      data: { a: $("#name").val() }, 
      success: function (data) { 
       $("#table3").html(data); 
      } 
      }); 
    } 

私はそれがあなたのために働くことを望みます。

Answer 3

onclickボタンのイベントでは、すでにfunctionを定義しています。だから、あなただけの、以下のようにその中に$("#btn").hide()を持つことができます別のオプションとして

function def(){ 
    //Earlier code if any 
    $("#btn").hide();  
} 

、あなたのようにあなたのボタンにclick eventを追加することができ、

$("#btn").on('click',function(){ 
    //Show table 2 
    $(this).hide(); 
});