Remove From My Forums

Update data on control's event : Razor

Question
0

Sign in to vote

User1052662409 posted

Hi All,

I am using MVC5.

I have a view, where I have some textbooks, some dropdownlists and file control.

I want that, whenever I type in textbox, or select an item from dropdownlists or select a file to be uploaded the data should be updated (for filled fields) in table.

The motive behind this I am want to save data on control's event because I don't want to give a single button for "Save as draft" I want this whenever a control's event fires it should update data in sql table.

(FYI: I have already a data access layer where I have a method to update the data.)

So please suggest. Which approach I should follow.

Wednesday, July 10, 2019 5:11 AM

Answers

User665608656 posted

Hi demoninside,

According to your description, I recommend that you monitor change events to textbox, dropdownlist, and file controls in jquery.

In fact, textbox and file controls are input tags. You can monitor the input tags in tables. Once a change event occurs, you use the HttpPost to save data.

The essence of dropdownlist is the select tag. You can monitor the change event of select in the same way, and save the database as soon as it changes.

I'm not sure if your data presentation is in the form of textbox, dropdownlist and file controls.

I hide the controls first, with an edit button, when you click edit button and the controls themselves will appear, and then trigger the events to save data.

I have made a simple case for you to refer to:

UpdateTableController:

  public class UpdateTableController : Controller
    {
       
        // GET: UpdateTable
        public ActionResult Index()
        {
           // dropdownlist's datasource
            List<SelectListItem> ObjList = new List<SelectListItem>()
            {
                new SelectListItem { Text = "Latur", Value = "Latur" },
                new SelectListItem { Text = "Pune", Value = "Pune" },
                new SelectListItem { Text = "Mumbai", Value = "Mumbai" },
                new SelectListItem { Text = "Delhi", Value = "Delhi" },
            };
            //Assigning generic list to ViewBag
            ViewBag.LastName = ObjList;
            EntityData entity = new EntityData();
            List<Employee> customers = entity.Employees.ToList();
            return View(customers);
        }
        [HttpPost]
        public ActionResult UpdateCustomer(Employee customer)
        {
            using (EntityData entities = new EntityData())
            {
                Employee updatedCustomer = (from c in entities.Employees
                                            where c.EmplId == customer.EmplId
                                            select c).FirstOrDefault();
                updatedCustomer.FirstName = customer.FirstName;
                updatedCustomer.LastName = customer.LastName;
                updatedCustomer.EmailAddr = customer.EmailAddr;
                entities.SaveChanges();
            }

            return new EmptyResult();
        }

    }

Index.cshtml:

@model IEnumerable<MVC_Cases.Models.Employee>
@{
    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" style="border-collapse:collapse;text-align:center" border="1">
        <tr>
            <th style="width:100px">Customer Id</th>
            <th style="width:150px">FirstName</th>
            <th style="width:150px">LastName</th>
            <th style="width:150px">EmailAddr</th>
            <th style="width:150px">Action</th>
        </tr>
        @foreach (var customer in Model)
        {
            <tr>
                <td class="EmplId">
                    <span>@customer.EmplId</span>
                </td>
                <td class="FirstName">
                    <span>@customer.FirstName</span>
                    <input type="text" value="@customer.FirstName" style="display:none" />
                </td>
                <td class="LastName">
                    <span>@customer.LastName</span>
                    <select style="display:none">
                        @foreach (var v in ViewBag.LastName)
                        {
                            <option value="@v.Value" @(v.Text == customer.LastName ? "selected" : "")>@v.Text</option>
                        }
                    </select>
                </td>
                <td class="EmailAddr">
                    <span>@customer.EmailAddr</span>
                    <input type="file" name="file" style="display:none" />
                   
                </td>
                <td>
                    <a class="Edit" href="javascript:;">Edit</a>
                    
                </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 () {
            if ($("#tblCustomers tr").length > 2) {
                //$("#tblCustomers tr:eq(1)").remove();
            } else {
                var row = $("#tblCustomers tr:last-child");
                row.find(".Edit").hide();
                row.find("span").html('&nbsp;');
            }
        });

       
        //Edit event handler.
        $("body").on("click", "#tblCustomers .Edit", function () {
            var row = $(this).closest("tr");
            $("td", row).each(function () {
                if ($(this).find('input[type="text"]').length > 0) {
                    $(this).find('input[type = "text"]').show();
                    $(this).find("span").hide();
                }
                if ($(this).find('input[type="file"]').length > 0) {
                    $(this).find('input[type = "file"]').show();
                    $(this).find("span").show();
                }
                if ($(this).find("select").length > 0) {
                    $(this).find("select").show();
                    $(this).find("span").hide();
                }
            });
            $(this).hide();
        });

        $("body").on("change", "#tblCustomers input,select", function () {
            updateData($(this));
        });
        function updateData(controlKey) {
            var row = controlKey.closest("tr");
            var customer = {};
            customer.EmplId = row.find(".EmplId").find("span").html();
            customer.FirstName = row.find(".FirstName").find("input").val();
            customer.LastName = row.find(".LastName").find("select").val();
            if (row.find(".EmailAddr").find("input").val() == "") {
                customer.EmailAddr = row.find(".EmailAddr").find("span").html();
            } else {
                customer.EmailAddr = row.find(".EmailAddr").find("input").val();
            }
           //save data
            $.ajax({
                type: "POST",
                url: "/UpdateTable/UpdateCustomer",
                data: '{customer:' + JSON.stringify(customer) + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            });
        }
                    
    </script>
</body>
</html>

The result of this work demo:

Best Regards,

YongQing.

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Wednesday, July 10, 2019 9:40 AM

Answered by:

Update data on control's event : Razor

Question

Answers