پیاده سازی کنترل های دینامیک با افزودن دکمه حذف در ASP.Net MVC
با سلام در این مقاله، با یک مثال توضیح خواهیم داد که چگونه کنترلهای پویای TextBox را با اضافه کردن دکمه حذف در ASP.Net MVC Razor پیاده سازی کنیم.
کنترل های پویای TextBox با استفاده از Add Remove Button در Client Side با استفاده از jQuery در ASP.Net MVC Razor ایجاد می شود.
فضاهای نام
شما باید فضای نامی را وارد کنید.
using System.Web.Script.Serialization;
Controller
Controller متشکل از دو روش است :
روش دست زدن به عملیات GET
در داخل این روش View بازگردانده می شود.
روش اداره عملیات POST
این روش زمانی که فرم با کلیک بر روی دکمه Submit ارسال می شود. مقادیر TextBox پویا از طریق رشته آرایه DynamicTextBox دریافت می شوند .
توجه :
مقادیر به عنوان آرایه دریافت می شوند، زیرا تمام TextBox های پویا با همان Attribute Name تعیین شده اند.
مقادیررشته آرایه دریافت شده به یک رشته JSON با استفاده از JavaScriptSerializer سریال داده می شود و سپس رشته JSON به یک شی ViewBag به نام Values برای بازخوانی TextBox های پویا پس از تکمیل فرم تکمیل می شود.
سپس یک حلقه اجرا می شود و تمامی مقادیر Textbox ها پویا استخراج و به شی Object ViewBag به نام Message به منظور نمایش مقادیر TextBox های پویا پس از تکمیل فرم ارسال تکمیل می شوند.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
// POST: Home
[HttpPost]
public ActionResult Index(string[] DynamicTextBox)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
ViewBag.Values = serializer.Serialize(DynamicTextBox);
string message = "";
foreach (string textboxValue in DynamicTextBox)
{
message += textboxValue + "\\n";
}
ViewBag.Message = message;
return View();
}
}
View
View زیر شامل یک فرم HTML است که به روش عملگر Index قبلا توضیح داده شده است. فرم شامل عناصر زیر است :
1. Add Button - این دکمه ارتباط با تابع جاوا اسکریپت را ایجاد می کند که به صورت پویا HTML DIV با TextBox و یک دکمه برای حذف TextBox ایجاد می کند و آن را به TextBoxContainer HTML DIV اضافه می کند.
2 TextBoxContainer - این HTML DIV برای برگزاری TextBoxes Dynamic استفاده می شود.
3. Submit Button - این دکمه برای ارسال فرم HTML استفاده می شود.
اضافه کردن جعبه متن پویا
هنگامی که دکمه Add کلیک می شود، عملکرد جاوا اسکریپت GetDynamicTextBox نامیده می شود که یک HTML DIV را که شامل TextBox و دکمه حذف است را باز می کند .
حذف جعبه متن پویا
هنگامی که دکمه حذف کلیک می شود، عنصر HTML DIV والد مربوطه از TextBoxContainer HTML DIV حذف می شود.
بازخوانی Textbox های پویا پس از ارسال فرم
هنگامی که صفحه بعد از فرم ارسال مجدد بارگذاری می شود، مقادیر TextBox های پویا از شی Value ViewBag استخراج می شود و یک حلقه با استفاده از یک TextBox پویا ایجاد و به TextBoxContainer HTML DIV اضافه می شود
نمایش مقادیر TextBox های پویا پس از ارسال فرم
پیام شی ViewBag شامل پیام رشته پیوندی فرستاده شده از Controller است. مقدار شیء ViewBag پیام است و سپس از جعبه پیام هشدار جاوا اسکریپت استفاده می شود .
توجه :
برای جزئیات بیشتر در نمایش جعبه پیام هشدار جاوا اسکریپت در ASP.Net MVC، لطفا مقاله نمایش پیام از Controller در View با استفاده از Alert MessageBox جاوا اسكریپت را مطالعه کنید
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<input id="btnAdd" type="button" value="Add" onclick="AddTextBox()"/>
<br/>
<br/>
<div id="TextBoxContainer">
<!--Textboxes will be added here -->
</div>
<br/>
<input type="submit" value="Submit"/>
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function GetDynamicTextBox(value) {
var div = $("<div />");
var textBox = $("<input />").attr("type", "textbox").attr("name", "DynamicTextBox");
textBox.val(value);
div.append(textBox);
var button = $("<input />").attr("type", "button").attr("value", "Remove");
button.attr("onclick", "RemoveTextBox(this)");
div.append(button);
return div;
}
function AddTextBox() {
var div = GetDynamicTextBox("");
$("#TextBoxContainer").append(div);
}
function RemoveTextBox(button) {
$(button).parent().remove();
}
$(function () {
var values = eval('@Html.Raw(ViewBag.Values)');
if (values != null) {
$("#TextBoxContainer").html("");
$(values).each(function () {
$("#TextBoxContainer").append(GetDynamicTextBox(this));
});
}
});
</script>
@if (ViewBag.Message != null)
{
<script type="text/javascript">
$(function () {
alert("@ViewBag.Message")
});
</script>
}
</body>
</html>