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>")
    }

在我看来，我调用我的搜索方法（Views / Projets / Details）：@{ 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表单加载不引人注意的结果。 John Galloway等人的 Professional ASP.NET MVC 5 一书。有一个很好的部分，但意识到没有人读书我会提供一个链接到一个网站的代码示例。 .NET Funda网站详细描述了here如何搜索结果并将结果返回到同一页面，而无需使用unobtrusive-ajax进行完全刷新。您可能缺少的是对jquery.unobtrusive-ajax.min.js的引用。 Stack Overflow上的其他posts也引用了此主题，但我发现您可能不知道正确的搜索词。尝试进一步研究“AJAX partial view unobtrusive loading”作为进一步研究的搜索术语。

这个例子来自我从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();
}

请注意，返回局部视图的方法只是“返回PartialView（model）;”

搜索mvc保持同一页面

1 个答案: