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

استفاده از جاوا اسکریپت در کنترل RadioButtonList با ASP.Net
0 0
استفاده از جاوا اسکریپت در کنترل RadioButtonList با ASP.Net

با سلام در این مقاله با یک مثال چگونگی استفاده از جاوا اسکریپت با RadioButtonList در ASP.Net توضیح خواهیم داد.
همچنین اعتبار سنجی RadioButtonList  را برای پیدا کردن اینکه آیا یک آیتم انتخاب شده یا نه، و همچنین نحوه دریافت متن انتخاب شده و مقدار RadioButtonList با استفاده از جاوا اسکریپت در ASP.Net نشان میدهیم.
کد HTML
کد HTML زیر شامل یک RadioButtonList ASP.Net می باشد.

<asp:RadioButtonList ID="RadioButtonList1" runat="server">
    <asp:ListItem Text="One" Value="1"></asp:ListItem>
    <asp:ListItem Text="Two" Value="2"></asp:ListItem>
    <asp:ListItem Text="Three" Value="3"></asp:ListItem>
</asp:RadioButtonList>

مفهوم
کنترل RadioButtonList ASP.Net به عنوان یک جدول HTML با RadioButtons HTML به صورت زیر نشان داده شده است.

از این رو ما باید یک اسکریپت از طریق تمام کنترل ها (RadioButtons) در جدول HTML تولید شده بنویسیم  به منظورانتخاب اعتبار آن یا دریافت Text and Value
نکته مهم بعدی این است که Item RadioButtonList دارای دو بخش است.
1. متن
2. ارزش
قسمت Value در Attribute Value RadioButton HTML در دسترس است و بخش Text در عنصر HTML Label موجود است.

اعتبار RadioButtonList با استفاده از جاوا اسکریپت در ASP.Net
کد HTML زیر شامل یک RadioButtonList ASP.Net و دکمه است.
دکمه , پردازنده رویداد OnClientClick را تعیین می کند که باعث می شود تا با عملکرد Validate Javascript ارتباط بگیرد.
درون تابع جاوا اسکریپت معتبر ، ابتدا مرجع RadioButtonList تعیین می شود و سپس تمام RadioButtons داخل RadioButtonList اشاره می شود.
سپس حلقه بر روی RadioButtons ارجاع شده اجرا می شود و هر RadioButton چک میکند
اگر هیچ کدام از RadioButtons بررسی نشده باشد، یک  پیام هشدار جاوااسکریپت نمایش داده میشود، که باید RadioButton را از RadioButtonList ASP.Net انتخاب کند.

<script type="text/javascript">
    function Validate() {
        var rb = document.getElementById("<%=RadioButtonList1.ClientID%>");
        var radio = rb.getElementsByTagName("input");
        var isChecked = false;
        for (var i = 0; i < radio.length; i++) {
            if (radio[i].checked) {
                isChecked = true;
                break;
            }
        }
        if (!isChecked) {
            alert("Please select an option!");
        }
 
        return isChecked;
    }
</script>
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
    <asp:ListItem Text="One" Value="1"></asp:ListItem>
    <asp:ListItem Text="Two" Value="2"></asp:ListItem>
    <asp:ListItem Text="Three" Value="3"></asp:ListItem>
</asp:RadioButtonList>
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Validate" OnClientClick="return Validate()" />

دریافت متن و ارزش انتخاب RadioButtonList با استفاده از جاوا اسکریپت در ASP.Net
کد HTML زیر شامل یک RadioButtonList ASP.Net و دکمه است.
دکمه به رویداد پردازنده  OnClientClick اختصاص داده شده است، که باعث  ارتباط با عملکرد جاوا اسکریپت GetSelectedItem می شود.
درون ویژگی جاوا اسکریپت GetSelectedItem ، ابتدا مرجع RadioButtonList تعیین می شود و سپس تمام عناصر RadioButtons و Label در داخل RadioButtonList اشاره می شود.
سپس حلقه بر روی RadioButtons ارجاع شده اجرا می شود و هر RadioButton چک می کند .
اگر RadioButton چک شود، سپس مقدار RadioButton (یعنی مقدار انتخاب شده) و HTML درونی عنصر Label (یعنی Text Selected) با استفاده از جعبه پیام هشدار جاوا اسکریپت نمایش داده می شود.

<script type="text/javascript">
    function GetSelectedItem() {
        var rb = document.getElementById("<%=RadioButtonList1.ClientID%>");
        var radio = rb.getElementsByTagName("input");
        var label = rb.getElementsByTagName("label");
        for (var i = 0; i < radio.length; i++) {
            if (radio[i].checked) {
                alert("SelectedText: " + label[i].innerHTML
                    + "\nSelectedValue: " + radio[i].value);
                break;
            }
        }
 
        return false;
    }
</script>
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
    <asp:ListItem Text="One" Value="1"></asp:ListItem>
    <asp:ListItem Text="Two" Value="2"></asp:ListItem>
    <asp:ListItem Text="Three" Value="3"></asp:ListItem>
</asp:RadioButtonList>
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Get Selected" OnClientClick="return GetSelectedItem()" />

 


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

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