Been staring at this all day and I cannot get to the understanding how this works so I can implement my own version.
This is about the results page which shows completed matches in a floatLeft section, and match details (players, supporters etc) in a floatRight section.
You can click a row in the matches on the left and a link is assembled according to this:
What I understand from this is a URL is created that looks like this: http://sitename/Results/MatchID/Review:
1. Results is the page this is happening on
2. MatchID is the record we need to show the details for.
3. Review is one of the three tabs in the floatRight section
OK.
I am looking through the excercise to find where this flow of information continues, that is where I am getting lost. Somewhere 60% down on the scroll bar I find this:
The final step to be able to see how the selected row feature works is to define and set the variables that are used in the code you have added to the page. Add the following highlighted code to the end of the code section at the top of the page, placing it just before the closing curly bracket of that section.
C#
@{
...
var playedMatches = db.Query("SELECT MatchId, MatchDate, MatchOpponents, "
+ "MatchIsAway, MatchResult FROM Matches "
+ "WHERE (MatchResult IS NOT NULL AND MatchResult > '') "
+ "ORDER BY MatchDate DESC");
// Define a variable to hold the selected match for use when selecting
// details to display for that match. Check for an updated value in
// the request in case the user has selected a different row in the table.
long matchDetailsToDisplay = playedMatches.First().MatchId;
if (UrlData[0].AsInt(-1) >= 0)
{
matchDetailsToDisplay = UrlData[0].AsInt();
}
// Define a variable to hold the selected tab page
// for when a postback is used to change the tab.
string selectedTabPage = (UrlData[1] != "" ? UrlData[1] : "Review");
}
Hh145665.note(en-us,VS.99).gifNote:
This code starts by extracting the value of the primary key of the first row in the row set of played matches that is generated by the query above it. The code selects just the first row from this row set by calling its First method and then accessing the value in the MatchId column. Technically, the row set is a .NET collection type that supports Language Integrated Query (LINQ) operations such as the First method. If you want to know more about LINQ, see "LINQ (Language-Integrated Query)" on MSDN at http://msdn.microsoft.com/library/bb397926.aspx. However, it is not necessary for understanding the example code in this exercise.
The code then looks in the UrlData collection for a value for the first state parameter (at index zero). This will be the key of the row that the user clicked because the hyperlink in each row of the HTML table specifies this key in its URL. If the code finds a value here, it assigns it to the matchDetailsToDisplay variable to replace the default value (the identifier of the first row in the row set).
Finally, the code looks for a value for the second state parameter which specifies the details tab page to display. If one is not found it defaults to "Review". As you haven't implemented any code to change this so far, it will always be "Review".
Save the Results.cshtml file, ensure that it is selected in the left-hand file tree view, and click the Run icon on the toolbar ribbon. You will see that the
I am figuring that URLdata holds: http://sitename/Results/MatchID/Review
long matchDetailsToDisplay = playedMatches.First().MatchId;
if (UrlData[0].AsInt(-1) >= 0)
{
matchDetailsToDisplay = UrlData[0].AsInt();
}
UrlData is a collection of arbitrary data apended th the location of a file in the Url. Since it is a collection, you reference items according to their index, which is zero-based as with all .NET collections. UrlData[0] is the first item. UrlData[1] will
be the next. In your case, they represent the Match ID and the Review ID, or selected tab ID.
wavemaster
Participant
1351 Points
1162 Posts
Moving data between sections on a page / soccer website and Exercise 3
Jul 05, 2012 09:23 PM|LINK
Link to excercise 3
Been staring at this all day and I cannot get to the understanding how this works so I can implement my own version.
This is about the results page which shows completed matches in a floatLeft section, and match details (players, supporters etc) in a floatRight section.
You can click a row in the matches on the left and a link is assembled according to this:
@matchItem.MatchOpponents <a href="@Href("~/Results", matchItem.MatchId, selectedTabPage)">@matchItem.MatchOpponents</a>What I understand from this is a URL is created that looks like this: http://sitename/Results/MatchID/Review:
1. Results is the page this is happening on
2. MatchID is the record we need to show the details for.
3. Review is one of the three tabs in the floatRight section
OK.
I am looking through the excercise to find where this flow of information continues, that is where I am getting lost. Somewhere 60% down on the scroll bar I find this:
The final step to be able to see how the selected row feature works is to define and set the variables that are used in the code you have added to the page. Add the following highlighted code to the end of the code section at the top of the page, placing it just before the closing curly bracket of that section. C# @{ ... var playedMatches = db.Query("SELECT MatchId, MatchDate, MatchOpponents, " + "MatchIsAway, MatchResult FROM Matches " + "WHERE (MatchResult IS NOT NULL AND MatchResult > '') " + "ORDER BY MatchDate DESC"); // Define a variable to hold the selected match for use when selecting // details to display for that match. Check for an updated value in // the request in case the user has selected a different row in the table. long matchDetailsToDisplay = playedMatches.First().MatchId; if (UrlData[0].AsInt(-1) >= 0) { matchDetailsToDisplay = UrlData[0].AsInt(); } // Define a variable to hold the selected tab page // for when a postback is used to change the tab. string selectedTabPage = (UrlData[1] != "" ? UrlData[1] : "Review"); } Hh145665.note(en-us,VS.99).gifNote: This code starts by extracting the value of the primary key of the first row in the row set of played matches that is generated by the query above it. The code selects just the first row from this row set by calling its First method and then accessing the value in the MatchId column. Technically, the row set is a .NET collection type that supports Language Integrated Query (LINQ) operations such as the First method. If you want to know more about LINQ, see "LINQ (Language-Integrated Query)" on MSDN at http://msdn.microsoft.com/library/bb397926.aspx. However, it is not necessary for understanding the example code in this exercise. The code then looks in the UrlData collection for a value for the first state parameter (at index zero). This will be the key of the row that the user clicked because the hyperlink in each row of the HTML table specifies this key in its URL. If the code finds a value here, it assigns it to the matchDetailsToDisplay variable to replace the default value (the identifier of the first row in the row set). Finally, the code looks for a value for the second state parameter which specifies the details tab page to display. If one is not found it defaults to "Review". As you haven't implemented any code to change this so far, it will always be "Review". Save the Results.cshtml file, ensure that it is selected in the left-hand file tree view, and click the Run icon on the toolbar ribbon. You will see that theI am figuring that URLdata holds: http://sitename/Results/MatchID/Review
long matchDetailsToDisplay = playedMatches.First().MatchId; if (UrlData[0].AsInt(-1) >= 0) { matchDetailsToDisplay = UrlData[0].AsInt(); }AND
What is going on here?
TIA Robert
Mikesdotnett...
All-Star
155649 Points
19987 Posts
Moderator
MVP
Re: Moving data between sections on a page / soccer website and Exercise 3
Jul 08, 2012 06:44 AM|LINK
UrlData is a collection of arbitrary data apended th the location of a file in the Url. Since it is a collection, you reference items according to their index, which is zero-based as with all .NET collections. UrlData[0] is the first item. UrlData[1] will be the next. In your case, they represent the Match ID and the Review ID, or selected tab ID.
You can read more about UrlData here: http://www.mikesdotnetting.com/Article/165/WebMatrix-URLs-UrlData-and-Routing-for-SEO
Web Pages CMS | My Site | Twitter
wavemaster
Participant
1351 Points
1162 Posts
Re: Moving data between sections on a page / soccer website and Exercise 3
Jul 08, 2012 07:25 PM|LINK
I understand the principle. What is getting me confused is how to implement what I have learned.
Ok, I am giving up on my approach and I am now trying to find a solution in a different fashion.
Below is a piece a script from your tutorial "how to make a webgrid row clickable"
<script type="text/javascript"> $(function(){ $('tbody tr').live('hover', function(){ $(this).toggleClass('clickable'); }).live('click', function(){ location.href = '/Trips/' + $(this).find('td:first').text(); }); }); </script>the UrlData is http://domain/Details/CustomerID
Would you mind showing me how I can modify the script to include Review after CustomerID?
wavemaster
Participant
1351 Points
1162 Posts
Re: Moving data between sections on a page / soccer website and Exercise 3
Jul 10, 2012 03:13 PM|LINK
bump.
Anyone else?
TIA Robert