[RESOLVED]Links not acting like standard links in a table

Hi folks;

I have a strange situation on three of my Asp.Net MVC views.  It has to do with the way links are display within a table.  I am building a table presentation of the data using the standard iterative means of building tables from the model in MVC 4.  I had
button in the table for edit and delete, whose JQuery click event handlers would operate to carry out those actions.  However the customers determined that they preferred to have Links as used in the edit, details, delete links shown in the conventional MVC
table.  However since I was calling JQuery event handlers rather than actions on a controller, I could not use the Html.ActionLink.  So I just put an a element inside the table cell like this.

                <td style="border:solid;border-color:black;border-width:thin;width:15%">
                   @if (ViewBag.PRID == 0)
                   {
                       <a id="btnCreatePR">Save PR Header</a>
                   }
                   else
                   {
                       <a id="btnEditPR">Save PR Header</a>
                   }
                </td>

(this example was from the one row table)
However these links do not show up as the standard blue link and when the cursor hovers over it, it changes into an I bar instead of a hand.  I would like to know why these
these links behave differently inside the table that the "Html.ActionLink(), and how I can get them to revert to their proper appearence and behavior.  I am sure it has to do with styling but I have no idea which style to examine.

Thanks in adavance for your help.

Hello joeller,

As I understood you. You want to display pointer instead bar? Than put "href" attribute in you links.

Something like in following:

 @if (ViewBag.PRID == 0)
        {
            <a id="btnCreatePR" href="">Save PR Header</a>
        }
        else
        {
            <a id="btnEditPR" href="">Save PR Header</a>
        }

If I am help you please mark my post as answer or let me know if you have any issues.

Thanks

You can strip the css for those two ids:

#btnCreatePR a {
  background: transparent;
  color: blue;
  text-decoration: none;
  margin: 0;
  padding: 0;
}

#btnCreatePR a:hover {
 background: transparent;
 color: blue;
 text-decoration: underline;
 margin: 0;
 padding: 0;
cursor: pointer; } #btnEditPr a { background: transparent; color: blue; text-decoration: underline; margin: 0; padding: 0; } #btnEditPr a:hover { background: transparent; color: blue; text-decoration: underline; margin: 0; padding: 0;
cursor: pointer; }

Btw, the cursor: pointer css property on a:hover will show a hand instead of the text pointer for these ids on hover.

Hi joller,

You can just add href to your a tag instead of html actionlink. like below:

<a href="/Home/Index" >Home</a>

You can css style if you want to mouse show as a hand ,when move into a button:

#btn a:hover{
  cursor :hand
}

Best Regards,

Kevin Shen.

ivan.petrovic

You want to display pointer instead bar? Than put "href" attribute in you links.

That did it.  Thanks Ivan.  Also thanks to the others who took time out to reply as well.

ivan.petrovic

Than put "href" attribute in you links.

I thought that was the fix.  but instead what happened is that after the click event handlers were run, the site was submitted to the Index page for this controller.  I read someplace that when nothing else is passed the URL defaults to the index page of
the current controller, and an href of blank is doing that. 

I began to think I was going insane.  See page

http://forums.asp.net/p/2011774/5786742.aspx?Strange+behavior+from+Create+View 

AngelOfDeath

You can strip the css for those two ids:

AngelOfDeath

Btw, the cursor: pointer css property on a:hover will show a hand instead of the text pointer for these ids on hover.

OK I entered the styles shown here into my Site.css However, when i ran the web app as debug the cursor still showed up as a "I" bar and the test was still black.

Any ideas?

Hi joeller,

Try this:

@if (ViewBag.PRID == 0)
{
    <a id="btnCreatePR" href="" onclick="return false">Save PR Header</a>
}
else
{
    <a id="btnEditPR" href="" onclick="return false">Save PR Header</a>
}

or:

@if (ViewBag.PRID == 0)
{
    <a id="btnCreatePR" href="#">Save PR Header</a>
}
else
{
    <a id="btnEditPR" href="#">Save PR Header</a>
}

Thanks

ivan.petrovic

@if (ViewBag.PRID == 0) { <a
id="btnCreatePR"
href=""
onclick="return
false">Save PR Header</a> } else {
<a id="btnEditPR"
href=""
onclick="return
false">Save PR Header</a> }

Since I already have a click event handler, I cannot set the onclick event inline.  However, I did return false from my event handler and that seems to take care of the appearence without adding unwanted navigation. 

Leave a Reply