clickable rows in web grid, with razor/javascript

问题

Using the webgrid helper I've used some JavaScript to have the entire row clickable, and that works fine, however the href link in the JavaScript i need to incorporate razor.

javascript code here:

<script type="text/javascript">
$(function(){
    $('tbody tr').live('hover', function(){
        $(this).toggleClass('clickable');
    }).live('click', function(){
        location.href = '/Messages/Reply/' + $(this).find('td:first').text();   
    }); 
});
</script>

But this code is taking the value in the first cell and using that in the link, I want to send a different value that isn't displayed in the webgrid. In this case, a guid generated for each message, named 'messageGuiD'.

I tried replacing the 'td:first' with messageGuiD and juggled commas, periods, colons and anything to get it to work but without success.. The closest I came was I made the messageGuiD field a part of the webgrid and used styling to make it hidden (display:none), and it worked as far as sending the messageGuiD to the URL, but that threw the headers out of place and had some side effects to the table formatting...

The webgrid helper generated a table from the database, in this case it is a message inbox, here is a sample of the html generated:

<table class="table" data-swhgajax="true" data-swhgcontainer="contentgrid" data- swhgcallback="addCheck">
<thead>
    <tr class="header">
        <th scope="col">
<a data-swhglnk="true" href="/Messages/Inbox?sort=FromUser&amp;sortdir=ASC">From</a>             </th>
        <th scope="col">
<a data-swhglnk="true" href="/Messages/Inbox?sort=messageSubject&amp;sortdir=ASC">Subject</a>            </th>
        <th scope="col">
<a data-swhglnk="true" href="/Messages/Inbox?sort=DateSent&amp;sortdir=ASC">Date Sent</a>            </th>
        <th scope="col">
        </th>
    </tr>
</thead>
<tbody>
    <tr class="rows">
        <td class="mfrom">benatssu</td>
        <td class="msubject"><a href="/Messages/Reply/msg-c75b7310-3708-42b2-bb6a-084ac97dd63c">hello</a></td>
        <td class="mdate">Feb 4, 2013<br>8:02 PM</td>
        <td class="mdel"><input type="checkbox" name="deleteMsg" value="msg-c75b7310-3708-42b2-bb6a-084ac97dd63c"></input></td>
    </tr>
</tbody>
</table>

The user can open their message by clicking the subject which is linked to subject column, the code to get that link used in the webgrid helper is as follows:

format: @<a href="~/Messages/Reply/@item.messageGuiD">@item.messageSubject</a>

The problem with td:first in the JavaScript is that it generates the link with what is in the first cell, in my case here it is who the message is from, and would generate a link /Messages/Reply/benatssu and even if I move the subject to the first column, the link would become /Messages/Reply/hello.

One way is to have the messageGuiD displayed in the first column and the link becomes Messages/Reply/msg-c75b7310-3708-42b2-bb6a-084ac97dd63c (which is what I want) but then I have an ugly long number displayed in the table.

Anyway this question has gone on long enough, If anyone knows a non complicated way to get the JavaScript to read the value from the database then awesome, if not then it's ok, the code works with the smaller link to the subject name, it's just much prettier having the entire row selectable. Thanks for your time.

回答1:

$(this).find('td:eq(1) a').attr('href');

or you can use classes

 $(this).find('td.msubject a').attr('href');

回答2:

use the id of the A tag to store the messageGuiD - then modify the jquery> $(this).find('td > a').attr('id')

format: @@item.messageSubject

the idea is here... Get attr('id') from a <td> using jQuery

来源：https://stackoverflow.com/questions/14670878/clickable-rows-in-web-grid-with-razor-javascript

标签

javascript

razor

webgrid