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??

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). — iCollect.it Ltd
– iCollect.it Ltd, Commented Dec 31, 2014 at 18:50
Example added below to head you in the right direction, but may not match your exact requirements. — iCollect.it Ltd
– iCollect.it Ltd, Commented Dec 31, 2014 at 19:09
You also needed to get your form working without the Ajax stuff first. If you check my update you will see why the form will not work at all. — iCollect.it Ltd
– iCollect.it Ltd, Commented Jan 1, 2015 at 1:14

iCollect.it Ltd · Accepted Answer · 2015-01-01 10:37:58Z

2

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]
  }

edited Jan 1, 2015 at 10:37

answered Dec 31, 2014 at 19:00

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Umm E Habiba Siddiqui Over a year ago

I made that changes according to me requirements but null is going in my controller method.

iCollect.it Ltd Over a year ago

Your example pages are incomplete. Can you make sure the entire view is shown and the tbl_HolidayList class?

Umm E Habiba Siddiqui Over a year ago

This is my tbl_HolidayList class and its working fine, but the data is going null in edit method

public partial class tbl_HolidayList     {         public int Holiday_Id { get; set; }         public string Holiday_Name { get; set; }         public string Holiday_Description { get; set; }         public Nullable<System.DateTime> Holiday_date { get; set; }     }

iCollect.it Ltd Over a year ago

You need to update your question with that information and the full view cshtml page. Comments are pretty useless for code and I need to see the entire problem to figure out why your passed data is coming though as null (might need to create a repro). Thanks.

Umm E Habiba Siddiqui Over a year ago

I updated this problem as a new question, kindly check this out stackoverflow.com/questions/27782782/…

Collectives™ on Stack Overflow

update data using jQuery - MVC

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related