MVC 3 (Razor) - Standard way to use a Button event to call Controller

Question

I have a simple Wall.cshtml view that loads a _Search.cshtml Partial View that looks like this:

<h2>The Wall</h2>
@{Html.RenderPartial("~/Views/Search/_Search.cshtml");}

The _Search.cshtml Partial View (updated based on @Darin reply) looks like this:

@using (Html.BeginForm("Searching", "Search", FormMethod.Post, new { id = "searchForm" }))    
{  
    <div id="search">
        <div id="searchbtn">
           <input id="Search" type="button" value="Search" />
        </div>
        <div id="searchtxt">
           @Html.TextBox("txtSearch")
        </div>
  </div>
}

The Controller looks like this:

public class SearchController : Controller
{
    public ActionResult Wall()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Searching()
    {
        // do something with the search value
        return View();
    }
}

When I run the app, the resulting block of HTML produced looks like this:

<form action="/Search/Searching" id="searchForm" method="post">  
   <div id="search">
      <div id="searchbtn">
          <input id="Search" type="button" value="Search" />
      </div>
      <div id="searchtxt">
          <input id="txtSearch" name="txtSearch" type="text" value="" />
      </div>
   </div>
</form>

QUESTION 1: Why would the button click never hit the Searching Controller method?
(let me restate that _Search.cshtml is a Partial view that runs inside a view named Wall.cshtml).

QUESTION 2: How would I get the value inside the "txtSearch" textbox?

QUESTION 3: Since this is a Partial View, how do I make the view that holds the current Search Partial View ..to refresh and update itself with the result of the Search query?

Answer 1

It would be better to use a form and making the search button submit:

@using (Html.BeginForm("Search", "Home", FormMethod.Post, new { id = "searchForm" }))    
{
    <div id="search">
        <div id="searchbtn">
            <input id="Search" type="submit" value="Search" />
        </div>
        <div id="searchtxt">
            @Html.TextBox("txtSearch")
        </div>
    </div>
}

As far as your second question is concerned, you could AJAXify this search form:

$(function() {
    $('#searchForm').submit(function() {
        $.ajax({
            url: this.action,
            type: this.method,
            success: function(result) {
                $('#resultContainer').html(result);
            }
        });
        return false;
    });
});

where resultContainer could be some div that will harbor the search results returned from the controller action.

Answer 2

the problem was that the <input id="Search" type="button" value="Search" />
has a type = BUTTON

I changed the Type to be INPUT ...and that fixed the problem.