Question

这是我的MVC视图。我希望隐藏按钮， id = btn （按钮定义在代码的最底部div），显示a的值点击它之后的特定表格。知道如何实现吗？该按钮在完成预期功能后无用。

@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

您将$("#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);
             }
            });
    }

我希望它对你有用。

Answer 2

尝试添加

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

到按钮上的onClick事件。

Answer 3

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

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

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

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

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

3 个答案: