将两个 ajax 帮助程序文本框并排放置

Question

如何将 2 个与 AJAX 论坛共享相同搜索按钮的输入文本框并排放置？ 当我尝试这样做时，它会忽略第二个文本框输入。

一个输入按事件名称或类型搜索事件，第二个输入按位置搜索事件。

这是我视图的代码

@{
ViewBag.Title = "Home";
}
<h2>Home</h2>
<div class="panel panel-default">
<div class="panel-heading">Event Search</div>
<div class="panel-body">
@using (Ajax.BeginForm("EventSearch", "Events", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "GET",
OnFailure = "searchFailed",
LoadingElementId = "ajax-loader",
UpdateTargetId = "searchresults"
}))
{
<input type="text" name="q" /> <input type="submit" value="search" />

}
@using (Ajax.BeginForm("LocationSearch", "Events", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "GET",
OnFailure = "searchFailed",
LoadingElementId = "ajax-loader",
UpdateTargetId = "searchresults"
}))
{
<input type="text" name="e" /> <input type="submit" value="search" />
}
<div id="searchresults"></div>
</div>

</div>
@section Scripts{
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/App/EventSearch.js"></script>
}

Answer 1

我建议您创建一个表单(同时具有输入字段和单个按钮(而不是两个表单。

创建一个用于搜索的模型，其属性为"事件名称"、"位置"。

发出单个 POST 请求(操作方法(并将该模型发布到服务器。

并通过模型中的属性区分服务器上的搜索筛选器。

Answer 2

您可以使用单个表单而不是两个单独的表单来实现相同的目标。

@using (Ajax.BeginForm("Search", "Events", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "GET",
OnFailure = "searchFailed",
LoadingElementId = "ajax-loader",
UpdateTargetId = "searchresults"
}))
{
<input type="text" name="q" /> 
<input type="text" name="e" />
<input type="submit" value="search" />
}

现在，您可以执行单个控制器操作来处理这两种类型的请求。

例如

public ActionResult Search(string e,string q)
{
//Here you can differentiate
if(!string.IsNullOrEmpty(e))
{
//Search by Event
}
else
{
//Search by Type
}
return View();
}