我目前正在使用一些bootstrap& amp; Jquery,我所有的技术都相对较新。
我希望有一个视图,包含X个部分视图(在本例中为4个),其中一个搜索表单将查询活动的部分视图表(每个部分视图包含一个数据表)。
这是我主视图的cshtml
@using (Ajax.BeginForm(
new AjaxOptions
{
HttpMethod = "get",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "CustDetails"
}))
{
<input type="search" name="searchTerm" />
<input type="submit" value="Search By Name" />
}
<ul class="nav nav-tabs" id="AssetTabs" >
<li class="active"><a data-toggle="tab" href="#CustDetails">Customer Details</a></li>
<li><a data-toggle="tab" href="#Locations">Locations</a></li>
<li><a data-toggle="tab" href="#Assets">Assets</a></li>
<li><a data-toggle="tab" href="#SSAs">SSAs</a></li>
</ul>
<div class="tab-content", id="taaaab">
<div id="CustDetails" class="tab-pane fade in active">
@Html.Action("CustomerDetailsView")
</div>
<div id="Locations" class="tab-pane fade">
@Html.Action("LocationsView")
</div>
<div id="Assets" class="tab-pane fade">
@Html.Action("AssetsView")
</div>
<div id="SSAs" class="tab-pane fade">
@Html.Action("SsaView")
</div>
</div>
查看与此相关的控制器方法。
public ActionResult CustomerDetailsView(string searchterm = null)
{
var model = QueryFetch.FetchCustData(CurrentID).Where(r => searchterm == null || r.Site_Name.ToLower().Contains(searchterm.ToLower()));
return PartialView("_CustomerDetails", model);
}
public ActionResult LocationsView()
{
return PartialView("_Locations");
}
public ActionResult AssetsView()
{
return PartialView("_Assets");
}
public ActionResult SsaView(string searchterm = null)
{
var connection = QueryFetch.FetchSSAData();
// var connection = QueryFetch.FetchSSAData(CurrentID).Where(r => searchterm == null || r.ContractName.ToLower().Contains(searchterm.ToLower()));
//return View(connection);
return PartialView("_Ssa", connection);
}
最后,这是部分观点之一,它们在代码方面都是相对相关的:
@model IEnumerable<BL.vRP_CustomerData>
@*<h2> CustomerDetailsPartialView</h2>*@
<h1 id="YEMA"> No text located</h1>
<table class="table table-striped" id="CustDetailsTable">
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
<div>
<h4>Customer Name: @item.Site_Name</h4>
<br />
<div>SSAs active: @item.CountSSAs</div>
<div>SSAs near renewal: @item.CountSSANearRenewal</div>
<div>County : @item.Site_County</div>
</div>
</td>
<td>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Edit Customer</button>
<button type="button" class="btn btn-secondary">Edit SSA</button>
<button type="button" class="btn btn-secondary">Edit Locations</button>
</div>
<br /><br />
<div>Next renewal date: @item.NextSSARenewalDate</div>
</td>
</tr>
}
</tbody>
</table>
正如您所看到的,我正在使用bootstraps nav-tabs。我被告知要使用Ajax,但我真的不知道如何解决它。如何通过将搜索栏绑定到最活跃的选项卡?我在网上浏览了与解决方案相关的信息,但无法将其真正应用到我的项目中。
欢呼的家伙,如果我不清楚任何事情,请告诉我,我会尽力为你清除这一切。另外,我知道我的ajax请求的目标ID是&#34; custdetails&#34;。这是我的一个视图中我的表的ID,而不是较旧的不太相关的代码,我知道这是不正确的,因此我为什么要问你一堆大脑的建议! :)
干杯,
杰克