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

پیاده سازی کنترل های دینامیک با افزودن دکمه حذف در ASP.Net MVC
0 0
پیاده سازی کنترل های دینامیک با افزودن دکمه حذف در 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>

 


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

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