تبدیل label به textbox توسط jquery در Asp.net

چهارشنبه 15 بهمن 1393

در این مقاله میخواهیم زمانی که روی یک label کلیک کردیم به textbox تبدیل شود .

تبدیل label به textbox توسط jquery در Asp.net

ساخت یک برچسب قابل ویرایش در زمان کلیک توسط jquery در Asp.net به سادگی امکان پذیر است

زمانی که روی label کلیک کنیم به text box تبدیل میشود و میتوانیم انرا ویرایش کنیم سپس هر جا بیرون از text box کلیک کنیم textbox  به label تبدیل میشود.

به صفحه خود یک label و یک button اضافه کنید:

خاصیت css class برای label  را به نام editable تنظیم میکنیم تا توسط jquery بتنوانیم از آن استفاده کنیم:


<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            Name:&nbsp;
        </td>
        <td>
            <asp:Label ID="lblName" runat="server" Text="Mudassar" CssClass="editable" />
        </td>
    </tr>
    <tr>
        <td>
            &nbsp;
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
            <asp:Button Text="Submit" runat="server" OnClick="Submit" />
        </td>
    </tr>
</table>

سپس اسکریپت زیر را برای ویرایش label مینویسیم:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    //Loop through all Labels with class 'editable'.
    $(".editable").each(function () {
        //Reference the Label.
        var label = $(this);
 
        //Add a TextBox next to the Label.
        label.after("<input type = 'text' style = 'display:none' />");
 
        //Reference the TextBox.
        var textbox = $(this).next();
 
        //Set the name attribute of the TextBox.
        var id = this.id.split('_')[this.id.split('_').length - 1];
        textbox[0].name = id.replace("lbl", "txt");
 
        //Assign the value of Label to TextBox.
        textbox.val(label.html());
 
        //When Label is clicked, hide Label and show TextBox.
        label.click(function () {
            $(this).hide();
            $(this).next().show();
        });
 
        //When focus is lost from TextBox, hide TextBox and show Label.
        textbox.focusout(function () {
            $(this).hide();
            $(this).prev().html($(this).val());
            $(this).prev().show();
        });
    });
});
</script>

حالا برای دکمه ای که به صفحه اضافه کرده بودیم کد زیر را مینویسم تا متن ویرایش شده را نمایش دهد:


protected void Submit(object sender, EventArgs e)
{
    string name = Request.Form["txtName"];
    lblName.Text = name;
    ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "alert('Name: " + name + "');", true);
}

فایل های ضمیمه

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید