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

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

با سلام در این مقاله توضیح خواهیم داد که چگونه TextBox ها را به صورت پویا با جاوا اسکریپت در ASP.Net بکار ببریم.

همچنین توضیح خواهیم داد که چگونه مقدارهای TextBox های ایجاد شده به صورت پویا را با استفاده از جاوا اسکریپت در Server Side بکشید و همچنین TextBox های پویا را در PostBack نگهدارید.
کد HTML
کد HTML شامل یک دکمه HTML برای اضافه کردن TextBoxes پویا با استفاده از جاوا اسکریپت و HTML DIV برای نگه داشتن TextBox ها پویا و دکمه ASP.Net است.

<form id="form1" runat="server">
<input id="btnAdd" type="button" value="add" onclick="AddTextBox()" />
<br />
<br />
<div id="TextBoxContainer">
    <!--Textboxes will be added here -->
</div>
<br />
<asp:Button ID="btnPost" runat="server" Text="Post" OnClick="Post" />
</form>

اسکریپت Client Side
در زیر کلاینت جاوا اسکریپت برای اضافه کردن و حذف TextBox های پویا است.

<script type="text/javascript">
function GetDynamicTextBox(value){
    return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />' +
            '<input type="button" value="Remove" onclick = "RemoveTextBox(this)" />'
}
function AddTextBox() {
    var div = document.createElement('DIV');
    div.innerHTML = GetDynamicTextBox("");
    document.getElementById("TextBoxContainer").appendChild(div);
}
 
function RemoveTextBox(div) {
    document.getElementById("TextBoxContainer").removeChild(div.parentNode);
}
 
function RecreateDynamicTextboxes() {
    var values = eval('<%=Values%>');
    if (values != null) {
        var html = "";
        for (var i = 0; i < values.length; i++) {
            html += "<div>" + GetDynamicTextBox(values[i]) + "</div>";
        }
        document.getElementById("TextBoxContainer").innerHTML = html;
    }
}
window.onload = RecreateDynamicTextboxes;
</script>

عملکرد GetDynamicTextBox
این تابع یک رشته HTML از HTML TextBox است و دکمه ای را که برای افزودن به ظرف DIV استفاده می شود، باز می گرداند.
تابع AddTextBox
این تابع یک عنصر HTML DIV با یک TextBox و یک دکمه (برای حذف TextBox) ایجاد می کند و سپس آن را به DIV Container اضافه می کند.
توجه :

هنگام ایجاد TextBoxes پویا، یک Attribute DynamicTextBox را به تمام TextBoxes اختصاص میدهیم . مقادیر TextBox های پویا با استفاده از نام آن مشخص می شود.
تابع RemoveTextBox
این تابع به راحتی TextBox اضافه شده با دکمه ای که بر روی آن کلیک کرده است را حذف می کند.
 تابع RecreateDynamicTextboxes
این تابع در رویداد onload بارگذاری پنجره ی جاوا اسکریپت است که پس از آنکه صفحه در مرورگر بارگذاری می شود، فعال می شود.
ابتدا رشته JSON از server side یعنی ' <٪ = Values ٪> ' به آرایه جاوا اسکریپت تبدیل می کند و سپس TextBox های پویا را از طریق مقادیر پیش فرض در آرایه جاوااسکریپت باز می کند.
فضاهای نام
شما باید فضای نامی را وارد کنید.
C #

using System.Web.Script.Serialization;

VB.Net

Imports System.Web.Script.Serialization

دریافت مقادیر Textbox های پویا ایجاد شده با استفاده از جاوا اسکریپت
هنگامی که دکمه پست را کلیک می کنید، ابتدا مقادیر جعبه های متن از مجموعه Request.Form با استفاده از مقدار attribute name از TextBoxes پویا بدست می آید.
مقادیر محسوب شده به یک رشته JSON و به متغیر محافظت شده با ارزش اختصاص داده می شود، این رشته JSON درClient Side برای بازخوانی TextBox ها پویا پس از PostBack استفاده می شود.
در نهایت یک حلقه اجرا می شود و مقادیر TextBox ها با استفاده از هشدار جاوا اسکریپت نمایش داده می شوند.
C #

protected string Values;
protected void Post(object sender, EventArgs e)
{
    string[] textboxValues = Request.Form.GetValues("DynamicTextBox");
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    this.Values = serializer.Serialize(textboxValues);
    string message = "";
    foreach (string textboxValue in textboxValues)
    {
        message += textboxValue + "\\n";
    }
    ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "alert('" + message + "');", true);
}

 VB.Net

Protected Values As String
Protected Sub Post(sender As Object, e As EventArgs)
    Dim textboxValues As String() = Request.Form.GetValues("DynamicTextBox")
    Dim serializer As New JavaScriptSerializer()
    Me.Values = serializer.Serialize(textboxValues)
    Dim message As String = ""
    For Each textboxValue As String In textboxValues
        message += textboxValue & "\n"
    Next
    ClientScript.RegisterClientScriptBlock(Me.GetType(), "alert", "alert('" & message & "');", True)
End Sub

 


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

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