10 मिनट में व्यवस्थापक करें

हैलो, प्रिय Habrasociety!

मैं वेबसाइटें विकसित कर रहा हूं। एक नियम के रूप में, ये ग्राहकों की व्यक्तिगत आवश्यकताओं के लिए समाधान हैं। इसलिए, मैं तैयार सीएमएस का उपयोग नहीं करता हूं, लेकिन खुद ईंटों को ढेर करना पसंद करता हूं। बेशक, आपको अपने आप को व्यवस्थापक भाग लिखना होगा, क्योंकि यह उन कार्यों को करना चाहिए जो ग्राहक की आवश्यकता है, लेकिन इसमें कुछ भी अधिक नहीं होना चाहिए। और यदि आप डेटा को संपादित करने के लिए कई तरीके लिखते हैं तो यह आधी परेशानी है, तो आपको एक अच्छा और सुविधाजनक इंटरफ़ेस बनाना होगा।

लंबे समय तक मैंने ट्विटर बूटस्ट्रैप का इस्तेमाल किया, लेकिन यह सभी जरूरतों को पूरा नहीं कर सका। मुझे अतिरिक्त बटन बनाने और स्क्रिप्ट लिखने के लिए मजबूर होना पड़ा। लेकिन एक दिन, मैं अद्भुत टेलरिक केंडोयू यूआई ढांचे के साथ मिला। कट के तहत यह क्या आया।


हेबरे पर एक लेख पहले ही रूपरेखा के बारे में लिखा गया था। हम KendoUI वेब वेब कंट्रोल लाइब्रेरी का उपयोग करेंगे। यह समझने के लिए कि आप इसके साथ क्या बना सकते हैं, आप डेमो पेज पर जा सकते हैं। नियंत्रण बनाने के लिए, आप ASP.NET, JSP या PHP, साथ ही जावास्क्रिप्ट विजेट्स के लिए दोनों सहायकों का उपयोग कर सकते हैं। उत्तरार्द्ध जीपीएल v3 लाइसेंस के तहत लाइसेंस प्राप्त हैं, इसलिए मैंने उनका उपयोग किया। इस या उस पैकेज को यहाँ डाउनलोड करें । सर्वर की तरफ, मैं ASP.NET MVC 4 का उपयोग Microsoft ASP.NET वेब एपीआई OData 4.0.0 पैकेज के साथ करता हूं, जिसे PM> इंस्टाल-पैकेज कमांड Microsoft.AspNet.WebApi.OData का उपयोग करके सेट किया जा सकता है

प्रदर्शित करने के लिए, एक सरल अनुच्छेद वर्ग बनाएं और उसमें तीन अलग-अलग प्रकार के गुण जोड़ें।

public class Article { public int ID { get; set; } public string Title { get; set; } public bool Hidden { get; set; } } 

अगला, डेटा के साथ काम करने के लिए एक ApiController बनाएं। मेरे उदाहरण में, मैं इकाई ढांचे का उपयोग करता हूं, इसलिए मैं तुरंत मचान विकल्पों को निर्दिष्ट करता हूं



उसके बाद, मैं केवल गेटअर्टिकल्स एक्शन को बदल देता हूं, जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है। सबसे पहले, अब यह ODataResult लौटाता है। और एक पैरामीटर के रूप में ODataQueryOptions लेता है, यह क्रमबद्ध क्वेरी स्ट्रिंग मापदंडों का एक संग्रह है। कार्रवाई में ही, हमें संग्रह और उसमें कुल तत्वों की संख्या मिलती है। और फिर हम इसके लिए आने वाले मापदंडों को लागू करते हैं। नतीजतन, हम मापदंडों को उस पर और कुल मात्रा को लागू करने के बाद संग्रह लौटाते हैं, यह पृष्ठांकन के लिए आवश्यक है।

  public class ArticlesController : ApiController { private Storage db = new Storage(); // GET api/Articles public ODataResult<Article> GetArticles(ODataQueryOptions options) { var items = db.Articles; var count = items.Count(); var res = (IEnumerable<Article>)options.ApplyTo(items); return new ODataResult<Article>(res, null, count); } // GET api/Articles/5 public Article GetArticle(int id) { Article article = db.Articles.Find(id); if (article == null) { throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotFound)); } return article; } // PUT api/Articles/5 public HttpResponseMessage PutArticle(int id, Article article) { if (ModelState.IsValid && id == article.ID) { db.Entry(article).State = EntityState.Modified; try { db.SaveChanges(); } catch (DbUpdateConcurrencyException) { return Request.CreateResponse(HttpStatusCode.NotFound); } return Request.CreateResponse(HttpStatusCode.OK); } else { return Request.CreateResponse(HttpStatusCode.BadRequest); } } // POST api/Articles public HttpResponseMessage PostArticle(Article article) { if (ModelState.IsValid) { db.Articles.Add(article); db.SaveChanges(); HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, article); response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = article.ID })); return response; } else { return Request.CreateResponse(HttpStatusCode.BadRequest); } } // DELETE api/Articles/5 public HttpResponseMessage DeleteArticle(int id) { Article article = db.Articles.Find(id); if (article == null) { return Request.CreateResponse(HttpStatusCode.NotFound); } db.Articles.Remove(article); try { db.SaveChanges(); } catch (DbUpdateConcurrencyException) { return Request.CreateResponse(HttpStatusCode.NotFound); } return Request.CreateResponse(HttpStatusCode.OK, article); } } 

वह सब है। यह क्लाइंट की ओर बढ़ने का समय है। आरंभ करने के लिए, KendoUI और jQuery को पृष्ठ से कनेक्ट करें।

  <link href="~/Content/kendo/kendo.common.min.css" rel="stylesheet" /> <link href="~/Content/kendo/kendo.default.min.css" rel="stylesheet" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="~/Scripts/kendo/kendo.web.min.js"></script> 

उसके बाद, विजेट स्थापित करें और कॉन्फ़िगर करें। विजेट सेटिंग्स के बारे में अधिक यहाँ पढ़ें।

 <div id="grid"></div> <script> $(document).ready(function () { $("#grid").kendoGrid({ dataSource: { pageSize: 3, serverSorting: true, serverFiltering: true, serverPaging: true, type: 'odata', transport: { read: { url: "/api/articles", dataType: "json", type: "GET" }, create: { url: "/api/articles", dataType: "json", type: "POST" }, update: { url: function (article) { return "/api/articles/" + article.ID }, dataType: "json", type: "PUT" }, destroy: { url: function (article) { return "/api/articles/" + article.ID }, dataType: "json", type: "DELETE" } }, schema: { data: function (data) { return data.Items; }, total: function (data) { return data.Count; }, model: { id: "ID", fields: { ID: { editable: false }, Title: { type: "string", editable: true, nullable: false, validation: { required: true } }, Hidden: { type: "boolean", editable: true } } } } }, height: 250, filterable: true, sortable: true, pageable: true, toolbar: ["create"], editable: "popup", columns: [ { field: "ID", filterable: false, width: 50 }, { field: "Title", title: "", width: 300 }, { field: "Hidden", title: "", width: 100 }, { command: ["edit", "destroy"], title: " ", width: "210px" } ] }); }); </script> 

हो गया! अब आप चला सकते हैं और जाँच कर सकते हैं। 10 मिनट से भी कम समय में, हमने डेटा प्रबंधन के लिए एक पूर्ण इंटरफ़ेस बनाया, जिसमें पेजिंग, सॉर्ट और फ़िल्टर करने की क्षमता है। आरामदायक और सुखद। KendoUI और OData प्रारूप और आपके ध्यान के लिए धन्यवाद।






रुपये वैसे, विजेट्स को स्थानीयकृत करने की संभावना है। ऐसा करने के लिए, आपको जेएस / संस्कृतियों के फ़ोल्डर से उपयुक्त स्क्रिप्ट को कनेक्ट करने की आवश्यकता है, जिसे फ्रेमवर्क के साथ संग्रह में आपूर्ति की गई है।