针对多个视图的一个搜索框? MVC 4

时间:2017-08-23 08:21:01

标签: javascript jquery ajax asp.net-mvc asp.net-mvc-4

我目前正在使用一些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,而不是较旧的不太相关的代码,我知道这是不正确的,因此我为什么要问你一堆大脑的建议! :)

干杯,

杰克

0 个答案:

没有答案