Asp.net Mvc3 webgrid et la pagination

Je suis en train d'apprendre Asp.net mvc. Je sais que je suis différent des formes et j'ai besoin de changer ma façon de penser, sans doute. Mon problème est sur le webgrid . Quand j'ajoute webgrid à ma page, et cliquez sur le bouton rechercher avec Post il rend une table avec pager et ainsi de suite. Mais les liens du pager n'est pas poster forme, ils sont juste des liens et j'ai perdu toutes mes données du formulaire.

Contrôleur dispose de deux méthodes indicielles l'un est pour les obtenir et que l'autre est pour le post. Pour obtenir je ne fais rien, je viens de créer un nouveau viewmodel dans ce cas, la Recherche de classe et de jeu à la vue. Pour ma méthode post, je prends mon modèle de vue faire de la recherche et de l'ensemble rempli viewmodel de vue.

problème : webgrid rend pager que des liens et donc il va entrer à l'Index pour obtenir, mais comme il n'est pas une requête post je n'ai pas de champs de formulaire rempli et ma recherche ne va pas donner le même résultat.

Peut-être un exemple de code peut l'expliquer mieux.

Vue:

<form action="" method="post">

Esas no : @Html.TextBoxFor(x=>x.Name)
Yil : @Html.TextBoxFor(x=>x.Year)

<input type="submit" value="Search" />

<hr />
@ViewBag.Message
<hr />

@{ var grid = new WebGrid(Model.Results,rowsPerPage:5);}

@grid.GetHtml(tableStyle:"table",htmlAttributes:new {id="tbl"} )

</form>

Voici Mon Controller: la Recherche se fait dans l'Index de la méthode Post et il a juste mon viewmodel de la classe.

    private ISearchContext _sc;

    public  MyController(ISearchContext sc)
    {
        _dc = dc;
    }

    //
    //GET: /Dava/

    public ActionResult Index()
    {
        var search = new Search();
        ViewBag.Message = "";
        return View(search);
    }

    [HttpPost]
    public ActionResult Index(Search search)
    {

        Search sres = _dc.SearchFromRepository(search);
        ViewBag.Message = String.Format("Count:{0} ",sres.Results.Count);
        return View(sres);
    }

Modèle de recherche de Classe est comme:

public class Search
{
    public int Year { get; set; }
    public string Name { get; set; }


    public IList<Item> Results { get; set; }

    public Search()
    {
        Results = new List<Item>();
    }
}

OriginalL'auteur adt | 2011-06-14

asp.net-mvc-3 webgrid

9

Une façon de résoudre ce problème est d'utiliser javascript et abonnez-vous pour l'événement click du tout de le pager de liens et de récupérer la valeur de la page souhaitée, et l'injecter dans un champ caché dans le formulaire et envoyer le formulaire au serveur, de sorte que les deux autres valeurs sont également envoyées.

Donc, commencer par l'ajout d'un Page nullable entier bien sur votre Search modèle de vue, et un champ caché dans le formulaire qui contiendra le choix numéro de la page:
```
@Html.HiddenFor(x => x.Page, new { id = "page" })
```
Puis tous vous avez besoin est un petit extrait de code javascript dans la page pour vous inscrire pour les .cliquez sur l'événement de la pager liens:
```
$(function () {
    $('tfoot a').click(function () {
        //when the user clicks on any of the pager links
        //try to extract the page number from the link and
        //set the value of the hidden field
        var page = this.href.match(/page=([0-9])+/)[1];
        $('#page').val(page);

        //submit the form so that the POST action is invoked
        //passing along the search criteria (Name and Year) along
        //with the page hidden field value to the Index action
        $('form').submit();

        //cancel the default action of the link which is to simply redirect
        //to the Index action using a GET verb.
        return false;
    });
});
```
votre suggestion fonctionne bien, mais suis-je le seul qui pense que ces une mince tâche ne devrait pas être difficile à accomplir. J'ai besoin d'ajouter un peu de code aussi pour le tri et ainsi de suite...
eh bien, c'est parfaitement normal, si vous êtes un temps classique de Formulaires web développeur. Classique WebForms sont des abstractions qui fuient et se cacher comment le web fonctionne réellement (comme le protocole HTTP, formulaires HTML, javascript ont été cachés derrière certains événements, Publications, ViewStates, etc...). C'est pourquoi vous avez sans doute trouver cela étrange, mais il est parfaitement normal 🙂
bien sûr, vous avez raison, c'est assez étrange que ce scénario n'est pas facile. Cependant, WebGrid est juste une solution possible pour le rendu des grilles avec ses avantages et ses inconvénients. Apparemment, il ne prend pas en charge le filtrage (ni avec certains solution intégrée, ni avec la publication des données de formulaire facilement). C'est peut-être pas le bon choix pour votre cas concret? Vous pouvez trouver d'autres solutions avec différents niveaux d'abstractions et de différents niveaux de soutien pour le "commun" des fonctionnalités telles que le tri, la recherche, de filtrage, de regroupement, de la hiérarchie, etc. Malheureusement, la plupart d'entre eux ne sont pas gratuits...
merci de votre commentaire, je savais que je devais changer ma façon de penser, mais j'ai toujours penser de cette façon : "bien sûr, je veux le plein pouvoir sur le langage html ( pas laid viewstate et pas de merde panneau de mise à jour) et que vous souhaitez utiliser DI sur mon contrôleurs etc, mais je n'ai vraiment pas envie de passer beaucoup de temps de la grille de radiomessagerie et de tri et de toute l'équipe ont à traiter avec beaucoup de choses qui va ralentir le processus de développement".
Veuillez voir ma solution à l'aide partielle de la vue. À l'aide de mon approche et vous n'avez pas besoin de ViewState, TempData, ViewBag, Javascript, ni aucun de ceux des approches complexes.

OriginalL'auteur Darin Dimitrov

Voici une solution de contournement qui n'utilise pas de JavaScript.

Le problème que je vois c', échange de liens ne recevez pas les informations sur l'itinéraire qui doit être préservé, comme un filtre de recherche. IMO c'est un flagrant de surveillance! Un peu de réflexion supplémentaire ici aurait permis d'économiser beaucoup de maux de tête!

Cette technique le "jette" le WebGrid intégré dans la pagination, et utilise un assistant pour générer de l'échange de liens, avec les précieuses données de la route que nous voulons.

Une fois terminé, il vous suffit de rendre le WebGrid comme la grille, et l'utilisation de l'aide pour faire des échange de liens. L'avantage ici est que vous pouvez mettre ceux d'en haut et d'en bas, que nous aimons faire.

J'ai tenté d'utiliser similaire CSS de ce qui est prévu dans le Pager.css qui NuGet met à votre solution. L'aide doit être assez complète pour certains d'entre vous, mais il est facilement étendu.

Nouveau nouveau nouveau je viens de mettre à jour l'aide avec un Ajax version. Je suis un peu n00b avec Rasoir aides, donc je ne pouvais pas comprendre comment le re-facteur d'utiliser un modèle commun; n'importe qui s'il vous plaît? L'important détail supplémentaire n'est à passer dans le AjaxOptions et assurez-vous d'utiliser POST comme le verbe, sinon vous risquez de ne pas finir dans la bonne méthode de contrôleur.

Helper (App_Code/LocalHelpers.cshtml):

@helper DoPager(System.Web.Mvc.HtmlHelper hh, string pageActionName, WebGrid grid, int maxPageLinks, object rvd) {
<div class="pager">
<div class="pageof">Page <b>@(grid.PageIndex + 1)</b> of <b>@grid.PageCount</b></div>
@if (grid.PageCount > 1) {
<ul>
<li>
@{ RouteValueDictionary rvdp1 = new RouteValueDictionary(rvd);
rvdp1.Add("Page", 1);
}
@hh.ActionLink("<<", pageActionName, rvdp1)
</li>
@{ int start = Math.Max(0, grid.PageIndex - maxPageLinks / 2); }
@for (int ix = 0; ix + start < grid.PageCount; ix++) {
int pageno = start + ix + 1;
var css = hh.Raw(pageno - 1 == grid.PageIndex ? " class=\"highlighted\"" : "");
RouteValueDictionary rvdp = new RouteValueDictionary(rvd);
rvdp.Add("Page", pageno);
<li@css>
@hh.ActionLink(pageno.ToString(), pageActionName, rvdp)
</li>
if (ix >= maxPageLinks) { break; }
}
<li>
@{ RouteValueDictionary rvdpX = new RouteValueDictionary(rvd);
rvdpX.Add("Page", grid.PageCount);
}
@hh.ActionLink(">>", pageActionName, rvdpX)
</li>
</ul>
}
</div>
}
@helper DoAjaxPager(System.Web.Mvc.AjaxHelper aa, System.Web.Mvc.Ajax.AjaxOptions aopts, System.Web.Mvc.HtmlHelper hh, string pageActionName, WebGrid grid, int maxPageLinks, object rvd) {
<div class="pager">
<div class="pageof">Page <b>@(grid.PageIndex + 1)</b> of <b>@grid.PageCount</b></div>
@if (grid.PageCount > 1) {
<ul>
<li>
@{ RouteValueDictionary rvdp1 = new RouteValueDictionary(rvd);
rvdp1.Add("Page", 1);
}
@aa.ActionLink("<<", pageActionName, rvdp1, aopts)
</li>
@{ int start = Math.Max(0, grid.PageIndex - maxPageLinks / 2); }
@for (int ix = 0; ix + start < grid.PageCount; ix++) {
int pageno = start + ix + 1;
var css = hh.Raw(pageno - 1 == grid.PageIndex ? " class=\"highlighted\"" : "");
RouteValueDictionary rvdp = new RouteValueDictionary(rvd);
rvdp.Add("Page", pageno);
<li@css>
@aa.ActionLink(pageno.ToString(), pageActionName, rvdp, aopts)
</li>
if (ix >= maxPageLinks) { break; }
}
<li>
@{ RouteValueDictionary rvdpX = new RouteValueDictionary(rvd);
rvdpX.Add("Page", grid.PageCount);
}
@aa.ActionLink(">>", pageActionName, rvdpX, aopts)
</li>
</ul>
}
</div>
}

Vue:

<center>
@LocalHelpers.DoPager(Html, "Index", grid, 10, new { CurrentFilter = ViewBag.CurrentFilter })
</center>
@grid.Table(
tableStyle: "centerit",
columns: grid.Columns(
grid.Column(format: @<span>@Html.ActionLink("Edit", "Edit", new { id = item.ID }) | @Html.ActionLink("Details", "Details", new { id = item.ID }) | @Html.ActionLink("Delete", "Delete", new { id = item.ID })</span>),
grid.Column("PartNumber", "Part Number"),
grid.Column("Description", "Description"),
grid.Column("Regex", "Regex")
)
)
<center>
@LocalHelpers.DoPager(Html, "Index", grid, 10, new { CurrentFilter = ViewBag.CurrentFilter })
</center>

De mon point de vue, je suis le recyclage de la "CurrentFilter" pour connaître le contenu du filtre. Cela se connecte au Contrôleur de l'Action (pas sur la photo).

Ce qui sur le tri? Est route des renseignements conservés pour le tri des liens?
Il est configuré pour passer à travers toutes les valeurs que vous choisissez de se "régénérer" comme le tri des paramètres, les paramètres de filtre, etc. mais vous devez les placer dans laquelle vous ajoutez la grille. Si vous regardez le dernier paramètre, qui est l'endroit pour mettre des choses que vous voulez "come back" de votre action.
merci pour la flamme de vieux garçon, je n'ai même pas le faire de cette façon, j'essayais juste de répondre à la question, qu'est ce que ce site est sur! Il n'est pas moins de sorte que certaines personnes l'ont trouvé utile, encore une fois le point de ce site.
plus buter cette solution voir (Helpers) = > a2z.googlecode.com/svn/trunk/PresentationMVC/App_Code/... Et (Afficher) => a2z.googlecode.com/svn/trunk/PresentationMVC/Views/Job/... Merci à @escape-llc

OriginalL'auteur escape-llc

Ok. J'ai une solution plus élégante à l'aide d'AJAX et une Vue Partielle qui devrait résoudre ce problème une fois pour toutes

C'est mon modèle:

public class SearchResultModel
{
public string SearchText{ get; set; }
public List<YourObject> Results { get; set; }
public int TotalResults { get; set; }
}

L'affichage de la recherche est structurée comme suit:

@model SearchResultModel
@using (Ajax.BeginForm("SearchAction", "SearchController", new AjaxOptions{UpdateTargetId = "data-grid", HttpMethod="Post"}))
{
@Html.TextBoxFor(m => m.SearchText)
<input class="myButton" type="submit" value="Search" />
}
<br />
<div id="data-grid">
@Html.Partial("SearchResults", new SearchResultModel())
</div>

La SearchResults vue partielle est:

@model SearchResultModel
@{
if (Model.Results != null && Model.Results.Count > 0)
{
var grid = new WebGrid(canPage: true, rowsPerPage: 10, canSort: true, ajaxUpdateContainerId: "grid");
grid.Bind(Model.Results, rowCount: Model.TotalResults, autoSortAndPage: false);
grid.Pager(WebGridPagerModes.All);
@grid.GetHtml(htmlAttributes: new { id = "grid" },
columns: grid.Columns(
grid.Column("YourColumn1"),
grid.Column("YourColumn2"),
grid.Column("YourColumn3")
),
tableStyle: "datatable",
rowStyle: "datatable-normal",
alternatingRowStyle: "datatable-alt"
);
}
else
{
<span>No Results</span>
}
}

Enfin, le Contrôleur est:

public class SearchController
{
public ActionResult SearchAction(SearchResultModel model)
{
return RedirectToAction("SearchResults", new { id = model.SearchText });
}
public ActionResult SearchResults(string id)
{
string searchText = id;
int page = 1;
if(Request["page"] != null)
int.TryParse(Request["page"], out page);
SearchResultModel model = new SearchResultModel();
//Populate model according to search text and page number
//........
//........
return PartialView(model);
}
}

Espère que cela va aider à sauver quelqu'un certain temps et l'angoisse!

OriginalL'auteur Varun Chatterji

Ma réponse envolves en gardant votre recherche sur la Session, et rien de plus.
La solution est la bonne, parce que vous pouvez l'adapter à votre situation du monde réel, et n'a pas besoin de classes spécifiques ou JQuery.

Le tour de magie qui se passe à l'intérieur de votre Index ActionResult (ou par défaut de votre ActionResult rendu de la grille de la page par défaut behavor).

Exemple de Code:

    [HttpGet]
public ActionResult Index()//My default action result that will render the grid at its default situation
{
SearchViewModel model = new SearchViewModel(); 
if (Request.IsAjaxRequest()) //First trick is here, this verification will tell you that someone sorted or paged the grid.
{
if (Session["SearchViewModel"] != null) //If session is not empty, you will get the last filtred values from it.
model = (SearchViewModel)Session["SearchViewModel"];
}
else //If it is not an AjaxRequest, you have to clear your Session, so new requests to Index with default behavior won't display filtred values.
{
Session["SearchViewModel"] = null;
}
model.GridResult = ExecuteFilter(model); //OPITIONAL! This code dependes on how is your real world situation. Just remember that you need to return a default behavior grid if the request was not called by the WebGrid, or return filtred results if WebGrid requested.
return View(model);
}

Donc, ce sera par défaut de votre ActionResult. Il permettra de vérifier si la demande a été appelé par le WebGrid de pagination ou de tri de l'événement, de décider si les rendements filtred résultats ou le comportement normal du résultat.

Étape suivante est la recherche POST ActionResult:

    [HttpPost]
public ActionResult Index(SearchViewModel pesquisa) //IMPORTANT!! It is necessary to be the SAME NAME of your GET ActionResult. The reason for that I know, but won't discuss here because it goes out of the question.
{
SearchViewModel model = new SearchViewModel();
model.GridResult = ExecuteFilter(pesquisa); //Execute your filter
Session["SearchViewModel"] = model; //Save your filter parameters on Session.
return View("Index", model);
}

C'est tout. De L'Index.cshtml n'ont pas de truc. Juste un SearchForm à la ActionResult Index, en passant mon SearchViewModel comme paramètre.

Pourquoi cette solution fonctionne?

Bien, quand vous cliquez sur une sorte ou d'une page, la WebGrid exécuter un JavaScript similaire à ceci:

$('#yourGrid').load('it pass the url used to display your current Page, and some paging or sorting parameters, but those are used by the WebGrid')

Puisqu'il ne un .la méthode load (), la demande va être un GET, et va frapper votre Index OBTENIR ActionResult. Mais c'est un appel AJAX, donc notre tour de magie va exécuter le filtre de nouveau avec les paramètres que vous avez enregistré dans la Session.

L'unique détails, j'alerte, est au sujet de votre comportement par défaut de la grille. Le OBTENIR l'Indice de ActionResult DOIT JAMAIS RENVOIE valide la grille de résultat, pas d'importance si elle a ou non des filtres sur Session.

Vous pouvez changer de Session pour mettre en Cache si son correspond mieux.

OriginalL'auteur TiagoBrenck

Vous devez vous connecter pour publier un commentaire.