Question

我有一个视图，单击该按钮可以执行JavaScript函数。该函数使用jQuery隐藏文本字段和按钮。它完成并且视图可见-很好。

如果我将按钮更改为链接，然后单击该链接，它将执行JavaScript函数并完成它，但是代码会将其传递给控制器操作方法。为什么，因为我不想要那样。

这是视图（省略了代码）：

@model GbngWebClient.Models.BlogCommentListVM

<style>
    .my-reply-link {
        padding: 8px 10px;
        float: left;
        font-size: 12px;
        margin: 4px 2px;
}
</style>

@using GbngWebClient.Models;

@if (Model != null)
{
<p style="margin-right: -14px; margin-left: -1px;"><strong>@Model.BlogCommentList.Count</strong> - comments</p>
<br />

<div class="row" style="width: 100.3%; border-top: 1px solid #d2cece; margin-right: -14px; margin-left: -1px;"></div>
<br />

@* Loop threw the model - a list - to display the comments. *@
foreach (BlogComment blogComment in Model.BlogCommentList)
{
    // A row.
    <div class="row" style="width: 100.3%; border-bottom: 1px solid #d2cece; margin-right: -14px; margin-left: -1px;">
        <div class="col-md-4" style="width: 21%;">
            <div class="userProfile" style="margin-left: 9px; margin-top: 12px;">
                <img src="~/Images/Avatar.png" class="img-circle" style="width: 46px; height: 53px; border: 1px solid #bcb8b8;" />
            </div>
        </div>

        <div class="col-md-7" style="width: 60%;">
            <div class="commentDetails">
                @if (blogComment.UserId == blogComment.SignedInUserId)
                {
                     <div id="@string.Format("{0}_{1}", "blogCommentContent", blogComment.BlogCommentId)" style="margin-top: 27px; font-size: 13px; color: #9c9898;">
                        @Html.Raw(WebUtility.HtmlDecode(@blogComment.BlogCommentContent))
                    </div>

                    <textarea id="@string.Format("{0}_{1}", "inputEditComment", blogComment.BlogCommentId)" style="display:none; margin-top: 27px; font-size: 13px; color: #9c9898;" rows="2" cols="50" class="form-control"></textarea>

                    @* Using button with tooltips. *@
                    <button title="Edit" data-toggle=tooltip type="button" id="@string.Format("{0}_{1}", "editComment", blogComment.BlogCommentId)" class="btn btn-primary editComment" data-id="@blogComment.BlogCommentId"><span class="fa fa-edit fa-fw"></span></button>

                    @* Invisible until set to show. *@
                    <button style="display:none;" title="Save" data-toggle=tooltip type="button" id="@string.Format("{0}_{1}", "saveComment", blogComment.BlogCommentId)" class="btn btn-primary saveComment" data-id="@blogComment.BlogCommentId"><span class="fa fa-save fa-fw"></span></button>

                    @* Using Link. *@
                    @*<a href="" id="@string.Format("{0}_{1}", "editComment", blogComment.BlogCommentId)" class="editComment" data-id="@blogComment.BlogCommentId">Edit</a>*@

                    @* Invisible until set to show. *@
                    @*<a href="" id="@string.Format("{0}_{1}", "saveComment", blogComment.BlogCommentId)"  class="saveComment" data-id="@blogComment.BlogCommentId" style="display:none;">Save</a>*@

                    <input type="hidden" id="@string.Format("{0}_{1}", "signedInUserNameForComment", blogComment.BlogCommentId)" name="signedInUserNameForComment" value="@blogComment.SignedInUserName">
                }
                else
                {
                    <div style="margin-top: 27px; font-size: 13px; color: #9c9898;">
                        @Html.Raw(WebUtility.HtmlDecode(@blogComment.BlogCommentContent))
                    </div>
                }                  
    }
    }

<script type="text/javascript" src="//cdn.tinymce.com/4/tinymce.min.js" referrerpolicy="origin"> 
</script>

<script type="text/javascript">
$(document).ready(function () {
    // To make the button with tooltips work.
    $('[data-toggle="tooltip"]').tooltip();

    $('.editComment').on('click', function () {
        var blogCommentId = $(this).attr('data-id');
        var signedInUserNameForComment = $('#signedInUserNameForComment_' + blogCommentId).val();

        // Hide initial display.
        $('#blogCommentContent_' + blogCommentId).hide();

        // Hide related to initial state.
        $('#editComment_' + blogCommentId).hide();

        // Get the initial blog comment.
        var blogCommentContent = $('#blogCommentContent_' + blogCommentId).text();

        // Remove the html tags and the 'signed in user name'.
        var first = blogCommentContent.replace('<p>', '');
        var second = first.replace('</p>', '');
        var first = blogCommentContent.replace('<strong>', '');
        var second = first.replace('</strong>', '');
        var last = second.replace(signedInUserNameForComment, '');
        
        // Set the edit text area with the new blogCommentContent.
        $('#inputEditComment_' + blogCommentId).val(last);

        // Show the edit text area with the new blogCommentContent.
        $('#inputEditComment_' + blogCommentId).show();

        // Show buttons related to edit.
        $('#saveComment_' + blogCommentId).show();
    });

    jQuery(".timeago").timeago();
})
</script>

Answer 1

这是因为您将href属性留空。尝试改用href="javascript:void(0);"。

MVC ASP.NET-如何阻止href转到控制器操作方法

1 个答案: