لا يمكن تضمين مسج منتقي التاريخ السيطرة المجمعة في عناصر تحكم أخرى
https://stackoverflow.com/questions/255071
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
ولقد تم تكليف بتنفيذ تاريخ / وقت محدد لعدة مناطق المشروع على شبكة الانترنت، وأوعز إلى استخدام عنصر تحكم مطور آخر خلقت كجزء منه. يفترض سيطرة أعمل على السماح للمستخدم لاختيار تاريخ من التقويم، واختيار شكل لعرض هذا التاريخ (من عدة صيغ محددة مسبقا، أو مع تجاوز نص بسيط) واختياريا سلسلة الوقت (والذي هو في الحقيقة مجرد نص حر).
ويتم توثيق الرقابة وأوعز لي لاستخدام هنا: HTTP: // www.west-wind.com/WebLog/posts/213015.aspx ، ويستخدم منتقي التاريخ من مسج.
وبعد أن نفذت إرادتي واختباره، بدأت إدماجه في الصفحات التي تحتاج إلى التسجيل و / أو الوقت المدخلات. في بلدي اختبار هذه التطبيقات، اكتشفت علة: عندما تتضمن نسخ متعددة من سيطرتي على صفحة، فقط أول واحد يحصل على تقويم مسج. لا ترتبط الآخرين لذلك.
ولقد حاولت بعض الأساليب المقترحة في مسألة ذات الصلة على ما يبدو (بعنوان "تكرار مسج منتقي التاريخ")، مثل استدعاء ".datepicker () 'الدالة على السيطرة الغرب والرياح (والذي يجعل من النص) عن طريق و$ ( "CSS-محدد"). منتقي التاريخ () لغوي، وASP.NET هو الضامن معرفات فريدة لجميع مربعات النص.
وهكذا، في الجمع، يبدو مثل هذا:
<page>
<mycontrol>
<west-windjQuerycontrol />
</mycontrol>
<mycontrol>
<west-windjQuerycontrol />
</mycontrol>
</page>
والآن، الجزء غريب: عندما تكون هناك نسخ متعددة من سيطرة الغرب والرياح على الصفحة، دون عنصر تحكم المستخدم الأخرى التي تحتوي عليها، أنها تعمل بشكل صحيح. البعض من سيطرة مسج، إرادتي لديه أي شيء غير عادي حول هذا الموضوع: التسميات ببساطة، مربعات النص، لوحات، والقوائم المنسدلة. شيئا عن تجميع لسيطرة الغرب والرياح مسج في عنصر تحكم المستخدم يبدو أن كسرها.
وأي نصيحة؟ لقد تم ضجيجا رأسي ضد هذا لبعض الوقت، يعوقها مهاراتي جافا سكريبت الفقيرة والتعرض المحدود إلى مسج.
وكما أشار أدناه، فإنه من الصعب القول من دون HTML. لقد تضمنت أدناه.
<form name="form1" method="post" action="ControlTest.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTU4NjEzMDEwOQ9kFgICAw9kFgQCAw9kFgRmD2QWAgIDD2QWAgIDDxBkZBYBZmQCAg9kFgICAw9kFgICAQ8QZGQWAWZkAgUPZBYEZg9kFgICAw9kFgICAw8QZGQWAWZkAgIPZBYCAgMPZBYCAgEPEGRkFgFmZGRDjfLpdb+XxaVaQYP2XkPil2Galw==" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/SSO/DE/WebResource.axd?d=jMPpL-KK8_mPj_ssZzGblw2&t=633481894229838141" type="text/javascript"></script>
<script src="/SSO/DE/ScriptResource.axd?d=8KwRIGaNAD3hi2Loz3YV-uxgrdZpGe8nnwH5E3gxLW_lQpnYjRbyIYThTnHtD9rt0&t=633613004148118290" type="text/javascript"></script>
<script src="/SSO/DE/ScriptResource.axd?d=8KwRIGaNAD3hi2Loz3YV-uxgrdZpGe8nnwH5E3gxLW-K0Kuw-pGK1O3mE_r1y3sjKmhHtQjSXeMtYSim0bjyGA2&t=633613004148118290" type="text/javascript"></script>
<script src="/SSO/DE/ScriptResource.axd?d=Id5yAacLMZHF7TWlkgrrid30ZStmsXuLHcF6WQ404YLySP4Itj4qxv2wi9ffbsWQA86oLdnZPWkwDnu4NKxfG1Ue7qdGG1SbOfb4ooHVs7M1&t=633481957084709567" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script src="/SSO/DE/ScriptResource.axd?d=Id5yAacLMZHF7TWlkgrrid30ZStmsXuLHcF6WQ404YLySP4Itj4qxv2wi9ffbsWQhT3MFELBAa2rFJZXnSlYAZIN7RT1npcBxJRsWGjJWIwTF0Es1m0vOd-xYnFqWJKz0&t=633481957084709567" type="text/javascript"></script>
<div style="margin:25px 10px;width:100%;">
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('stupidThing', document.getElementById('form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>
<div id="datePicker_Div0" class="AdminRowOdd DERow">
<div id="datePicker_Div1" class="DELabel">
<span id="datePicker_DateLabel">Date</span>
</div>
<div id="datePicker_Div2" class="DEInput datePicker">
<input name="datePicker$DateSelector" type="text" onchange="javascript:setTimeout('__doPostBack(\'datePicker$DateSelector\',\'\')', 0)" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" id="datePicker_DateSelector" style="width:80px;" />
<select name="datePicker$languageSelector" onchange="javascript:setTimeout('__doPostBack(\'datePicker$languageSelector\',\'\')', 0)" id="datePicker_languageSelector">
<option selected="selected" value="en-US">en-US</option>
<option value="fr-CA">fr-CA</option>
<option value="fr-FR">fr-FR</option>
<option value="es-ES">es-ES</option>
<option value="es-MX">es-MX</option>
</select>
</div>
</div>
<div id="datePicker_Div3" class="AdminRowEven DERow">
<div id="datePicker_Div4" class="DELabel">
<span id="datePicker_FormatChoiceLabel">Choose your display format: </span>
</div>
<div id="datePicker_Div5" class="DEInput">
<select name="datePicker$DateFormatSelector" onchange="javascript:setTimeout('__doPostBack(\'datePicker$DateFormatSelector\',\'\')', 0)" id="datePicker_DateFormatSelector">
<option selected="selected" value="Choose a date first">Choose a date first</option>
</select>
</div>
</div>
<div id="datePicker_Div6" class="AdminRowOdd DERow">
<div id="datePicker_Div7" class="DELabel">
<span id="datePicker_FormatOverrideLabel">Or enter your own text</span>
</div>
<div id="datePicker_Div8" class="DEInput">
<input name="datePicker$DateFormatOverride" type="text" onchange="javascript:setTimeout('__doPostBack(\'datePicker$DateFormatOverride\',\'\')', 0)" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" id="datePicker_DateFormatOverride" />
</div>
</div>
<br />
<div id="date1_Div0" class="AdminRowOdd DERow">
<div id="date1_Div1" class="DELabel">
<span id="date1_DateLabel">Date</span>
</div>
<div id="date1_Div2" class="DEInput datePicker">
<input name="date1$DateSelector" type="text" onchange="javascript:setTimeout('__doPostBack(\'date1$DateSelector\',\'\')', 0)" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" id="date1_DateSelector" style="width:80px;" />
<select name="date1$languageSelector" onchange="javascript:setTimeout('__doPostBack(\'date1$languageSelector\',\'\')', 0)" id="date1_languageSelector">
<option selected="selected" value="en-US">en-US</option>
<option value="fr-CA">fr-CA</option>
<option value="fr-FR">fr-FR</option>
<option value="es-ES">es-ES</option>
<option value="es-MX">es-MX</option>
</select>
</div>
</div>
<div id="date1_Div3" class="AdminRowEven DERow">
<div id="date1_Div4" class="DELabel">
<span id="date1_FormatChoiceLabel">Choose your display format:</span>
</div>
<div id="date1_Div5" class="DEInput">
<select name="date1$DateFormatSelector" onchange="javascript:setTimeout('__doPostBack(\'date1$DateFormatSelector\',\'\')', 0)" id="date1_DateFormatSelector">
<option selected="selected" value="Choose a date first">Choose a date first</option>
</select>
</div>
</div>
<div id="date1_Div6" class="AdminRowOdd DERow">
<div id="date1_Div7" class="DELabel">
<span id="date1_FormatOverrideLabel">Or enter your own text</span>
</div>
<div id="date1_Div8" class="DEInput">
<input name="date1$DateFormatOverride" type="text" onchange="javascript:setTimeout('__doPostBack(\'date1$DateFormatOverride\',\'\')', 0)" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" id="date1_DateFormatOverride" />
</div>
</div>
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWFQLr6MeTCwKb1Zr0AwKVt6utCQKIwaTjAQKdwYzzBwLiwsDhDQKIwdCLBAKHwbCtCgLRr42cCQKi9vj4DgK2lM6kBQLLrsUtAsaboRMC2+2u3QgCzu2GzQ4Cse7K3wQC2+3atQ0C1O26kwMCpdTivwwC1o2X2wsCoubqnQk8I1BK30Q/iVw/rExUww2Cs4bicw==" />
</div>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready( function() {
var cal = jQuery('#datePicker_DateSelector').datepicker({yearRange: '-1500:+100',dateFormat: 'm/d/yy'});
} );
Sys.Application.initialize();
//]]>
</script>
</form>
المحلول
ومن الصعب معرفة دون رؤية HTML ولدت، ولكن الأول تخميني أن يكون هذا التحكم الخاصة بك لا تطبق أسماء فئة مباشرة إلى الميدان <input> ... أو كنت اعتمادا على ids في بعض الطريق (والتي من المرجح أن تتغير عندما جزءا لا يتجزأ من عنصر تحكم المستخدم).
في HTML كنت قد نشرت، وهذه تظهر إلى ثلاثة أجزاء ذات الصلة:
بلوك رقم 1 (التحكم: منتقي التاريخ)
<div id="datePicker_Div0" class="AdminRowOdd DERow">
<div id="datePicker_Div1" class="DELabel">
<span id="datePicker_DateLabel">Date</span>
</div>
<div id="datePicker_Div2" class="DEInput datePicker">
<input name="datePicker$DateSelector" type="text"
onchange="javascript:setTimeout('__doPostBack(\'datePicker$DateSelector\',\'\')', 0)"
onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;"
id="datePicker_DateSelector" style="width:80px;" />
<select name="datePicker$languageSelector"
onchange="javascript:setTimeout('__doPostBack(\'datePicker$languageSelector\',\'\')', 0)"
id="datePicker_languageSelector">
<option selected="selected" value="en-US">en-US</option>
<option value="fr-CA">fr-CA</option>
<option value="fr-FR">fr-FR</option>
<option value="es-ES">es-ES</option>
<option value="es-MX">es-MX</option>
</select>
</div>
</div>
...
بلوك رقم 2 (التحكم: DATE1)
<div id="date1_Div0" class="AdminRowOdd DERow">
<div id="date1_Div1" class="DELabel">
<span id="date1_DateLabel">Date</span>
</div>
<div id="date1_Div2" class="DEInput datePicker">
<input name="date1$DateSelector" type="text"
onchange="javascript:setTimeout('__doPostBack(\'date1$DateSelector\',\'\')', 0)"
onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;"
id="date1_DateSelector" style="width:80px;" />
<select name="date1$languageSelector"
onchange="javascript:setTimeout('__doPostBack(\'date1$languageSelector\',\'\')', 0)"
id="date1_languageSelector">
<option selected="selected" value="en-US">en-US</option>
<option value="fr-CA">fr-CA</option>
<option value="fr-FR">fr-FR</option>
<option value="es-ES">es-ES</option>
<option value="es-MX">es-MX</option>
</select>
</div>
</div>
...
بلوك رقم 3 (مسج منتقي التاريخ wireup)
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready( function()
{
// matches input element for first control only (id selector)
var cal = jQuery('#datePicker_DateSelector')
.datepicker({yearRange: '-1500:+100',dateFormat: 'm/d/yy'});
});
Sys.Application.initialize();
//]]>
</script>
والمشكلة تنشأ من هذه الكتلة الماضي. محدد تقتصر على عنصر التحكم الأول، مطابقة عن الهوية. إذا تم تعديله ليشمل مكالمة منفصلة لمراقبة الثانية ...
var cal = jQuery('#datePicker_DateSelector')
.datepicker({yearRange: '-1500:+100',dateFormat: 'm/d/yy'});
var cal2 = jQuery('#date1_DateSelector')
.datepicker({yearRange: '-1500:+100',dateFormat: 'm/d/yy'});
... أو أكثر للأغراض العامة محدد ...
// matches all text input elements that are descendants of
// a div element with a class of datePicker
var cal = jQuery('div.datePicker input:text')
.datepicker({yearRange: '-1500:+100',dateFormat: 'm/d/yy'});
... ثم أشياء يجب أن تعمل كما هو متوقع.
نصائح أخرى
وأنا أحسب المشكلة.
ووOnPreRender () من عنصر تحكم ملقم يبني جافا سكريبت وجدت أعلاه، المكالمات ما يلي، حيث sbStartupScript هو ب StringBuilder التي تحتوي على جافا سكريبت ولدت:
sbStartupScript.AppendLine("} );");
scriptProxy.RegisterStartupScript(this.Page, typeof(ControlResources), "_cal" + this.ID,
sbStartupScript.ToString(), true);
والنموذج الصحيح ينبغي أن يكون:
sbStartupScript.AppendLine("} );");
scriptProxy.RegisterStartupScript(this.Page, typeof(ControlResources), "_cal" + this.ClientID,
sbStartupScript.ToString(), true);
والآن، وبعد ان ClientId، اسم السيناريو هو فريد من نوعه، وكلاهما سيجعل.
