Comment actualiser une partie seulement de la page d'Index en MVC 5?

La page d'Index contient deux vues partielles. L'un est pour l'utilisateur de saisir les critères de recherche, l'autre pour afficher les résultats.
Comment mettre à jour les données dans la vue des Résultats seulement ?

Je suis en utilisant MVC 5 et Rasoir. J'ai vu quelques exemples sur ce, principalement à l'aide d'ajax et jquery. Je me demande quelle serait la meilleure (préférez le plus facile) solution pour ce

//INDEX DE LA VUE:

<div id="div_Search"> 
@{Html.RenderPartial("~/Views/Shared/Search.cshtml", ViewBag.Model_Search );}
</div>

<div id="div_Results">
@{Html.RenderPartial("~/Views/Shared/Results.cshtml", ViewBag.Model_Results );}
</div>


//HOME CONTROLLER

public de la classe HomeController: Contrôleur de
{
MainContextDB db = new MainContextDB();

public ActionResult Index()
{
    //Code to initialize ViewBag.Model_Search, etc...
    .... 

    //Code to initialize  ViewBag.Model_Results, etc... (Values empty at startup) 
    ....

    return View();
}


[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult GetResults([Bind(Include = "DropOffLoc,DropOffDate,PickUpDate")] Search search)
{

   //Retrieve results using the search parameters, etc...
   ....

   //THIS RETURNS THE VIEW WITH THE DATA, BUT IN A SEPARATE PAGE (AS EXPECTED) 
   return View("~/Views/Shared/Results.cshtml", results);            

   //THIS RETURNS THE VIEW IN THE MAIN PAGE BUT WITH EMPTY DATA (AS EXPECTED) 
   return  RedirectToAction("Index");

   //HOW TO RETURN THE VIEW WITH THE DATA IN THE MAIN PAGE ?
   ??????? 

}

}

//C'EST LA RECHERCHE VUE PARTIELLE

@model Models.Results

@using (Html.BeginForm("GetResults", "Home", FormMethod.Post, new { @class = "my-form" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <div class="form-group input-group-sm">
        @Html.LabelFor(model => model.DropOffLoc)
        @Html.DropDownListFor(model => model.DropOffLoc, ViewBag.LocationList as SelectList, new { @class = "form-control"  })
        @Html.ValidationMessageFor(model => model.DropOffLoc)
    </div>

    <div class="form-group input-group-sm">
        @Html.LabelFor(model => model.DropOffDate)
        @Html.TextBoxFor(model => model.DropOffDate, new { @class = "form-control datepicker", placeholder = "Enter Drop-off date here..." })
        @Html.ValidationMessageFor(model => model.DropOffDate)
    </div>

        <div class="form-group input-group-sm">
        @Html.LabelFor(model => model.PickUpDate)
        @Html.TextBoxFor(model => model.PickUpDate, new { @class = "form-control datepicker", placeholder = "Enter Pick-up date here..." })
        @Html.ValidationMessageFor(model => model.PickUpDate)
    </div>

    <div style="text-align: center; margin-top: 10px; margin-bottom: 10px;">
        <input type="submit" id="getResults" value="GET RESULTS" class="btn btn-default btn-success" />
    </div>
}

InformationsquelleAutor Ben Junior | 2014-01-16

16

Je voudrais mettre un formulaire dans votre recherche partielle. Ensuite, l'action de poste qui, via JQuery, à votre GetResults Action, qui doit retourner:
```
return PartialView("~/Views/Shared/Results.cshtml", results); 
```
Puis, dans la réussite de rappel de votre JQuery post, cracher les résultats retournés à votre $("#div_Results") comme suit:
```
$.ajax({
    url: '/Home/GetResults',
    type: "POST",
    dataType: "html",
    data: $("#FormId").serialize(),
    success: function (data) {
        //Fill div with results
        $("#div_Results").html(data);
    },
    error: function () { alert('error'); }
});
```
Sauf si j'ai une faute de frappe ou quelque chose, cela devrait fonctionner. Vous aurez besoin de le remplacer, le sélectionneur de formulaire avec l'Id de votre balise de formulaire.
- C'est exactement comme il est, dans un formulaire. Pouvez-vous donner un exemple sur la façon de faire de la "..cracher les résultats retournés à votre $("#div_Results")"
- Faire - Voir modifier ci-dessus.
InformationsquelleAutor SethMW

si cette question a une réponse déjà, je pensais que j'allais poster une approche alternative qui serait aussi travailler. Cette approche utilise la même méthode d'action et vérifie uniquement si la Demande est un appel Ajax qui alors ne remplace une partie du corps. Voici le code correspondant uniquement.

//Le formulaire de recherche

 @using (Ajax.BeginForm("Index", "Home", new AjaxOptions() 
                                                                { HttpMethod = "GET", UpdateTargetId = "my-posts", 
                                                                    InsertionMode = InsertionMode.Replace 
                                                                }))
                        {
                            <input type="text" name="term" placeholder="Search B.I & G" />
                            <input type="submit" value="" />
                        }

//Partie de la Vue

<section>
<div id="my-posts">
    @Html.Partial("_Posts", Model.Posts)
</div>

Maintenant ici est l'Indice de la méthode d'action, si la Demande est une AjaxRequest, il renvoie une Vue Partielle qui remplace le contenu du div avec l'id de mes posts. Si la Demande n'est pas une requête Ajax puis il charge l'ensemble de la Vue.

        public async Task<ActionResult> Index(string term)
    {

        var viewModel = new HomeFeedsViewModel();

        viewModel.Posts = await Task.Run(() =>
                                    db.Posts.Include("Comments")
                                    .Include("By").OrderByDescending(o => o.PostedOn)
                                    .ToList());
        //Return a Partial View which replaces content on the View
        //only if the Request is an Ajax Request
        if (Request.IsAjaxRequest())
        {
            viewModel.Posts = viewModel.Posts
                .Where(a => a.Title.IndexOf(term, StringComparison.OrdinalIgnoreCase) >= 0
                || a.Message.IndexOf(term, StringComparison.OrdinalIgnoreCase) >= 0
                );

            return PartialView("_Posts", viewModel.Posts);
        }

        return View(viewModel);
    }

Espère que cela aide quelqu'un.

Grande pureté de rasoir mvc façon. Même si je ne peux pas comprendre comment l'utilisation d'y travaille 🙂
L'instruction using assure que les ressources du serveur utilisé lors de l'analyse du html concernés du rasoir code est éliminé dès Ajax.BeginForm() est hors de portée
Salut Dev, 1) comment pouvons-nous gérer multiple search criteria/input, dates comme ce lien? sur le côté gauche, case à cocher, liste déroulante, etc à l'aide de votre Ajaxified approach. Aussi, 2) sur le retour en ajoutant un pur HTML de la table de données ou de quoi sommes-nous ajouter, la totalité du formulaire?

InformationsquelleAutor Dev

3

Vous, en fait, plus besoin d'utiliser AJAX.

La meilleure approche, comme je le vois, est d'avoir une vue partielle et émettre un AJAX Load (jQuery.chargement de jQuery) pour elle.

InformationsquelleAutor tucaz

Vous devez vous connecter pour publier un commentaire.