Seleção múltipla de caixas de seleção usando Webgrid no MVC 3 (selecione Tudo / Desmarcar tudo), Classificação e paginação [fechado]
Se você está se perguntando como fazer várias caixas de seleção e várias opções (selecione Tudo ou Desmarcar Tudo), paginação e classificação em um MVC3 Webgrid, aqui está a solução:
Para simplificar, possui os seguintes recursos:
Checkbox no webgridMúltipla seleção de caixa de seleção (marque tudo / desmarque tudo)Página usando LINQ Classificando usando LINQVisão
@using NameSpace.DataAccess
@using ThisController = NameSpace.Web.Controllers.HomeController
@model GenericModelTypes<ContactModel>
@{var grid = new WebGrid(rowsPerPage: ThisController._pageSize,
canPage: true, canSort: true, ajaxUpdateContainerId: "webgrid");
grid.Bind(Model.TypeList, rowCount:Model.TotalRecordCount,autoSortAndPage: false);
grid.Pager(WebGridPagerModes.All);
@grid.GetHtml(
tableStyle: "webgrid",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
htmlAttributes: new { id = "webgrid" },
columns: grid.Columns(
grid.Column(header: "Assign?", style: "labelcolumn",
format:
@<text><input class="check-box" id="assignChkBx" name="assignChkBx" type="checkbox" value="@item.ContactId" /></text>),
grid.Column("CompanyName", "Company Name"),
grid.Column("Title", "Title"),
grid.Column("FirstName", "First Name"),
grid.Column("LastName", "Last Name"),
grid.Column("Street", "Street"),
grid.Column("City", "City"),
grid.Column("State", "State"),
grid.Column("ZipCode", "ZipCode"),
grid.Column("ZipPlus4", "ZipPlus4"),
grid.Column("Phone", "Phone", canSort: false),
grid.Column("Fax", "Fax", canSort: false),
grid.Column("UserName", "AssignedTo")
))
}
Estou retornando o modelo que possui duas propriedades (uma classe [ContactModel] e uma propriedade int [TotalRecordCount] que possui um número total de registros)
É importante que você informe ao webgrid quantas linhas totais ele terá; para que seja usado para paginação.
Jquery:
$(document).ready(function () {
$("#toggleAllCheckBox").click(function () {
if ($(this).attr("checked")) {
$(".check-box").attr("checked", true);
} else {
$(".check-box").attr("checked", false);
}
});
});
basta adicionar o item abaixo em qualquer lugar do corpo e posicionar adequadamente, onde deseja exibir:
<div style="margin-left:75px;" ><input id="toggleAllCheckBox" type="checkbox"/></div>
Modelo de Domínio: (isto é o que digitou vinculado à Vista)
public class GenericModelTypes<T> //Generics
{
public IList<T> TypeList { get; set; }
public Int32 TotalRecordCount {get; set;}
}
Métodos de suporte no projeto DAL:
public GenericModelTypes<ContactModel> GetContacts(String searchValue, int page, int pageSize, String sort)
{
LeadsModelCollection leadscol = new LeadsModelCollection();
IList<ContactModel> addContacts = new List<ContactModel>();
GenericModelTypes<ContactModel> contactModelContainer = new GenericModelTypes<ContactModel>();
try
{
using (SqlConnection sqlcon = new SqlConnection(_connectionString))
{
SqlCommand com = new SqlCommand("sp_GetContacts", sqlcon);
com.CommandType = CommandType.StoredProcedure;
com.Parameters.Add("@search", SqlDbType.NVarChar).Value = searchValue;
sqlcon.Open();
SqlDataReader dr = com.ExecuteReader();
while (dr.Read())
{
ContactModel contact = new ContactModel();
contact.ContactId = (int)dr["ContactId"];
contact.CompanyName = dr["CompanyName"].ToString();
contact.FirstName = dr["FirstName"].ToString();
contact.LastName = dr["LastName"].ToString();
contact.Gender = dr["Gender"].ToString();
contact.Title = dr["Title"].ToString();
contact.Street = dr["Street"].ToString();
contact.City = dr["City"].ToString();
contact.State = dr["State"].ToString();
contact.ZipCode = dr["ZipCode"].ToString();
contact.ZipPlus4 = dr["ZipPlus4"].ToString();
contact.Phone = dr["Phone"].ToString();
contact.Fax = dr["Fax"].ToString();
contact.UserName = dr["UserName"].ToString();
addContacts.Add(contact);
}
}
}
catch (Exception ex)
{
throw new Exception(String.Format("Unable to Fetch:{0}\n{1}\n{2}\n{3}",ex.Message,ex.Source,ex.InnerException,ex.StackTrace));
}
contactModelContainer.TypeList = addContacts;
var Results = contactModelContainer.TypeList.AsQueryable();
contactModelContainer.TotalRecordCount = Results.Count();
Results = Results.Skip(page * pageSize).Take(pageSize);
Results = SortContactResults(sort, Results);
contactModelContainer.TypeList = Results.ToList();
return contactModelContainer;
}
private static IQueryable<ContactModel> SortContactResults(String sort, IQueryable<ContactModel> Results)
{
switch (sort)
{
case "CompanyName":
Results = Results.OrderBy(c => c.CompanyName);
break;
case "FirstName":
Results = Results.OrderBy(c => c.FirstName);
break;
case "LastName":
Results = Results.OrderBy(c => c.LastName);
break;
case "City":
Results = Results.OrderBy(c => c.City);
break;
case "State":
Results = Results.OrderBy(c => c.State);
break;
case "ZipCode":
Results = Results.OrderBy(c => c.ZipCode);
break;
case "ZipPlus4":
Results = Results.OrderBy(c => c.ZipPlus4);
break;
case "UserName":
Results = Results.OrderBy(c => c.UserName);
break;
default:
Results = Results.OrderBy(c => c.CompanyName);
break;
}
return Results;
}
Estou usando o FULL TEXT Engine para pesquisar a tabela; portanto, usei a conexão SQL manualmente, você também pode arrastar e soltar o procedimento de armazenamento no arquivo dbml (exibição de designer) e usar o LINQ pur
O código acima primeiro usa a conexão SQL para buscar dados e colocá-los no SQLDBReader, depois usei o LINQ to SORT e PAGE. Há muitas maneiras de fazer, essa é uma das maneiras.
Controlador
public ActionResult LeadsSearch(String searchValue, FormCollection form, int? Page, String sort)
{
var startPage = 0;
Page = Session["Page"] != null ? ((int?)Session["Page"]).Value : 1;
if (Page.HasValue && Page.Value > 0)
{ startPage = Page.Value - 1; }
LeadsManager leadsLibrary = new LeadsManager(); //DAL Project Class
GenericModelTypes<ContactModel> contactList = leadsLibrary.GetContacts(searchValue, startPage, _pageSize, sort);
return View(contactList);
}
Algumas variáveis são irrelevantes, por favor ignor
css:
/* Webgrid */
.webgrid { width:975px;
border: 0px;
border-collapse: collapse;
}
.webgrid a { color: #000;
}
.webgrid-header { padding: 6px 5px;
text-align: center;background-color: #e8eef4;
height: 40px;
border-top: 2px solid #D6E8FF;
border-left: 2px solid #D6E8FF;
border-right: 2px solid #D6E8FF;
border-bottom: 2px solid #3966A2;
}
.webgrid-footer { padding: 6px 5px;
text-align: center;
background-color: #e8eef4;
border-top: 2px solid #3966A2;
height: 30px;
border-bottom: 2px solid #D6E8FF;
border-left: 2px solid #D6E8FF;
border-right: 2px solid #D6E8FF;
}
.webgrid-alternating-row { height: 10px;
background-color: #f2f2f2;
border-bottom: 1px solid #d2d2d2;
border-left: 2px solid #D6E8FF;
border-right: 2px solid #D6E8FF;
}
.webgrid-row-style {
height: 10px;
border-bottom: 1px solid #d2d2d2;
border-left: 2px solid #D6E8FF;
border-right: 2px solid #D6E8FF;
}
.webgrid-selected-row { font-weight: bold; }
É isso que você está feito!