Querystring search in MVVM
How I skipped the controller in an ASP.NET MVC View
The goal is to present a search bar that shows results to the user, while still allowing for a direct link to a search result without using the ASP.NET controller to pass the search identifier to the view. Why without playing with the controller? Why not.
With Kendo MVVM, this is actually pretty easy.
<div id="content">
<input id="searchInput" type="number" />
<button type="button" data-role="button" data-bind="events: {click: onClick}">
<div data-bind="results"></div>
</div>
// include the function described in the previous post to parse value from querystring.
function getParameterByName(name) { ... }
$(document).ready(function() {
// get the id from the querystring or null if there isn't one.
var id = getParameterByName("id");
// set up the view model
var viewModel = kendo.observable({
// initialize the id we're looking for
id: id,
// set the datasource
results = new kendo.data.DataSource({
transport: {
read: {
url: "your/url",
data: function() {
return { id: viewModel.get("id")}
}
}
}
}),
// implement the search button
onClick: function() {
viewModel.set("id", $("#searchInput"));
viewModel.results.read();
}
});
// bind the view model to a dom
kendo.bind($("#content"), viewModel);
}
This approach allows a user to navigate straight to the page to search for a result or allow a link to be generated that will present a user with a specific search result.
Like this article?
0
Software Development Nerd
You can also find Kevin Rich on Twitter, GitHub, LinkedIn and Stackoverflow. Get in touch by Email.
