I am building a WebMatrix-based site, and I overlooked something. Something that just didn’t occur to me.
My site is made up so that each page refers to the _SiteLayout.cshtml page for the header and footer. For example:
_SiteLayout.cshtml:
<html>
<head>
</head>
<body>
<div id="Container">
<div id="heading">
<input type="text" name="search" value="search" id="searchbox" />
</div>
@RenderBody() <!-- display Default.cshtml content -->
<div id="footer"><p>stuff here</p></div>
</div>
</body>
</html>
Default.cshtml:
@{
Layout = "~/_SiteLayout.cshtml";
}
<p>
I want to display search results in the Default.cshtml (homepage) page, but I don't know how to if the search form is inside the SiteLayout page. How to do this?
</p>
So, my question is I want to display search results in the Default.cshtml (homepage) page, but I don’t know how to if the search form is inside the SiteLayout page.
How do I go about doing this?
You’ll need to post the information in that search input to the server. Once you have the data back, you can use it to target an HTML element you know will be in the subviews.
This article from the jQuery docs helped me out. My data was coming from a JSON response, but the example shows how you can use jQuery to take the results response and add it to a specific element (in this case, the
<body>, but you could just as easily create a div with an id of “search-results” and target it with#search-results):Then it would be up to all the views to contain a section with an ID of search-results, but if it didn’t exist, then the data just wouldn’t show up anywhere. The script should be in a separate file and referenced in your main site layout.