搜索 mvc 保持同一页面

Question

我正在使用 MVC5，我想搜索结果并停留在同一页面上，这是我在控制器 (LiaisonsProjetsPPController) 中执行搜索操作的方法：

public ActionResult IndexAjoutML(int id, string SearchString)
    {
        PartiesPrenantesEntities db = new PartiesPrenantesEntities();
        ViewBag.idProjet = id;
        ViewBag.searchString = SearchString;

        IQueryable<ActivitesPP> qry = this.db.ActivitesPP.Intersect(from item in this.db.LiaisonsProjetsPP where item.idProjet == id select item.ActivitesPP).Include(model => model.Activites.CatActivites);              
        var act = from s in db.CatActivites
                  select s;

        if (!String.IsNullOrEmpty(SearchString))                    
            return PartialView("~/Views/ActivitesPP/IndexAjoutProjet.cshtml", this.db.ActivitesPP.Where(s => s.PartiesPrenantes.nomPP.Contains(SearchString)).Except(qry));                  
        else
            return PartialView("~/Views/ActivitesPP/IndexAjoutProjet.cshtml", this.db.ActivitesPP.Except(qry));
    }

然后在我看来（Views/ActivitesPP/IndexAjoutProjet）我有我的搜索表单和显示结果的 div：

@using (Ajax.BeginForm("IndexAjoutML", "LiaisonsProjetsPP", FormMethod.Post,
        new AjaxOptions
        {
            InsertionMode = InsertionMode.Replace,
            HttpMethod = "POST",
            UpdateTargetId = "search-results"
        }, new { @id = "searchFormPP" }))
{
            <p>
                <label>Partie prenante: </label> @Html.TextBox("SearchString")
                <input id="inputRecherche" name="SearchString" type="submit" value="Rechercher" />
            </p>
    }


<div id="search-results">

@{foreach (var catactivite in Model.GroupBy(model => model.Activites.CatActivites))
         {
String couleurCategorie = catactivite.Key.couleurCategorie;
String couleurTexte = CustomHelpers.GetForegroundColor(couleurCategorie);
             //Image de la partie prenante

            <div class="panel-heading unhide" style="background-image: none; color: @couleurTexte;  background-color: @couleurCategorie; padding: 2px;">

            </div>

             foreach (var pp in catactivite)
             {
                 String nomPP = (pp.idPP == null ? "Inconnu" : pp.PartiesPrenantes.nomPP);
                 String dateAffichee;
                 String imgPP = "../../Images/Profils/" + (pp.PartiesPrenantes.imgPP ?? "avatar.png");
                 if (pp.finActivite == null)
                 {
                     dateAffichee = "Depuis le " + String.Format("{0:d/MM/yyyy}", pp.debutActivite);
                 }
                 else
                 {
                     dateAffichee = "Depuis le " + String.Format("{0:d/MM/yyyy}", pp.debutActivite) + ", jusqu'au " + String.Format("{0:d/MM/yyyy}", pp.finActivite);
                 }
                <div class="panel panel-primary">
                    <div class="panel-heading unhide" style="color: @couleurTexte;  background-color: @couleurCategorie;">
                        <div style="float: left">
                            <img class="imgPP img-circle" src="@(imgPP)" />
                        </div>
                        <h5>@pp.Activites.libelleActivite (@Html.Raw(pp.idLieu == 999 ? "National" : pp.Lieux.nomLieu))</h5>
                        <h6>@pp.PartiesPrenantes.nomPP</h6>
                    </div>
                    <div class="panel-body hiddenPart">
                        @if (pp.idPP != null)
                        {
                            <label>Commentaire</label>
                            <p>@(pp.commentaireActivite ?? "Pas plus de détails..")</p>
                            @Html.Action("CreateForm", "LiaisonsProjetsPP", new { idActivite = pp.idActivite, idProjet = ViewBag.idProjet })
                        }
                    </div>
                </div>
             }                 
         }
    }
</div>
}
else
{
    @Html.Raw("<p>Aucune partie prenante disponible..")
    @Html.Raw("(attention: pour être ajoutée, une partie prenante doit posséder au moins une activité référencée..)</p>")
    }

在我看来，我称之为搜索方法（视图/项目/详细信息）：@{ Html.RenderAction("IndexAjoutML", "LiaisonsProjetsPP", new { idProjet = Model.idProjet, searchString = Model.searchString }); }

搜索工作，但它会将我重定向到另一个页面http://localhost:49612/LiaisonsProjetsPP/IndexAjout/1，而不是停留在此页面http://localhost:49612/Projets/Details/1。

Answer 1

您正在尝试做的似乎是使用 AJAX 表单不显眼地加载结果。 Professional ASP.NET MVC 5 John Galloway 等人的书。对此有一个很好的部分，但意识到没有人阅读书籍，我将提供一个指向带有代码示例的站点的链接。 .NET Funda 网站准确描述了here 如何使用 unobtrusive-ajax 在不完全刷新的情况下搜索并将结果返回到同一页面。 您可能缺少对jquery.unobtrusive-ajax.min.js 的引用。 Stack Overflow 上的其他 posts 也参考了这个主题，但我知道你可能不知道正确的搜索词。尝试进一步研究“AJAX 局部视图不显眼加载”作为进一步研究的搜索词。

这个例子来自我提到的 John Galloway 的书。 JavaScript 错误消息。

function searchFailed(){
  $("#searchresults").html("Sorry, there was a problem searching.");
  }

This is what a simple Ajax form should look like. Note the "GET" form method.

<div class="panel panel-default">
  <div class="panel-heading">
    Artist Search
   </div>
  <div class="panel-body">
    @using(Ajax.BeginForm("ArtistSearch", "Home",
    new AjaxOptions
    {
      InsertionMode = InsertionMode.Replace,
      HttpMethod = "GET",
      OnFailure = "searchFailed",
      LoadingElementID = "ajax-loader",
      UpdateTargetId = "searchresults",
    }))
    {
      <input type="text" name="q" />
      <input type="submit" value="search" />
      <img id="ajax-loader"
           src="@Url.Content("~/Images/ajax-loader.gif")"
           style="display:none" />
    }
    <div id="searchresults"></div>
    </div>
</div>
  

这是负责返回部分视图的方法：

public ActionResult ArtistSearch(string q)
{
    var artists = GetArtists(q);
    return PartialView(artists);
}

这是一种搜索方法。

public List<Artist> GetArtists(string searchString)
{
   return storeDB.Artist.Where(a => a.Name.Contains(searchString)).ToList();
}

注意，返回局部视图的方法就是“return PartialView(model);”