आप एमवीसी के एचटीएमएल के साथ jQuery यूआई डेटपिकर का उपयोग कैसे करते हैं। टेक्स्टबॉक्स फोर?

Question

मैं इकाई फ्रेमवर्क के साथ मॉडल बाध्यकारी का उपयोग कर रहा हूं और एक HTML .extBoxFor (model => model.date) इनपुट है। मुझे पता है कि jQuery को कैसे बताएं कि डेटपिकर को कैसे कार्यान्वित किया जाए लेकिन इस संदर्भ में नहीं। जब उपयोगकर्ता इस क्षेत्र में प्रवेश करता है तो कैलेंडर पॉपअप करने के लिए मुझे यहां क्या जोड़ने की आवश्यकता होगी?

Answer 1

आप एचटीएमएलहेल्पर अधिभार का उपयोग करना चाहते हैं जो आपको एचटीएमएल विशेषताओं को निर्दिष्ट करने की अनुमति देता है। फिर उन्हें jquery चयनकर्ता के साथ लक्षित करें।

// in view 
<%= Html.TextBoxFor(x => x.Date, new { @class="datepicker" })%> 

// in js 
$(document).ready({ 
     $('.datepicker').datepicker(); 
    }); 

हालांकि मैं इसके बजाय EditorFor का उपयोग करने की सलाह देता हूं।

<%= Html.EditorFor(x => x.Date)%> 

आप किसी भी क्षेत्र है कि एक DateTime है संभालने के लिए और यह उत्पादन उचित क्षेत्र के लिए एक EditorTemplate बना सकते हैं।

/Views/Shared/EditorTemplates/DateTime.ascx बनाएँ और उस में इस डाल ...

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime>" %>  
<%= Html.TextBox("", Model.ToShortDateString(), new { @class="datepicker" })%> 

या आप nulls के साथ दिनांक समय की अनुमति देने के लिए की जरूरत है:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime?>" %>  
<%= Html.TextBox("", (Model.HasValue? Model.Value.ToShortDateString():""), new { @class="datepicker"})%> 

तो फिर तुम हमेशा EditorFor का उपयोग करें और के लिए एक केंद्रीय ascx हो सकता है संपादित करें कि क्या आप कभी भी अपने विचारों में तारीख के समय को नियंत्रित करने के तरीके को संशोधित करना चाहते हैं।

Answer 2

अपने कोड नमूने (TextBoxFor) आप MVC2 उपयोग कर रहे हैं लगता से ....

यहाँ एक उदाहरण using MVC 2 कि जब भी आप एक तारीख & एक दूसरे अधिक का उपयोग करने वाले jQery दिनांक पिकर फोन करेगा एक टेम्पलेट बनाता है in depth example।

Answer 3

डेटटाइम प्रकार के लिए एक संपादक टेम्पलेट बनाएं और फिर TextBoxFor के बजाय EditorFor का उपयोग करें।

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime>" %> 
<%: Html.TextBox("", String.Format("{0:MM-dd-yyyy}", Model))%> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#<%: ViewData.ModelMetadata.PropertyName %>").datepicker({ 
       changeMonth: true, 
       changeYear: true, 
       dateFormat: 'mm-dd-yy', 
       showButtonPanel: true, 
       gotoCurrent: true 
      }); 
     }); 
    </script> 

चेक बाहर चैनल पर MVC 2 पर स्कॉट Hanselman बात 9. http://channel9.msdn.com/posts/matthijs/ASPNET-MVC-2-Basics-Introduction-by-Scott-Hanselman/

Answer 4

मैं इसी तरह एक दृष्टिकोण के साथ जाना चाहते हैं: संपादित टेम्पलेट एक उपयोगकर्ता नियंत्रण की तरह कोड कुछ के साथ DateTime.ascx बुलाया होना चाहिए मार्क के लिए। यहाँ यह की अपने ही संस्करण है:।।>

<%string name = ViewData.TemplateInfo.HtmlFieldPrefix;%> 
<%string id = name.Replace(".", "_");%> 

<div class="editor-label"> 
    <%= Html.LabelFor(model => model) %> 
</div> 
<div class="editor-field"> 
    <%= Html.TextBox("", (Model.HasValue ? Model.Value.ToString("dd-MM-yyyy") : string.Empty), new { @class = "date" }) %> 
    <%= Html.ValidationMessageFor(model => model)%> 
</div>  

<script type="text/javascript"> 
    $(document).ready(function() { 

     $("#<%=id%>").datepicker({ 
      showOn: 'both', 
      dateFormat: 'dd-mm-yy', 
      changeMonth: true, 
      changeYear: true, 
      showOn: 'button', 
      buttonImage: '<%=Url.Content("~/Content/images/calendar.gif") %>' 
     }); 
    }); 
</script> 

साझा फ़ोल्डर के तहत अपने EditorTemplates फ़ोल्डर बनाने और इसे नाम DateTime.ascx

"%