How to pass textbox value into query string in asp.net mvc

Question

Yet another newbie with ASP.NET MVC! All I intend to do is for a search textbox on my page, if I type something and click search, the url to be redirected to should have the following at the end, like in stackoverflow,

/search?q=searchedtext

So here is what I have now,

<input id="searchText" maxlength="100" type="text" name="query" />
    <a href="???"  class="searchButton">        
        Search        
    </a>

I have a function in my controller like this,

public ActionResult Search(string query)
 {

 }

Here is the route,

routes.MapRoute(
            "Search",                                            
            "Search",                          
            new { controller = "Posts", action = "Search"} 
        );

Can anyone fill in the gaps here :). Any comments appreciated.

Solution 1

Wrap it with form tag, set it's method to "GET", use input type='submit' for submitting form (instead of 'a' tag), name text input as query (already done), accept query as string in parameters (already done), call model from controller to process request, update ViewData.Model, return appropriate view result (partial, if AJAX is used).

If you want to pass query through URL not through query string key/values,
you must specify correct route for that.

I guess that would be something like:

routes.MapRoute(  
            "Search", // Route name  
            "search/{query}", // URL with parameters  
            new 
              { controller = "search", action = "search"}  // Parameter defaults
        );

Solution 2

You need to wrap that client side code in a form:

<form action="/Search" method="get">
   <input id="q" name="q" maxlength="100" type="text" />
   <input type="submit" id="submit" value="Search" />
</form>

Comments

[theraneman]

The thing is it works fine that ways. I get the search page and the results on it. But the url looks like /search. I want to pass the query string to it so that the url has it. I could change the href of that achor tag using jquery to fill in the textbox value, but that is not a good solution.

[Arnis Lapsa]

If you will use form and set it's method to "GET", URL will change to ".../search?q=some text" automatically.

[The Matt]

He's right, it sounds like your method of transferring data is POST when what you really want is GET

[theraneman]

I thought I had tried this but I might have missed something. Just by using form tag and setting method to GET works. Sweeeeeett!. Thanks Arnis.

[Arnis Lapsa]

I'm glad it helped. Actually - I'm doing exactly the same right now. Trying to create a versatile search mechanism. :)