通过单击mvc3中的Actionlink来显示div

时间:2013-03-10 18:53:06

标签: jquery asp.net-mvc asp.net-mvc-3

我的观点中有一个Div

<div style="width:auto; display:none;" id="div11">
<form action="" method="post" enctype="multipart/form-data">
  <label for="file">Filename:</label>
  <input type="file" name="file" id="file"/>
  <input type="submit" value="Excel Upload" />
</form>
</div>

另一个Div中的一个按钮和一个动作链接

<div style="text-align: left; margin-left: 20px; margin-right: 20px;">
        <%= Html.ActionLink("Test Link", "", "",null, new {id = "someID" }) %> 
        <button id="Button1">Click</button>
    </div>

我想使用jquery

显示动作链接的div
    <script type="text/javascript">
            jQuery(document).ready(function () {


                $("#Button1").click(function () {


                    debugger;
                    $("#div11").show();
                });

                $("#someID").click(function () {
                    debugger;
                    $("#div11").css("display", " ");
                    $("#div11").show();
                });

            });
</script>
    Here the button is working fine but don't know why actionlink not working ...Basically i want to show the div by clicking the actionlink.................

1 个答案:

答案 0 :(得分:4)

您需要阻止默认链接点击行为。您可以使用preventDefault功能。

以下脚本将显示按钮单击的div。

$(function(){

  $("#SomeID").click(function(e){
    e.preventDefault();
    $("#div11").show();
  });

});

假设您的Actionlink语法是这样的。

@Html.ActionLink("test link","SomeAction","SomeController",
                                                        null,new {@id="SomeID"})

工作jsfiddle样本:http://jsfiddle.net/kuPau/1/