在 MVC 视图中单击按钮后如何隐藏按钮？答案

【问题标题】：How to hide a button after clicking it in the MVC View?在 MVC 视图中单击按钮后如何隐藏按钮？
【发布时间】：2017-06-22 05:36:36
【问题描述】：

这是我的 MVC 视图。我想用 id=btn 隐藏按钮（按钮定义在代码最底部的 div 中）单击它后的特定表。知道如何实现吗？此按钮在完成其预期功能后没有任何用途。

@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-------------------*/
}

【问题讨论】：

标签： jquery asp.net-mvc

【解决方案1】：

您将$("#btn").hide(); 添加到def 函数中。

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

我希望它对你有用。

【讨论】：

如果有帮助，别忘了奖励。
很遗憾，因为我没有任何声望点，所以我无法为您的答案投票。
你能检查最佳答案吗？

【解决方案2】：

尝试添加

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

到按钮上的onClick事件。

【讨论】：

【解决方案3】：

我看到您已经为按钮的onclick 事件定义了function。因此，您可以在其中包含$("#btn").hide()，如下所示：

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

作为另一种选择，您可以将click event 添加到您的按钮中，

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

【讨论】：

第一个效果很好。第二个只有在我第二次点击时才有效。