ASP.Net MVC 3 में सारणीबद्ध डेटा का इन-लाइन संपादन

मैं आपके लिए ASP.Net MVC 3 पर अजाक्सग्रिड का एक और कार्यान्वयन प्रस्तुत करता हूं।
लेख में इनलाइन संपादन, अजाक्स छँटाई और अजाक्स पेजर के साथ एक सारणीबद्ध रूप बनाने का वर्णन किया गया है।

यह कार्यान्वयन कई उपलब्ध घटकों का संकलन है।
जैसा कि आमतौर पर होता है, परिचालन जरूरतों के लिए, मुझे उन्हें संपादित करने की क्षमता के साथ सारणीबद्ध डेटा प्रदर्शित करने की आवश्यकता होती है। स्क्रीनशॉट में पसंद है:



शुरू करने से पहले, AjaxGridScaffolder स्थापित करें
PM> Install-Package AjaxGridScaffolder


एक डेटा लेयर बनाएं

सार।

 namespace HabrahabrMVC.Domain.Entities { public class RealtyObject { public int Id { get; set; } public string City { get; set; } public string Street { get; set; } public string House { get; set; } public double Cost { get; set; } public bool Visible { get; set; } } } 

इंटरफ़ेस।

 namespace HabrahabrMVC.Domain.Abstract { public interface IRepository { IQueryable<RealtyObject> GetAll(); void Save(RealtyObject objectToSave); } } 

प्रसंग।

 namespace HabrahabrMVC.Domain.Concrete { public class EFContext : DbContext { public DbSet<RealtyObject> RealtyObjects { get; set; } protected override void OnModelCreating(DbModelBuilder modelBuilder) { base.OnModelCreating(modelBuilder); } } } 

इंटरफ़ेस कार्यान्वयन।

 namespace HabrahabrMVC.Domain.Concrete { public class EFRepository :IRepository { EFContext _db = new EFContext(); public void Save(Entities.RealtyObject objectToSave) { _db.Entry(_db.RealtyObjects.SingleOrDefault(z=>z.Id==objectToSave.Id)).CurrentValues.SetValues(objectToSave); _db.Entry<RealtyObject>(_db.RealtyObjects.SingleOrDefault(z => z.Id == objectToSave.Id)).State = System.Data.EntityState.Modified; _db.SaveChanges(); } public IQueryable<RealtyObject> GetAll() { return _db.RealtyObjects.AsQueryable(); } } } 

एक नियंत्रक बनाएँ

ObjectsView:

1) इसके लिए, कंट्रोलर फ़ोल्डर पर ऑब्जेक्ट एक्सप्लोरर में राइट-क्लिक करें, Add-> कंट्रोलर ... (Add-> कंट्रोलर ...) चुनें।
2) हम ऑब्जेक्ट्स व्यू कंट्रोलरोल नाम लिखते हैं।
3) टेम्पलेट - अजाक्स ग्रिड नियंत्रक
4) मॉडल वर्ग - RealtyObject (HabraHabrMVC3.Domain.Entities)
5) डेटा संदर्भ वर्ग - EFContext (HabraHabrMVC3.Domain.Concrete)
6) जोड़ें।

विज़ार्ड ने हमारे लिए कोड जनरेट करने के बाद, हम कंस्ट्रक्टर को कंट्रोलर से जोड़ते हैं ताकि निन्यूज हमारी डेटा लेयर को सही तरीके से इंजेक्ट करे।

 //private EFContext db = new EFContext(); private IRepository db; public ObjectsViewController(IRepository dbparam) { db = dbparam; } 

अब हमें उत्पन्न कोड में डेटा स्रोतों को बदलने की आवश्यकता है:
db.RealtyObjects पर db.GetAll ()
db.RealtyObjects.Find (id) पर db.GetAll ()। SingleOrDefault (z => z.Id == id)

अब मुझे डेटा बनाने, संपादन और हटाने के लिए क्रियाओं की आवश्यकता नहीं है, मैं उन्हें हटा दूंगा।
यह भी देखें कि GridData.cshtml ने एडिट और डिलीट बटन को हटा दिया।

अब लाइन काम नहीं करती है:

 ObjectQuery<RealtyObject> realtyobjects = (db as IObjectContextAdapter).ObjectContext.CreateObjectSet<RealtyObject>(); 

क्योंकि db IObjectContextAdapter का समर्थन नहीं करता है।
इसलिए, हम Linq एक्सटेंशन विधि जोड़ते हैं।

मैंने एक अलग स्टेटिक क्लास ऑर्डरबेलपर बनाया।

 namespace HabraHabrMVC3.Infrastructure { public static class OrderByHelper { public static IEnumerable<T> OrderBy<T>(this IEnumerable<T> enumerable, string orderBy) { return enumerable.AsQueryable().OrderBy(orderBy).AsEnumerable(); } public static IQueryable<T> OrderBy<T>(this IQueryable<T> collection, string orderBy) { foreach (OrderByInfo orderByInfo in ParseOrderBy(orderBy)) collection = ApplyOrderBy<T>(collection, orderByInfo); return collection; } private static IQueryable<T> ApplyOrderBy<T>(IQueryable<T> collection, OrderByInfo orderByInfo) { string[] props = orderByInfo.PropertyName.Split('.'); Type type = typeof(T); ParameterExpression arg = Expression.Parameter(type, "x"); Expression expr = arg; foreach (string prop in props) { // use reflection (not ComponentModel) to mirror LINQ PropertyInfo pi = type.GetProperty(prop); expr = Expression.Property(expr, pi); type = pi.PropertyType; } Type delegateType = typeof(Func<,>).MakeGenericType(typeof(T), type); LambdaExpression lambda = Expression.Lambda(delegateType, expr, arg); string methodName = String.Empty; if (!orderByInfo.Initial && collection is IOrderedQueryable<T>) { if (orderByInfo.Direction == SortDirection.Ascending) methodName = "ThenBy"; else methodName = "ThenByDescending"; } else { if (orderByInfo.Direction == SortDirection.Ascending) methodName = "OrderBy"; else methodName = "OrderByDescending"; } //TODO: apply caching to the generic methodsinfos? return (IOrderedQueryable<T>)typeof(Queryable).GetMethods().Single( method => method.Name == methodName && method.IsGenericMethodDefinition && method.GetGenericArguments().Length == 2 && method.GetParameters().Length == 2) .MakeGenericMethod(typeof(T), type) .Invoke(null, new object[] { collection, lambda }); } private static IEnumerable<OrderByInfo> ParseOrderBy(string orderBy) { if (String.IsNullOrEmpty(orderBy)) yield break; string[] items = orderBy.Split(','); bool initial = true; foreach (string item in items) { string[] pair = item.Trim().Split(' '); if (pair.Length > 2) throw new ArgumentException(String.Format("Invalid OrderBy string '{0}'. Order By Format: Property, Property2 ASC, Property2 DESC", item)); string prop = pair[0].Trim(); if (String.IsNullOrEmpty(prop)) throw new ArgumentException("Invalid Property. Order By Format: Property, Property2 ASC, Property2 DESC"); SortDirection dir = SortDirection.Ascending; if (pair.Length == 2) dir = ("desc".Equals(pair[1].Trim(), StringComparison.OrdinalIgnoreCase) ? SortDirection.Descending : SortDirection.Ascending); yield return new OrderByInfo() { PropertyName = prop, Direction = dir, Initial = initial }; initial = false; } } private class OrderByInfo { public string PropertyName { get; set; } public SortDirection Direction { get; set; } public bool Initial { get; set; } } private enum SortDirection { Ascending = 0, Descending = 1 } } } 

और फिर एक नए प्रकार की कार्रवाई ग्रिडडाटा:

 public ActionResult GridData(int start = 0, int itemsPerPage = 20, string orderBy = "Id", bool desc = false) { Response.AppendHeader("X-Total-Row-Count", db.GetAll().Count().ToString()); var realtyobjects = db.GetAll().OrderBy(orderBy + (desc ? " desc" : "")); return PartialView(realtyobjects.Skip(start).Take(itemsPerPage)); } 

अब हमारे पास सॉर्टिंग और पेजिंग के साथ एक शानदार अजाक्स टेबल है।

इनलाइन संपादन जोड़ना

केवल HTML सहायक के लिए एक और एक्सटेंशन विधि जोड़ें:

 namespace System.Web { public static class HtmlPrefixScopeExtensions { private const string idsToReuseKey = "__htmlPrefixScopeExtensions_IdsToReuse_"; public static IDisposable BeginCollectionItem(this HtmlHelper html, string collectionName) { var idsToReuse = GetIdsToReuse(html.ViewContext.HttpContext, collectionName); string itemIndex = idsToReuse.Count > 0 ? idsToReuse.Dequeue() : Guid.NewGuid().ToString(); // autocomplete="off" is needed to work around a very annoying Chrome behaviour whereby it reuses old values after the user clicks "Back", which causes the xyz.index and xyz[...] values to get out of sync. html.ViewContext.Writer.WriteLine(string.Format("<input type=\"hidden\" name=\"{0}.index\" autocomplete=\"off\" value=\"{1}\" />", collectionName, html.Encode(itemIndex))); return BeginHtmlFieldPrefixScope(html, string.Format("{0}[{1}]", collectionName, itemIndex)); } public static IDisposable BeginHtmlFieldPrefixScope(this HtmlHelper html, string htmlFieldPrefix) { return new HtmlFieldPrefixScope(html.ViewData.TemplateInfo, htmlFieldPrefix); } private static Queue<string> GetIdsToReuse(HttpContextBase httpContext, string collectionName) { // We need to use the same sequence of IDs following a server-side validation failure, // otherwise the framework won't render the validation error messages next to each item. string key = idsToReuseKey + collectionName; var queue = (Queue<string>)httpContext.Items[key]; if (queue == null) { httpContext.Items[key] = queue = new Queue<string>(); var previouslyUsedIds = httpContext.Request[collectionName + ".index"]; if (!string.IsNullOrEmpty(previouslyUsedIds)) foreach (string previouslyUsedId in previouslyUsedIds.Split(',')) queue.Enqueue(previouslyUsedId); } return queue; } private class HtmlFieldPrefixScope : IDisposable { private readonly TemplateInfo templateInfo; private readonly string previousHtmlFieldPrefix; public HtmlFieldPrefixScope(TemplateInfo templateInfo, string htmlFieldPrefix) { this.templateInfo = templateInfo; previousHtmlFieldPrefix = templateInfo.HtmlFieldPrefix; templateInfo.HtmlFieldPrefix = htmlFieldPrefix; } public void Dispose() { templateInfo.HtmlFieldPrefix = previousHtmlFieldPrefix; } } } } 

बदलें ग्रिड के साथ देखें

 @model IEnumerable<HabraHabrMVC3.Domain.Entities.RealtyObject> @if (Model.Count() > 0) { foreach (var item in Model) { <text>@Html.Partial("Edit", item)</text> } } 

और देखें पर संपादित करें:

 @model HabraHabrMVC3.Domain.Entities.RealtyObject @using (Html.BeginCollectionItem("objects")) { <tr> <td> @Html.EditorFor(model => model.City) @Html.ValidationMessageFor(model => model.City) </td> <td> @Html.EditorFor(model => model.Street) @Html.ValidationMessageFor(model => model.Street) </td> <td> @Html.EditorFor(model => model.House) @Html.ValidationMessageFor(model => model.House) </td> <td> @Html.EditorFor(model => model.Cost) @Html.ValidationMessageFor(model => model.Cost) </td> <td> @Html.EditorFor(model => model.Visible) @Html.ValidationMessageFor(model => model.Visible) </td> </tr> } 

दृश्य सूचकांक में, जोड़ें:

 @using (Html.BeginForm("Save", "ObjectsView", FormMethod.Post)) { <table id="AjaxGrid"> ...code... </table> <input type="submit" id="save" value="" /> } 

क्रिया जोड़ें सहेजें:

 [HttpPost] public ActionResult Save(ICollection<RealtyObject> objects) { foreach(var item in objects) { db.Save(item); } return RedirectToAction("Index"); } 

यहां यह महत्वपूर्ण है कि @use (Html.BeginCollectionItem (" ऑब्जेक्ट ")) में संग्रह नाम और कार्रवाई सहेजें (ICollection ऑब्जेक्ट ) विधि मिलान में पैरामीटर नाम।

यही है, यह इनलाइन एडिटिंग, अजाक्स सॉर्टिंग और अजाक्स पेजर के साथ एक सारणीबद्ध रूप में बदल गया।

इंटरनेट पर प्रयुक्त साहित्य की सूची:

1) अजाक्स ग्रिड स्कैफ़ोल्डर

2) एक चर लंबाई सूची का संपादन, ASP.NET MVC 2-शैली

3) गतिशील एसक्यूएल-जैसे लाइनक ऑर्डरबाय एक्सटेंशन

रिजल्ट डाउनलोड करें।