How do I create a simple seach box with a submit button to bring back a result set in MVC?

Question

I am very new to MVC and just learning the basics. I have been following along in Nerd Dinner and used the demo as a way to create my own app. I have created a page that lists out some food items with calories, fat, protein,etc... (http://rjsfitness.net/CalorieList) This is one of my own personal sites that I set up to test out MVC. I got a lot of it working but I am stuck on the textbox with a search button.

My view page has this code for the search:

    <form action="/CalorieList/Search" method="post" id="searchForm">
  <input type="text" name="searchTerm" id="searchTerm" value="" size="10" maxlength ="30" />
  <input type ="submit" value="Search" />
</form>

My global.asax has this code for the routing:

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

My Controller has this code:

        public ActionResult Index(int? page)
    {
        const int pageSize = 10;

        //load a list with the calorie list
        var calorieLists = calorieListRepository.GetAllCalorieLists();

        //var paginatedCalorieLists = calorieLists.Skip((page ?? 0) * pageSize).Take(pageSize).ToList();
        var paginatedCalorieLists = new PaginatedList<CalorieList>(calorieLists, page ?? 0, pageSize);

        return View("Index", paginatedCalorieLists);
    }

    public ActionResult Search(String searchTerm)
    {
        const int pageSize = 100;
        int? page = 0;

        var calorieLists = calorieListRepository.GetCalorieListsBySearch(searchTerm);

        var paginatedCalorieLists = new PaginatedList<CalorieList>(calorieLists, page ?? 0, pageSize);

        return View("Index", paginatedCalorieLists);
    }

        return View("Index", paginatedCalorieLists);
    }

When I enter a value and click the button, the Index method fires instead of the Seach method in the controller and I get the full list again. If I manually type the url (http://rjsfitness.net/CalorieList/Search/choc) I get the right listing.

Why isn't my button click using the right routing and giving me the search results?

Answer 1

Because I think you're going back to the Index ActionResult. Put a breakpoint in your Index action and see.

You might want to Return to a route rather than a View.

EDIT

Or have a Search view to return to.

Or you could do a jQuery post back and return a PartialView and replace the content of a div with the returned partial view html.

If this is what you want post a comment and i can provide code and links.

EDIT 2

I explain it a bit in this question. Please add another comment if you need further code or samples and I'll post no problem.

another approach to returning some thing to browser in mvc with ajax call instead of using response.write

Answer 2

Your form is actually pointing to this:

<form id="form1" action="CalorieList" method="post">

If you are using Html.BeginForm, you are passing in the wrong parameters.

<% using (Html.BeginForm("Search", "CalorieList")) %>
<% { %>
// Your form fields
<% } %>

On a side note, why is there ViewState on your page?