search mvc staying same page

Question

I'm using MVC5 and I want to search for a result and stay at the same page, here is my method in my controller (LiaisonsProjetsPPController) that do the operation of searching :

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

Then in my view (Views/ActivitesPP/IndexAjoutProjet) I have my search form and the div of the display result :

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

In my view i call my method of search (Views/Projets/Details): @{ Html.RenderAction("IndexAjoutML", "LiaisonsProjetsPP", new { idProjet = Model.idProjet, searchString = Model.searchString }); }

The search work but it redirects me to another page http://localhost:49612/LiaisonsProjetsPP/IndexAjout/1 instead of staying at this page http://localhost:49612/Projets/Details/1.

Answer 1

What you are trying to do seems to be loading results unobtrusively with an AJAX form. The Professional ASP.NET MVC 5 book by John Galloway et al. has a nice section on this, but realizing that no one reads books I will provide a link to a site with a code sample for it. The .NET Funda site describes here exactly how to search and return the results to the same page without a complete refresh using unobtrusive-ajax. Likely what you are missing is a reference to jquery.unobtrusive-ajax.min.js. Other posts on Stack Overflow also reference this topic, but I realize you might not know the correct search terms. Try looking further into "AJAX partial view unobtrusive loading" as search terms for further research.

This example is from the book I mentioned from John Galloway. A JavaScript error message.

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>
  

This is the method responsible for returning the partial view:

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

This is a search method.

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

Note that the method for returning the partial view is simply "return PartialView(model);"