توضیحات و دانلود

استفاده از جاوا اسکریپت با Master Pages در ASP.Net
0 0
استفاده از جاوا اسکریپت با Master Pages در ASP.Net

با سلام در این مقاله چگونگی استفاده از جاوا اسکریپت با Master Pages در ASP.Net را  توضیح میدهیم . در هنگام کار با Master Pages فقط یک Master Pages و صفحات چندگانه وجود دارد و از این رو نوشتن عملکرد جاوا اسکریپت یک مشکل می شود.

قرار دادن جاوا اسکریپت در صفحات محتوا

هنگام کار با Master Pages باید جاوا اسکریپت را در تگ های اسکریپت در صفحات محتوا بین حفره محتوا قرار دهید

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

    <input id="Button1" type="button" value="button" onclick = "GetValue()"/>

    <script type = "text/javascript">

        function Function-1()

        {

             //Function-1 goes here

        }

        function Function-2()

        {

             //Function-2 goes here

        }

    </script>

</asp:Content>

همانطور که در بالا ذکر شد، عملکرد جاوا اسکریپت را در یک صفحه محتوا داخل ContentPlaceHolder قرار می دهیم .

شما می توانید اسکریپت را در هر جای ContentPlaceHolder صفحه محتوا جای گذاری کنید، اما بهتر است که آن را در پایین قرار دهید.

شناسه های کنترل

مثال زیر را در نظر بگیرید: یک جعبه متن، یک برچسب و یک دکمه HTML و در رویداد onclick یک دکمه HTML در FunctionView جاوا استفاده می کنیم.

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

    <input id="Button1" type="button" value="button" onclick = "GetValue()"/>

    <script type = "text/javascript">

        function GetValue()

        {

             var label = document.getElementById("Label1");

             var textbox = document.getElementById("TextBox1");

             alert("Label Value is " + label.innerHTML);

             alert("TextBox Value is " + textbox.value);

        }

    </script>

</asp:Content>

 زمانی که برنامه را اجرا میکنم و بر روی دکمه HTML کلیک میکنم، یک خطای جاوا اسکریپتی برای نمایش شی داریم .

در حال حاضر دلیل خطای JavaScript بالا، شناسه کنترل Label1 و TextBox1 است. عملکرد جاوا اسکریپت قادر به یافتن هر کنترل با ID Label1 و TextBox1 نیست و برای جزئیات بیشتر، تصویر زیر را نشان می دهد که منبع HTML این صفحه را نشان می دهد.

همانطور که متوجه می شوید ID TextBox1 به ctl00_ContentPlaceHolder1_TextBox1 تغییر کرده است و از Label1 به ctl00_ContentPlaceHolder1_Label1 تغییر  و از این رو عملکرد جاوا اسکریپت قادر به یافتن آنها نیست.

 همچنین متوجه خواهید شد که شناسه دکمه 1 تغییر کرده است زیرا runat = "server" در دکمه وجود ندارد. هنگام استفاده از MasterPages آنها تمایل دارند همه کنترل ها را در صفحات محتوا که runat = "server" نامگذاری می کنند تغییر نام دهند.

راه حل

راه حل مشکل فوق به کمک ASP.Net Inline Tags و خواص ClientID و UniqueID یک کنترل ASP.Net می باشد. تعریف هر دو اصطلاح در زیر آمده است

ClientID - ASP.NET به طور خودکار یک ClientID را برای یک سرور زمانی که کنترل به عنوان شناسه HTML کنترل ارائه می شود ایجاد می کند .

UniqueID - شناسه ی منحصر بفرد سلسله مراتبی واجد شرایط برای کنترل توسط ASP.NET به عنوان نام HTML کنترل ارائه شده است

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

    <input id="Button1" type="button" value="button" onclick = "GetValue()"/>

    <script type = "text/javascript">

        function GetValue()

        {

             var label = document.getElementById("<%=Label1.ClientID%>");

             var textbox = document.getElementById("<%=TextBox1.ClientID%>");

             alert("Label Value is " + label.innerHTML);

             alert("TextBox Value is " + textbox.value);

        }

    </script>

</asp:Content>

همانطور که در بالا ذکر میکنم از ASP.Net Inline Server Tags استفاده می کنیم <٪ = Label1.ClientID٪> آنچه انجام می شود این است که به سادگی ClientID را از Control here Label1 چاپ می کند بنابراین نیازی به نگرانی در مورد شناسه های تغییر وجود ندارد بنابراین بهتر است این روش را برای تمام کنترل هایی که دارای runat = "server" هستند دنبال کنید

در حال حاضر پس از انجام تغییرات، عملکرد جاوا اسکریپت قادر به پیدا کردن کنترل ها است و از این رو به درستی کار می کند. دلیلی که این کار را شروع می کند نیز می تواند در منبع HTML صفحه مشاهده شود که در شکل زیر نشان داده شده است.

همانطور که در بالای علامت زرد قرار می گیرید، نشان می دهد که شناسه TextBox و Label همان چیزی است که توسط MasterPage تولید می شود، از این رو عملکرد جاوا اسکریپت شروع به کار کرد.

توجه: روش نشان داده شده در بالا با منبع جاوا اسکریپت (JS) کار نمی کند فایل ها از برچسب <٪٪> در آنها مجاز نیستند.

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :