update data using jQuery - MVC

Question

I am working on a MVC application and I have a ActionLink for edit which turns the specific row into textboxes and save ActionLink appears instead of Edit on that row, but when I make changes and click on save data isn't saved in database, I just see the old data.

jQuery Code:

<script type="text/javascript">
    $(document).ready(function () {
        function toggleEditability() {
            $(this).closest('tr')
                   .find('a.Edit, a.Save, .displayText, input[type=text]')
                   .toggle(); 
        }

        $('a.Edit').click(toggleEditability);

        $('a.Save').click(function () {
            toggleEditability.call(this);
            var url = $(this).attr('href');
            $(this).load(url);
        });
    });
</script>

chtml Code:

<table>
        <tr>
            @*<th>
                @Html.Label("ID")
            </th>*@
            <th>
                @Html.Label("Name")
            </th>
            <th>
                @Html.Label("Description")
            </th>
            <th>
                 @Html.Label("Date")
            </th>
            <th></th>
        </tr>

    @foreach (var item in Model)
    {
        if (Convert.ToDateTime(item.Holiday_date).Year.ToString() == DateTime.Now.Year.ToString())
        {
            <tr>
           @* <td>
                @Html.TextBoxFor(modelItem => item.Holiday_Id, new { style = "display: none; width:170px; height:15px" })
                <div class="displaytext">
                    @Html.DisplayFor(modelItem => item.Holiday_Id)
                </div>
            </td>*@
            <td>
                @Html.TextBoxFor(modelItem => item.Holiday_Name, new { style = "display: none; width:170px; height:15px" })
                <div class="displaytext">
                    @Html.DisplayFor(modelItem => item.Holiday_Name)
                </div>
            </td>
            <td>
                @Html.TextBoxFor(modelItem => item.Holiday_Description, new { style = "display: none; width:170px; height:15px" })
                <div class="displaytext">
                    @Html.DisplayFor(modelItem => item.Holiday_Description)
                </div>
            </td>
            <td>
                @Html.TextBoxFor(modelItem => item.Holiday_date, new { style = "display: none; width:170px; height:15px" })
                <div class="displaytext">
                    @Html.DisplayFor(modelItem => item.Holiday_date)
                </div>
            </td>
            <td>
               @Html.ActionLink("Edit", "Edit", new { id = item.Holiday_Id }, new { @class = "Edit", Href="#" })
               @Html.ActionLink("Save", "Save", new { id = item.Holiday_Id}, new { @class = "Save", Href = "#", style = "display:none" } ) |
               @Html.ActionLink("Delete", "Delete", new { id = item.Holiday_Id }, new { @class = "lnkDelete" })
               @Html.ActionLink("Cancel", "Cancel", new { id = item.Holiday_Id}, new { @class = "Cancel", Href = "#", style = "display:none" } )
            </td>
        </tr>
        }

    }

    </table>

Controller Code for edit:

[HttpGet]
        public ActionResult Edit(int id = 0)
        {
            tbl_HolidayList tbl_holidaylist = db.tbl_HolidayList.Find(id);
            if (tbl_holidaylist == null)
            {
                return HttpNotFound();
            }
            return PartialView(tbl_holidaylist);
        }

        //
        // POST: /Holiday/Edit/5

        [HttpPost]
        public ActionResult Edit(tbl_HolidayList tbl_holidaylist)
        {
            if (ModelState.IsValid)
            {
                db.Entry(tbl_holidaylist).State = EntityState.Modified;
                db.SaveChanges();
                TempData["Msg"] = "Data has been updated succeessfully";
                return RedirectToAction("Index");
            }
            return PartialView(tbl_holidaylist);
        }

Can anyone tell me where I am mistaking or where I have to make changes??

Answer 1

From comment: You are making a GET request to the server using .load. That will not send any changes. You need to send the changes instead using an $.ajax POST request (with the appropriate data property sent along with it).

e.g. something like this (not exact, but give you the idea):

    $('a.Save').click(function () {
        toggleEditability.call(this);
        // Remember the element clicked
        var $element  $(this);
        // Get all the data from the nearest form
        var data = $(this).closest('form').serialize();
        // Get the URL from the form
        var url = $(this).attr('href');
        $.ajax({
            url: url,             // Url to send request to
            data: data,           // Send the data to the server
            type: "POST",         // Make it a POST request
            dataType: "html",     // Expect back HTML
            success: function(html){
                $(element).html(html);       // On success put the HTML "somewhere" (not sure where at this point)
            });
        });
    });

Another problem is with your view. You cannot render a form with repeated items using a foreach loop. That does not provide enough information for the EditorFor type methods to render an index (which allows it to name the items uniquely) . You need to use a simple for loop:

e.g.

  for (int i = 0; i < Mode.Length; i++){
  {
       @Html.TextBoxFor(modelItem => Model[i].Holiday_Id, new { style = "display: none; width:170px; height:15px" })
       [snip]
  }