De la grille.Mvc.Ajax extension de la grille d'initialisation
Salut, je suis très nouveau à l'interface Web dev à l'aide de JQuery & Ajax et je vais essayer d'obtenir le package nuget Grille.MVC.Ajax de travail. Le fichier readme indique ce qui suit:
Follow thse steps to use Grid.Mvc.Ajax
1. Include ~/Scripts/gridmvc-ext.js after your ~/Scripts/grimvc.js include.
2. Include ~/Content/ladda-bootstrap/ladda-themeless.min.css CSS after your Bootstrap CSS/LESS include.
3. Include Ladda-bootstrap Javascript via the ~/Scripts/ladda-bootstrap/ladda.min.js
and ~/Scripts/ladda-bootstrap/spin.min.js.
4. Create a view model for you grid data, for example:
public Person
{
public string FirstName { get; set; }
public string LastName { get; set; }
}
5. Add a Razor partial view for your grid data that uses an AjaxGrid<T> as the model type,
Where T is your view model type:
@using GridMvc.Html
@using GridMvc.Sorting
@model Grid.Mvc.Ajax.GridExtensions.AjaxGrid<Models.Person>
@Html.Grid(Model).Columns(columns =>
{
columns.Add(c => c.FirstName);
columns.Add(c => c.LastName);
}).Sortable(true).WithPaging(10)
6. Add a controller action to retrieve the data for the first page of data that includes the Ajax pager HTML:
public JsonResult Persons()
{
var vm = new List<Person>()
{
new Person() { FirstName = "John", LastName = "Doe" }
}
.AsQueryable();
var ajaxGridFactory = new Grid.Mvc.Ajax.GridExtensions.AjaxGridFactory();
var grid = ajaxGridFactory.CreateAjaxGrid(vm, 1, false);
}
7. Add a controller action to retrieve data for paged items that returns a JsonResult without the Ajax page HTML:
public JsonResult PersonsPaged(int page)
{
var vm = new List<Person>()
{
new Person() { FirstName = "John", LastName = "Doe" }
}
.AsQueryable();
var ajaxGridFactory = new Grid.Mvc.Ajax.GridExtensions.AjaxGridFactory();
var grid = ajaxGridFactory.CreateAjaxGrid(vm, page, true);
}
8. Call the ajaxify Grid.Mvc.Ajax JavaScript plug-in method setting the non-paged and paged controller actions and optionally a form
to apply additional filtering to the grid. All input and select elements in the given form will be passed into your paged and non-paged controller actions:
$(".grid-mvc").gridmvc().ajaxify({
getPagedData: '/Home/Persons',
getData : '/Home/PersonsPaged',
gridFilterForm: $("#gridFilters")
});
J'ai mis les choses en place comme indiqué, mais je vais avoir des problèmes à l'étape 8. comme je ne suis pas sûr de savoir comment appeler le code JavaScript afin de remplir la grille. J'ai joint ci-dessus dans un $(document).prêt appel, mais qui ne semble pas fonctionner 🙁 Toute aide serait grandement appréciée. Grâce
Assurez-vous que la grille dans votre HTML a la .grille-mvc classe. Sinon, il serait de trouver l'élément à initialiser. par exemple <div class="grid-mvc"></div>
pour moi, quand je n'ai que le compilateur est un échec car il n'y a pas de retour de la méthode.
pour moi, quand je n'ai que le compilateur est un échec car il n'y a pas de retour de la méthode.
OriginalL'auteur JonnyR | 2013-12-16
Vous devez vous connecter pour publier un commentaire.
Vous avez deux options:
loadPage
etrefreshFullPage
cela appel à votre PersonsPaged méthode:
et cela permettra d'appeler vos Personnes de la méthode.
aussi, dans vos Personnes et PersonsPaged vous pouvez revenir à une JSON comme ceci:
Jetez un oeil à gridmvcajax.codeplex.com/SourceControl/latest#Grid.Mvc.Demo/...
OriginalL'auteur MuriloKunze
J'ai résolu le problème en ajoutant la URI.js fichier sur les scripts de la balise avant gridmvc.js et gridmvc-ext.js. Quand j'ai installé la Grille.Mvc.Ajax par Nuget, il a ajouté ce fichier.
J'ai appelé le code à l'intérieur de l' $(document).ready(function() { ... }) et utilisé deux fois façons.
1 - L'objet de la grille à l'aide de la grille de nom.
2 - j'ai fait de la même manière que vous l'avez fait appel ajaxify méthode après gridmvc méthode à l'aide d'un sélecteur jquery et cela a fonctionné pour moi.
ou
"productGrid" est la grille du nom. J'espère avoir aidé.
OriginalL'auteur Paulo Fernando