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开发者_JAVA技巧" 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?
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.
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.
Don't forget to serialize the data to push also the Model to the Controller Action:
@model CBS.DataAccess.Entities.SupplierQuoteEntity
@using (Html.BeginForm("Create", "SupplierQuote", FormMethod.Post, new { id = "SupplierQuoteCreateForm" }))
{
<div>blablablabla fields...</div>
<a class="t-button t-button-icontext" onclick="ajaxSubmit()"><span class="t-icon t-insert"></span>Create</a>
<script type="text/javascript">
function ajaxSubmit() {
var formData = $("#SupplierQuoteCreateForm").serializeArray();
$.ajax({
type: "POST",
url: '@Url.Action("Create", "SupplierQuote")',
data: formData,
dataType: "json",
success: function (data) {
alert(data);
}
});
}
</script>
}
精彩评论