تبدیل label به textbox توسط jquery در Asp.net
چهارشنبه 15 بهمن 1393در این مقاله میخواهیم زمانی که روی یک label کلیک کردیم به textbox تبدیل شود .
ساخت یک برچسب قابل ویرایش در زمان کلیک توسط 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: </td> <td> <asp:Label ID="lblName" runat="server" Text="Mudassar" CssClass="editable" /> </td> </tr> <tr> <td> </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); }
- ASP.net
- 1k بازدید
- 1 تشکر