एक स्क्रिप्ट ब्लॉक के अंदर एक HTML पृष्ठ पर जावास्क्रिप्ट चर में .NET ऑब्जेक्ट का सीरियलाइजेशन

अच्छा पुराना छिपा हुआ इनपुट

अक्सर आपको एक HTML पेज पर डेटा ट्रांसफर करना होता है जिसे आपको जावास्क्रिप्ट से उपयोग करना चाहिए। पुराने समय से , इसके लिए सबसे सरल तरीके का उपयोग किया गया है: छिपे हुए इनपुट । यही है, अगर हमें वेब सेवा के उरी पते को पास करने की आवश्यकता है, तो हम कुछ इस तरह प्रस्तुत करते हैं

<input type="hidden" name="webServiceUri" value="URI we need"/> 

और हम इस इनपुट को नाम से खोजने के लिए jQuery या सादे पुराने जावास्क्रिप्ट का उपयोग कर सकते हैं और पारित मूल्य को पढ़ सकते हैं।

लेकिन जब आपको बहुत सारे मापदंडों या यहां तक ​​कि सरणियों को पारित करने की आवश्यकता होती है, तो यह विधि सुविधाजनक नहीं होती है। आप निश्चित रूप से एक REST सेवा बना सकते हैं जो पेज (सत्र डेटा) से AJAX अनुरोध पर सभी डेटा देती है, लेकिन ज्यादातर मामलों में यह अनावश्यक है।

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

आइए देखें कि ASP.NET MVC में यह कैसे किया जाए।

उपयोग परिदृश्य इस प्रकार होगा:

• हमारे पास एक .NET क्लास है जो अपने आप में आवश्यक सेटिंग्स को इनकैप्सुलेट करता है और हम इसके लिए किसी भी क्लास का उपयोग कर सकते हैं
• हमारे पास MVC HtmlHelper के लिए एक एक्सटेंशन विधि है जो एक जावास्क्रिप्ट चर का नाम लेता है और क्रमबद्ध होने वाली वस्तु
• ViewModel या ViewBag के अंदर View करने के लिए क्रमिक श्रेणी उत्तीर्ण की जाती है
• जावास्क्रिप्ट चर नाम नियंत्रक से व्यू में स्थानांतरित किया जा सकता है या व्यू में हार्डकोड किया जा सकता है

पेज रेंडर करने के बाद, हमें निम्नलिखित के समान कोड मिलता है:

 <script type="text/javascript"> var settings = {"WebServiceUri":"URI we need","UserId":"1212"}; </script> 

MVC HtmlHelper के लिए विस्तार विधि इस तरह निकली:

  /// <summary> /// This class provides the extension methods to ASP.NET MVC HtmlHelper. /// </summary> public static class HtmlHelperExtensions { /// <summary> /// This method renders the given model class as JavaScript variable within Html Script tag. /// </summary> /// <param name="htmlHelper">HtmlHelper instance we extend by this method.</param> /// <param name="variableName">The name of JavaScript variable the rendered Json object will be assigned to.</param> /// <param name="model">The model class to be rendered to Json and assigned to the variable.</param> /// <returns>Html representation of Html Script tag.</returns> public static MvcHtmlString RenderJsToScriptBlock(this HtmlHelper htmlHelper, string variableName, object model) { #region Pre-conditions if (string.IsNullOrWhiteSpace(variableName)) { throw new ArgumentNullException("variableName"); } #endregion Pre-conditions if (null == model) { return MvcHtmlString.Empty; } TagBuilder tagBuilder = new TagBuilder(@"script"); tagBuilder.MergeAttribute(@"type", @"text/javascript"); // use InnerHtml because it doesn't encode characters tagBuilder.InnerHtml = string.Format("var {0} = {1};", variableName, htmlHelper.Raw(Json.Encode(model))); return new MvcHtmlString(tagBuilder.ToString()); } } 

Moq ढांचे और MSTest का उपयोग करते हुए कुछ यूनिट परीक्षण:

  [TestMethod, TestCategory("Unit")] [ExpectedException(typeof(ArgumentNullException))] public void Should_Not_Accept_Null_VariableName() { HtmlHelper helper = new HtmlHelper(new Mock<ViewContext>().Object, new Mock<IViewDataContainer>().Object); helper.RenderJsToScriptBlock(null, null); } [TestMethod, TestCategory("Unit")] [ExpectedException(typeof(ArgumentNullException))] public void Should_Not_Accept_Empty_VariableName() { HtmlHelper helper = new HtmlHelper(new Mock<ViewContext>().Object, new Mock<IViewDataContainer>().Object); helper.RenderJsToScriptBlock(string.Empty, null); } [TestMethod, TestCategory("Unit")] public void Should_Return_Empty_MvcHtmlString_For_NullModel() { HtmlHelper helper = new HtmlHelper(new Mock<ViewContext>().Object, new Mock<IViewDataContainer>().Object); MvcHtmlString mvcHtmlString = helper.RenderJsToScriptBlock("variableName", null); Assert.AreEqual(mvcHtmlString, MvcHtmlString.Empty); } [TestMethod, TestCategory("Unit")] public void Should_Return_Correct_Result_For_Correct_Input() { const string expectedHtmlString = "<script type=\"text/javascript\">var variableName = {\"UserName\":\"Alex\"};</script>"; HtmlHelper helper = new HtmlHelper(new Mock<ViewContext>().Object, new Mock<IViewDataContainer>().Object); var model = new { UserName = "Alex" }; MvcHtmlString mvcHtmlString = helper.RenderJsToScriptBlock("variableName", model); Assert.AreEqual(mvcHtmlString.ToHtmlString(), expectedHtmlString); }