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

عملکرد CRUD (ایجاد ، خواندن ، به روزرسانی و حذف) در Razor ASP.Net MVC
0 0
عملکرد CRUD (ایجاد ، خواندن ، به روزرسانی و حذف) در Razor ASP.Net MVC

با سلام در این مقاله با یک مثال ، نحوه انجام عملیات CRUD (ایجاد ، خواندن ، به روزرسانی و حذف) در Razor ASP.Net MVC با استفاده از jQuery AJAX توضیح خواهیم داد.
عملیات CRUD به زبان ساده به معنای انتخاب ، وارد کردن ، ویرایش ، بروزرسانی و حذف عملیات است.
Entity Framework برای انجام عملیات CRUD یعنی عملیات انتخاب ، درج ، ویرایش ، بروزرسانی و حذف در ASP.Net MVC Razor استفاده خواهد شد.

بانک اطلاعات
از جدول مشتریان  به شرح زیر استفاده کرده ایم. CustomerId یک ستون افزایش خودکار (هویت) است.

 قبلاً چند رکورد در جدول وارد کرده ایم.

توجه :

می توانید جدول بانک اطلاعاتی SQL را با کلیک روی لینک دانلود کنید. فایل SQL را بارگیری کنید

Entity Framework Model
پس از پیکربندی و تبدیل شدن به Entity Framework در جدول پایگاه داده ، Model مطابق شکل زیر ظاهر خواهد شد.

Controller
Controller از چهار روش تشکیل شده است.
روش انجام عملیات GET
در داخل این روش ، تمام سوابق موجود در جدول Customers به ​​مجموعه عنوان Generic List به View باز می گردند.
روش برای درج
در داخل این روش  ، شی مشتری دریافت شده در جدول مشتریان قرار می گیرد و شی مشتری به روز شده با شناسه مشتری ایجاد شده به View برگشت داده می شود.
روش به روز رسانی
در داخل این روش Action ، شیء Customer به عنوان پارامتر دریافت می شود. مقدار CustomerId از شی مشتری دریافت شده برای اشاره به سوابق مشتری در اشخاص مشتری استفاده می شود.
پس از مراجعه به فایل ، مقادیر نام و کشور به روز می شوند و تغییرات در جدول مشتری به روز می شوند.
روش حذف
در داخل این روش ، مقدار CustomerId به عنوان پارامتر دریافت می شود. مقدار CustomerId برای مرجع کردن سوابق مشتری در اشخاص مشتری استفاده می شود.
پس از مراجعه به فایل ، فایل مشتری از جدول Customer حذف می شود.

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        CustomersEntities entities = new CustomersEntities();
        List<Customer> customers = entities.Customers.ToList();
 
        //Add a Dummy Row.
        customers.Insert(0, new Customer());
        return View(customers);
    }
 
    [HttpPost]
    public JsonResult InsertCustomer(Customer customer)
    {
        using (CustomersEntities entities = new CustomersEntities())
        {
            entities.Customers.Add(customer);
            entities.SaveChanges();
        }
 
        return Json(customer);
    }
 
    [HttpPost]
    public ActionResult UpdateCustomer(Customer customer)
    {
        using (CustomersEntities entities = new CustomersEntities())
        {
            Customer updatedCustomer = (from c in entities.Customers
                                        where c.CustomerId == customer.CustomerId
                                        select c).FirstOrDefault();
            updatedCustomer.Name = customer.Name;
            updatedCustomer.Country = customer.Country;
            entities.SaveChanges();
        }
 
        return new EmptyResult();
    }
 
    [HttpPost]
    public ActionResult DeleteCustomer(int customerId)
    {
        using (CustomersEntities entities = new CustomersEntities())
        {
            Customer customer = (from c in entities.Customers
                                 where c.CustomerId == customerId
                                 select c).FirstOrDefault();
            entities.Customers.Remove(customer);
            entities.SaveChanges();
        }
 
        return new EmptyResult();
    }
}

View
در داخل View ، در اولین خط کلاس مشتری روش Entity Framework به عنوان Model برای View اعلام می شود.
نمایش دادن (Display )
برای نمایش سوابق از جدول HTML استفاده می شود. یک حلقه بر روی Model اجرا خواهد شد که ردیف های جدول HTML را با سوابق مشتری ایجاد می کند.
درج کنید (Insert)
با کلیک بر روی دکمه Add ، نام و مقادیر کشور از TextBoxes مربوطه گرفته می شود و سپس با استفاده از ارتباط jQuery AJAX به روش InsertCustomer Action منتقل می شود.
پس از دریافت پاسخ ، یک ردیف جدید با استفاده از عملکرد AppendRow به جدول HTML اضافه می شود.
ویرایش کنید (Edit)
با کلیک بر روی دکمه ویرایش ، مرجع ردیف جدول HTML مشخص می شود و عناصر HTML SPAN مخفی می شوند در حالی که TextBoxes در ستونهای Name و Country در جدول HTML قابل مشاهده می باشند.
به روز رسانی (Update)
با کلیک بر روی دکمه به روزرسانی ، مرجع ردیف جدول HTML مشخص می شود و مقادیر به روز شده از ستون های TextBoxes of Name و Country گرفته می شود ، در حالی که CustomerId از عنصر HTML SPAN ستون CustomerId تعیین می شود.
مقادیر CustomerId ، Name و Country به روش UpdateCustomer Action با استفاده از ارتباط جی کوئری AJAX منتقل می شود .
پس از دریافت پاسخ ، عناصر HTML SPAN قابل مشاهده می شوند و TextBoxes برای ستونهای Name و Country از ردیف Table HTML پنهان می شوند.
لغو (Cancel)
با کلیک بر روی دکمه Cancel ، مرجع ردیف Table HTML مشخص می شود و عناصر HTML SPAN در حالی که TextBoxes در ستون های Name و Country از ردیف Table HTML پنهان می شوند ، قابل مشاهده می شوند.
حذف (Delete)
با کلیک بر روی دکمه Delete ، مرجع ردیف Table HTML مشخص می شود و مقدار CustomerId بارگیری می شود و با استفاده از ارتباط jQuery AJAX به روش DeleteCustomer Action منتقل می شود.
پس از دریافت پاسخ ، ردیف مربوطه از سطر جدول HTML حذف می شود.

@model IEnumerable<CRUD_jQuery_MVC.Customer>
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <table id="tblCustomers" class="table" cellpadding="0" cellspacing="0">
        <tr>
            <th style="width:100px">Customer Id</th>
            <th style="width:150px">Name</th>
            <th style="width:150px">Country</th>
            <th style="width:150px"></th>
        </tr>
        @foreach (Customer customer in Model)
        {
            <tr>
                <td class="CustomerId">
                    <span>@customer.CustomerId</span>
                </td>
                <td class="Name">
                    <span>@customer.Name</span>
                    <input type="text" value="@customer.Name" style="display:none"/>
                </td>
                <td class="Country">
                    <span>@customer.Country</span>
                    <input type="text" value="@customer.Country" style="display:none"/>
                </td>
                <td>
                    <a class="Edit" href="javascript:;">Edit</a>
                    <a class="Update" href="javascript:;" style="display:none">Update</a>
                    <a class="Cancel" href="javascript:;" style="display:none">Cancel</a>
                    <a class="Delete" href="javascript:;">Delete</a>
                </td>
            </tr>
        }
    </table>
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td style="width: 150px">
                Name<br/>
                <input type="text" id="txtName" style="width:140px"/>
            </td>
            <td style="width: 150px">
                Country:<br/>
                <input type="text" id="txtCountry" style="width:140px"/>
            </td>
            <td style="width: 200px">
                <br/>
                <input type="button" id="btnAdd" value="Add"/>
            </td>
        </tr>
    </table>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
    <script type="text/javascript">
        $(function () {
            //Remove the dummy row if data present.
            if ($("#tblCustomers tr").length > 2) {
                $("#tblCustomers tr:eq(1)").remove();
            } else {
                var row = $("#tblCustomers tr:last-child");
                row.find(".Edit").hide();
                row.find(".Delete").hide();
                row.find("span").html('&nbsp;');
            }
        });
 
        function AppendRow(row, customerId, name, country) {
            //Bind CustomerId.
            $(".CustomerId", row).find("span").html(customerId);
 
            //Bind Name.
            $(".Name", row).find("span").html(name);
            $(".Name", row).find("input").val(name);
 
            //Bind Country.
            $(".Country", row).find("span").html(country);
            $(".Country", row).find("input").val(country);
 
            row.find(".Edit").show();
            row.find(".Delete").show();
            $("#tblCustomers").append(row);
        };
 
        //Add event handler.
        $("body").on("click", "#btnAdd", function () {
            var txtName = $("#txtName");
            var txtCountry = $("#txtCountry");
            $.ajax({
                type: "POST",
                url: "/Home/InsertCustomer",
                data: '{name: "' + txtName.val() + '", country: "' + txtCountry.val() + '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    var row = $("#tblCustomers tr:last-child");
                    if ($("#tblCustomers tr:last-child span").eq(0).html() != "&nbsp;") {
                        row = row.clone();
                    }
                    AppendRow(row, r.CustomerId, r.Name, r.Country);
                    txtName.val("");
                    txtCountry.val("");
                }
            });
        });
 
        //Edit event handler.
        $("body").on("click", "#tblCustomers .Edit", function () {
            var row = $(this).closest("tr");
            $("td", row).each(function () {
                if ($(this).find("input").length > 0) {
                    $(this).find("input").show();
                    $(this).find("span").hide();
                }
            });
            row.find(".Update").show();
            row.find(".Cancel").show();
            row.find(".Delete").hide();
            $(this).hide();
        });
 
        //Update event handler.
        $("body").on("click", "#tblCustomers .Update", function () {
            var row = $(this).closest("tr");
            $("td", row).each(function () {
                if ($(this).find("input").length > 0) {
                    var span = $(this).find("span");
                    var input = $(this).find("input");
                    span.html(input.val());
                    span.show();
                    input.hide();
                }
            });
            row.find(".Edit").show();
            row.find(".Delete").show();
            row.find(".Cancel").hide();
            $(this).hide();
 
            var customer = {};
            customer.CustomerId = row.find(".CustomerId").find("span").html();
            customer.Name = row.find(".Name").find("span").html();
            customer.Country = row.find(".Country").find("span").html();
            $.ajax({
                type: "POST",
                url: "/Home/UpdateCustomer",
                data: '{customer:' + JSON.stringify(customer) + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            });
        });
 
        //Cancel event handler.
        $("body").on("click", "#tblCustomers .Cancel", function () {
            var row = $(this).closest("tr");
            $("td", row).each(function () {
                if ($(this).find("input").length > 0) {
                    var span = $(this).find("span");
                    var input = $(this).find("input");
                    input.val(span.html());
                    span.show();
                    input.hide();
                }
            });
            row.find(".Edit").show();
            row.find(".Delete").show();
            row.find(".Update").hide();
            $(this).hide();
        });
 
        //Delete event handler.
        $("body").on("click", "#tblCustomers .Delete", function () {
            if (confirm("Do you want to delete this row?")) {
                var row = $(this).closest("tr");
                var customerId = row.find("span").html();
                $.ajax({
                    type: "POST",
                    url: "/Home/DeleteCustomer",
                    data: '{customerId: ' + customerId + '}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        if ($("#tblCustomers tr").length > 2) {
                            row.remove();
                        } else {
                            row.find(".Edit").hide();
                            row.find(".Delete").hide();
                            row.find("span").html('&nbsp;');
                        }
                    }
                });
            }
        });
    </script>
</body>
</html>

 


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

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