ASP.NET MVC: बाइंडिंग मॉडल डेटा जिसमें चित्र शामिल हैं

डेटा बाइंडिंग (बाइंडिंग) एक काफी सुविधाजनक उपकरण ASP.NET MVC है। यह मुख्य रूप से सुविधाजनक है क्योंकि यह आपको मॉडल और HTTP अनुरोध डेटा से डेटा रूपांतरण के कार्यान्वयन को छिपाने की अनुमति देता है।
मेरी परियोजनाओं में, मुझे अक्सर विभिन्न डेटा जैसे कि बूँद और छवि को बचाने की आवश्यकता होती है। इस लेख में, मैं यह दिखाना चाहूंगा कि आप विभिन्न मॉडलों में शामिल मॉडल से डेटा बाइंडिंग को आसानी से कैसे व्यवस्थित और उपयोग कर सकते हैं। उदाहरण के लिए, मैंने एमवीसी म्यूज़िक स्टोर प्रशिक्षण परियोजना ली और इसे ट्विक करने का फैसला किया - एक संगीत एल्बम के कवर की छवि को बदलने की क्षमता जोड़ें। इस लेख को लिखते समय, मैंने APS.NET MVC 3 और रेजर के संस्करण का उपयोग किया।

बाइंडिंग इम्प्लीमेंटेशन

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

public class ImageModelBinder : DefaultModelBinder { private string _fieldName; public ImageModelBinder(string fieldName) { _fieldName = fieldName; } public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext) { var obj = base.BindModel(controllerContext, bindingContext); ValueProviderResult valueResult; valueResult = bindingContext.ValueProvider.GetValue(bindingContext.ModelName + "." + _fieldName); if (valueResult == null) { valueResult = bindingContext.ValueProvider.GetValue(_fieldName); } if (valueResult != null) { HttpPostedFileBase file = (HttpPostedFileBase)valueResult.ConvertTo(typeof(HttpPostedFileBase)); if (file != null) { byte[] tempImage = new byte[file.ContentLength]; file.InputStream.Read(tempImage, 0, file.ContentLength); PropertyInfo imagePoperty = bindingContext.ModelType.GetProperty(_fieldName); imagePoperty.SetValue(obj, tempImage, null); } } return obj; } } 

इस कार्यान्वयन में, हमने मुख्य BindModel पद्धति को फिर से परिभाषित किया, पहले बुनियादी कार्यान्वयन को सभी डेटा को बाँधने के लिए कहा, और फिर HttpPostedFitBase प्रकार के HTTP अनुरोध फ़ॉर्म फ़ील्ड से रूपांतरण और लेखन को छवि डेटा फ़ील्ड में लागू किया।
अपनी विशेषता बनाना भी अच्छा रहेगा:

 public class ImageBindAttribute : CustomModelBinderAttribute { private IModelBinder _binder; public ImageBindAttribute(string fieldName) { _binder = new ImageModelBinder(fieldName); } public override IModelBinder GetBinder() { return _binder; } } 

एक दृश्य बनाने के लिए, हमें फ़ाइल अपलोड फ़ील्ड बनाने के लिए एक साधारण सहायक की भी आवश्यकता है:

 public static IHtmlString ImageUpload(this HtmlHelper helper, string name) { return ImageUpload(helper, name, null); } public static IHtmlString ImageUpload(this HtmlHelper helper, string name, object htmlAttributes) { var tagBuilder = new TagBuilder("input"); tagBuilder.GenerateId(name); UrlHelper urlHelper = new UrlHelper(helper.ViewContext.RequestContext); tagBuilder.Attributes["name"] = name; tagBuilder.Attributes["type"] = "file"; tagBuilder.MergeAttributes(new RouteValueDictionary(htmlAttributes)); return MvcHtmlString.Create(tagBuilder.ToString()); } 

के उपयोग

अब हम मुख्य परियोजना को संशोधित करते हैं।
हमारी परियोजना का एक मॉडल है - एल्बम वर्ग। प्रकार बाइट [] का एक नया छवि क्षेत्र जोड़ें। इस नए क्षेत्र को मानक बंधन से बाहर रखें।

 [Bind(Exclude = "AlbumId, Image")] public class Album { ... public string AlbumArtUrl { get; set; } [ScaffoldColumn(false)] public byte[] Image { get; set; } ... } 

और डेटाबेस में एक नया फ़ील्ड जोड़ना न भूलें।

अगला, हमें किसी तरह अपने बंधन की घोषणा करने की आवश्यकता है। यह इसी क्रिया के लिए एक विशेषता जोड़कर, या विश्व स्तर पर डेटा बाइंडिंग जोड़कर किया जा सकता है।

 public ActionResult Create([ImageBind("Image")] Album album) { if (ModelState.IsValid) { storeDb.Albums.Add(album); 

दुर्भाग्यवश, यह एडिट विधि के लिए उपयुक्त नहीं है, जो फॉर्मकॉलक्शन प्रकार का उपयोग करता है।
तर्कों में। तब आप संग्रह में एक नया बंधन जोड़ सकते हैं, उदाहरण के लिए इस तरह:

  public ActionResult Edit(int id, FormCollection collection) { var album = storeDb.Albums.Find(id); if (Binders[typeof(Album)] == null) Binders.Add(typeof(Album), new ImageModelBinder("Image")); ... 

या वैश्विक स्तर पर, Global.asax फ़ाइल में करें:

 ModelBinders.Binders.Add(typeof(Album), new ImageModelBinder("Image")); 

चित्र अपलोड करने के लिए, दृश्य को संशोधित करें और फ़ॉर्म में फ़ील्ड जोड़ें:

 <div class="editor-field"> @Html.ImageUpload("Image") </div> 

और द्विआधारी डेटा की सराहना करने में सक्षम करने के लिए एक नया HTML विशेषता enctype = "मल्टीपार्ट / फॉर्म-डेटा" जोड़कर कॉल हेल्पर को फॉर्म में बदल दें:

 (Html.BeginForm("Edit", "StoreManager", FormMethod.Post, new { enctype = "multipart/form-data" })) 

यह लोडिंग और बचत के बारे में है।

प्रदर्शित करने के लिए, हमें एक नई क्रिया बनाने की आवश्यकता है।

 [OutputCache(Duration = 0)] public ActionResult Image(int id) { var album = storeDb.Albums.Find(id); return new FileStreamResult(new MemoryStream(album.Image), "image/png"); } 

इस उदाहरण में, हम अपने आप को png प्रारूप छवि का उपयोग करने के लिए प्रतिबंधित करते हैं। आपको उपयुक्त विशेषता को निर्दिष्ट करके कैशिंग का भी ध्यान रखना होगा।

एक दृश्य बनाने के लिए, हमें एक साधारण सहायक की आवश्यकता है:

 public static IHtmlString Image(this HtmlHelper helper, string name, string id) { return Image(helper, name, id, null); } public static IHtmlString Image(this HtmlHelper helper, string name, string id, object htmlAttributes) { var tagBuilder = new TagBuilder("img"); UrlHelper urlHelper = new UrlHelper(helper.ViewContext.RequestContext); tagBuilder.Attributes["src"] = urlHelper.Action(name, null, new { id = id }); tagBuilder.Attributes["alt"] = string.Format("{0} of {1}", name, id); tagBuilder.MergeAttributes(new RouteValueDictionary(htmlAttributes)); return MvcHtmlString.Create(tagBuilder.ToString()); } 

और जिस रूप में हम जोड़ते हैं।

 <div class="field"> @Html.Image("Image", @Model.AlbumId.ToString()) </div> 

निष्कर्ष

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

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

सूत्रों का कहना है

mvcmusicstore.codeplex.com
www.highoncoding.com/Articles/689_Uploading_and_Displaying_Files_Using_ASP_NET_MVC_Framework.aspx
www.hanselman.com/blog/SplittingDateTimeUnitTestingASPNETMVCCustomModelBinders.aspx
odetocode.com/Blogs/scott/archive/2009/04/27/6-tips-for-asp-net-mvc-model-binding.aspx
odetocode.com/blogs/scott/archive/2009/05/05/iterating-on-an-asp-net-mvc-model-binder.aspx