How to combine JavaScript/jQuery with Razor

Question

I've created an input and a button in one of my views in an ASP.NET MVC4 application, and I want the button to pass the value of the input field as a parameter to one of my controllers. The problem I'm encountering is that I only know how to declare/get said value using jQuery, but I can't seem to figure out how to use this as a valid parameter to pass. My code is as follows:

THE VIEW:

The div-element containing the two elements:

<div class="searchLine">
<span><input type="text" id="searchField" title="Input search query here." /></span>
<button type="submit" id="searchButton" />
</div>

The script that handles the passing of the parameter to generate the new view:

<script type="text/javascript">
var search = $("#searchField").val();

$("#searchButton").click(function() {
document.location = '@Url.Action("SearchResults", "Home", new {input = search })';
});
</script>

THE CONTROLLER:

The controller that needs the parameter.

public ActionResult SearchResults(string input)
{
ViewBag.Title = "Search";
ViewBag.Message = "Your search returned the following match(es).";

var results = Model.ModelController.UniversalSearch(input);
var movies = results.MovieListForUser;
var people = results.PersonListForUser;

return View();
}

From what I've gathered from other questions here on the stack, I'm trying to make something that's working server-side try to communicate with something that's working client-side and that only exists at runtime. I'm new to both razor and the whole asp.net business, so I'm kinda in the dark as to how to solve this problem. Be rest assured though, that this is my final option of trying to solve this; I've tried reading in books and browsing through several online sites for a solution to no avail. So here goes.

you need to use an ajax call to call a controller on the back end. see my answer here. http://stackoverflow.com/questions/19956913/optimal-way-to-forward-data-selected-from-an-actionresult-to-another/19957860#19957860 — Matt Bodily, Dec 13 '13 at 19:57

score 2 · Accepted Answer · answered Dec 13 '13 at 20:10

Since you're just trying to do a redirect, maybe something like this would work better for you:

@using (Html.BeginForm("SearchResults", "Home", FormMethod.Get))
{
   <div class="searchLine">
    <span>
        <input type="text" id="input" name="input" title="Input search query here." />
    </span>
    <button type="submit" id="searchButton" />
  </div>
}

How to combine JavaScript/jQuery with Razor

THE VIEW:

THE CONTROLLER:

1 Answers1