How to display row details on click from WebGrid MVC4 using JQuery, AJAX

Question

I'm new to ASP.NET MVC3. I'm currently building a site to display a list of Faxes that we received. I have the model, controller and the view working correctly. I also have the row selection enabled. The problem that I'm experiencing is in displaying the details of the data of the selected row. I'm only showing a few elements of the database table, but the model contains a lot more. How can I make rest of the data display on a partial page or a separate div when I click on a row? I tried using GetSelectLink on a column, and used grid.HasSelection to display the details, but this requires the user to only click on that particular column value. I want to be able to click anywhere on the row to make the data details appear. Your help is much appreciated.

Thank you.

Could you show us your code please - as this would be a good starting point for us. You'll need to show Controller/model and view code — m.t.bennett, Jul 24 '13 at 00:01

score 0 · Accepted Answer · answered Jul 26 '13 at 17:25

0

I figured it out myself. Created a function in controller that returned JSON object; did rest of the stuff in Jquery. Apparently, the json and jquery stuff was needed to be in the view so razor can parse the url.

answered Jul 26 '13 at 17:25

user1828605

1,723
1
24
63

score -1 · Answer 2 · edited Jun 12 '15 at 14:16

// for display edit word in each row        
grid.Column("Edit", format: (item) => item.GetSelectLink("Edit")),             
   ....        
// On Edit Click         
@if (grid.HasSelection)        
{        
    TestSite.Models.News nws = new TestSite.Models.News();          
    nws = (TestSite.Models.News)grid.Rows[grid.SelectedIndex].Value;           
    // for getting value         
    <b>First Name</b> @nwz.Id<br />                                               
       ....                      
}

How to display row details on click from WebGrid MVC4 using JQuery, AJAX

2 Answers2