Share via

Asp.net MVC: How to call javascript function in Html.ActionLink

Question

Thursday, September 16, 2010 3:19 AM

When I edit single recored in page, I use checkbox to get a selected row not every row with an actionlink element, but it seemed I cant make this way happen through calling javascript code(function GetSelectedRow() should return an id). Could anyone have a nice idea?

<head runat="server">
    <title>Index</title>
    <script type="text/javascript" language="javascript">
        function GetSelectedRow() {
            var a = 0;
            var chkBoxes = document.getElementsByName("chkSelect");
            var count = chkBoxes.length;
            for (var i = 0; i < count; i++) {
                if (chkBoxes[i].checked == true)
                    a = chkBoxes[i].primaryKeyID;
            }
            return a;
        }
    </script>
</head>
<body>
    <div>
        <span style="width:20%">
        <%: Html.ActionLink("Add", "Create")%>
        </span>
        <span>
        <%: Html.ActionLink("Edit", "Edit", new { id = GetSelectedRow()) %>
        </span>
        <span>
        <%: Html.ActionLink("Detial", "Details", new { id = GetSelectedRow() })%>
        </span>
        <span>
        <%: Html.ActionLink("Delete", "Delete", new { id = GetSelectedRow()) %>
        </span>
    </div>
    <table>
        <tr>
            <th></th>
            <th>
                CategoryID
            </th>
            <th>
                CategoryName
            </th>
            <th>
                Description
            </th>
        </tr>
        <% foreach (var item in Model) { %>
            <tr>
            <td>
             <%: Html.ActionLink("Details", "Details", new { id = item.AppCategoryID })%>
            </td>
                <td>
                    <%: Html.CheckBox("chkSelect", false, new { primaryKeyID = item.AppCategoryID })%>
                </td>
                <td>
                    <%: item.AppCategoryID %>
                </td>
                <td>
                    <%: item.AppCategoryName %>
                </td>
                <td>
                    <%: item.Description %>
                </td>
            </tr>
        <% } %>
    </table>
</body>

 

All replies (5)

Saturday, September 18, 2010 3:59 PM âś…Answered

You can try

<script type="text/javascript">
function OnEdit(link)
{
    link.originalHref = link.originalHref || link.href;
    link.href = link.originalHref.replace ("0123456789", GetSelectedRow());
    return true;
}
</script>

<%: Html.ActionLink("Edit", "Edit", new { id = "0123456789", onclick = "javascript:OnEdit(this);" }) %>

 

 

Monday, September 20, 2010 2:22 AM

Hi besley ,

As far as I know, you can try to use the JQuery for bind the tag a click event.

The .bind() method is the primary means of attaching behavior to a document. All JavaScript event types, such as focus, mouseover, and resize, are allowed for eventType.

The jQuery library provides shortcut methods for binding the standard event types, such as .click() for .bind('click').

http://api.jquery.com/bind/
http://api.jquery.com/category/events/

I hope it is helpful to you. 

Monday, September 20, 2010 11:19 PM

Hi ravikatha, thanks your reply, but coding from yours example, the html code deosnt show the link click event correctly. :-(

 <div>
        <a href="/SDTPPortalWeb/user/Edit/0123456789?onclick=OnEdit(this)%3B">Edit</a>  
    </div>

 

Tuesday, September 21, 2010 1:28 AM

 Hi ravikatha,the correct one should be like:

 

<div>
        <%: Html.ActionLink("Edit", "Edit", new { id = "0123456789" }, new { onclick = "OnEdit(this);" })%>  
    </div>

 

Thanks your ideas, it works fine now.

besley

Tuesday, September 21, 2010 1:30 AM

 Hi Bober Song,  thanks your reply, I will try it later.:-)

  • Last updated on