我有一个简单的墙。加载_Search的cshtml视图。cshtml 部分视图如下所示:
<h2>The Wall</h2>
@{Html.RenderPartial("~/Views/Search/_Search.cshtml");}
_Search。cshtml部分视图(基于@Darin回复更新)如下所示:
@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>
}
控制器看起来像这样:
public class SearchController : Controller
{
public ActionResult Wall()
{
return View();
}
[HttpPost]
public ActionResult Searching()
{
// do something with the search value
return View();
}
}
当我运行应用程序时,生成的HTML块看起来像这样:
<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>
问题1:为什么按钮点击永远不会碰到搜索控制器方法?
(让我重申一下_Search。cshtml是一个分部视图,它运行在名为Wall.cshtml的视图中。
问题2:我如何得到"txtSearch"文本框中的值?
问题3:既然这是一个局部视图,我如何使持有当前搜索局部视图的视图。用搜索查询的结果来刷新和更新自己?
最好使用表单并使搜索按钮提交:
@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>
}
关于第二个问题,您可以ajax化这个搜索表单:
$(function() {
$('#searchForm').submit(function() {
$.ajax({
url: this.action,
type: this.method,
success: function(result) {
$('#resultContainer').html(result);
}
});
return false;
});
});
其中resultContainer
可以是某个div,用于存放控制器操作返回的搜索结果
问题是<input id="Search" type="button" value="Search" />
我将Type更改为INPUT…这就解决了问题。
不要忘记序列化数据,以便将Model也推送到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>
}