ActionLink that acts like a text

Question

I have an @Html.ActionLink in a webpage.

@Html.ActionLink("Hello ", "Index", "Manage", routeValues: new { Area = "" }, htmlAttributes: new { title = "Manage", @class = "user-btn clientName"})

looks like this:

The clientName contains the name of the user. I have an ajax call that sets the clientName

 $.ajax({
            type: "GET",
            url: url,
            data: { userId: currentUserId },
            success: function (data) {
                $(".clientName").text($(".clientName").text() + data + "!");
            },
            failure: function (data) {
            }
        });

Now I need only a text instead of the ActionLink. I don't know how to use the TextAreaFor in this case. I have tried with a javascript to disable the link, it is disabled, but it is still a link. Can you please help me with a css for ActionLink to be like a text, or with a solution to write that clientName in a text. Thanks

If the link is the text "Hello Bert..." then it already looks like text, what is it about it that you don't like? Presumably, you still require the user to click it? — Andy G, Feb 21 '18 at 13:16
No, I don't need to click it. So, I need to look like just a text, without that hand when I go over it — Orsi, Feb 21 '18 at 13:19
How are you triggering your ajax code? You can alter the hand using the `cursor` CSS property. If you want just text then just use a plain HTML element, such as a span. — Andy G, Feb 21 '18 at 13:20

score 2 · Answer 1 · answered Feb 21 '18 at 14:07

You could replace the link with this:

$(".clientName").replaceWith("<span>"+$(".clientName").text() + data + "!</span>");

It will replace your <a> element with <span> which is not a clickable and it's a text.

Example:

$(function(){
  $('.clientName').on('click', function(){
  
    $('.clientName').replaceWith( '<span>' + $('.clientName').text() + ' MORE TEXT!</span>' );
  
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a href="#somelink" class="clientName">Click me</a>

Ravikumar · Accepted Answer · 2018-02-23T06:09:33.863

2

If you wants behave that test as link, and only wants to remove the under line and hand symbol you can use the following CSS.

text-decoration:none; 
cursor:text

or If you don't want the link behavior it self, you can directly use @Html.Label.

edited Feb 23 '18 at 06:09

answered Feb 21 '18 at 14:24

Ravikumar

211
1
10

ActionLink that acts like a text

2 Answers2