How can I use the SelectedRow object of a MVC WebGrid from within the same view?

Question

I have a MVC WebGrid on a page and I have a selection link on my grid for each row. From within the same view I'd like to get the model object associated with the WebGrid.SelectedRow object and use it within the view.

Every example I've found that accesses the SelectedRow object provides instructions on how to use the object for passing the object into another view/partial view. In my case I'd like to access this object from within the same view as the WebGrid.

Here is some generalized sample code, with error-related comments.

@{

    var grid = new WebGrid(dataCollection)
    @grid.GetHTML(columns: "ID", "User ID"), 
        grid.Column("UserName","Name"),
        grid.Column("", format: @<text>@item.GetSelectLink("Edit")</text>)
}

<!-- FURTHER DOWN IN MY MARKUP //-->

<div class="widget">
@if(grid.HasSelection)
{
    var obj = @grid.SelectedRow;

    //The example below reports the following error when 
    //navigating to this page:
    //
    //CS0039: Cannot convert type 
    //  'System.Web.Helpers.WebGridRow' to 
    //  'Models.User' via a reference 
    //  conversion, boxing conversion, unboxing conversion, 
    //  wrapping conversion, or null type conversion
    usr = obj as User;
    if (usr != null) <text>usr.ID</text>;
         <!-- FIND A WAY TO PRINT SELECTED CONTENT -->
}
</div>

I've also tried casting statements such as ((User)@grid.SelectedRow). In such a case, the page will load, but as soon as I attempt to select a record and the above line is hit, the browser gives me different but similar error.

How can I access and use the WebGrid.SelectedRow model object from within the same view as my WebGrid?

Answer 1

I hope the following answer will help you. It will display the selected row content

@{
    List<Person> person = new List<Person>();
    person.Add(new Person { PersonCode = "1001", PersonName = "Satya Nadella" });
    person.Add(new Person { PersonCode = "1002", PersonName = "Lisa Su" });
    person.Add(new Person { PersonCode = "1003", PersonName = "Jeff Clarke" });
    person.Add(new Person { PersonCode = "1004", PersonName = "Mark Fields" });
    person.Add(new Person { PersonCode = "1005", PersonName = "Phebe Novakovic" });
    person.Add(new Person { PersonCode = "1006", PersonName = "Mary T. Barra" });
    person.Add(new Person { PersonCode = "1007", PersonName = "Rajeev Suri" });
    person.Add(new Person { PersonCode = "1008", PersonName = "Michel Combes" });
}

@{
    WebGrid grid = new WebGrid(person, rowsPerPage: 10);

    @grid.GetHtml(columns: grid.Columns(grid.Column("PersonCode", "Code"), grid.Column("PersonName", "Name"), grid.Column("", format: @<text>@item.GetSelectLink("Edit")</text>)))
}

<div>
    @if (grid.HasSelection)
    {
        if (grid.SelectedRow != null)
        {
            <div>
                Code: @grid.SelectedRow.Value.PersonCode
            </div> 
            <div>
                Name: @grid.SelectedRow.Value.PersonName
            </div> 
        }        
    }
</div>