Data is not going in controller method - MVC

Question

I am new to MVC, I am trying to edit a row and sending edited data to a controller method via jQuery and AJAX, when I click on edit the specific row becomes textboxes and save ActionLink appears instead of edit, but when I save it it gives me an exception.

here is my jQuery/AJAX:

@model IEnumerable<OTESSystem.Models.tbl_HolidayList>

@{
    ViewBag.Title = "Index";
}


<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <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 data = $(this).closest('form').serialize();
                //var url = $(this).attr('href');
                var actionURL = '@Url.Action("Edit", "Holiday")';
                $.ajax({
                    url: actionURL,             // 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) {
                        $("#dialog-edit").dialog('open');       //
                    }
                });
            });
        });
    </script>

chtml code:

<div id="details">
    <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>

   </div>

Controller method code:

 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);
        }

tbl_HolidayList.cs

namespace OTESSystem.Models
{
    using System;
    using System.Collections.Generic;

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

Can you tell me why I am getting this exception??

Answer 1

You have asked a similar question before and the main problem is the same problem as before. You cannot use a foreach loop with @Html.TextBoxFor etc. You need to use a for loop and have indexing on the expressions:

Problem 1:

e.g.

@for (int i = 0; i < Model.Count(); i++)
{
     [snip]
     <td>
          @Html.TextBoxFor(m => Model[i].Holiday_Name, new { style = "display: none; width:170px; height:15px" })
          <div class="displaytext">
             @Html.DisplayFor(m => Model[i].Holiday_Name)
          </div>
     </td>
     [snip]
}

The problem is that the expression tree passed to TextBoxFor needs to have knowledge of the index value in order to generate the indexed names correctly. The local variable provided by a foreach has no idea what position it was within its parent collection.

Problem 2

The other problem is that you only want to send a single row back to the Edit method. This is at odds with the above recommendation.

Try just serialising the single row, then the incorrect naming of elements should actually work in your favor:

    var data = $(this).closest('tr').serialize();

Other issues

Your page currently takes an IEnumerable<OTESSystem.Models.tbl_HolidayList> collection of items. You would normally render these with a for loop (not for each - see problem 1). You would then post back the entire page so that your edit method should also use an IEnumerable<OTESSystem.Models.tbl_HolidayList>

e.g.

 public ActionResult Edit(IEnumerable<tbl_HolidayList> tbl_holidaylist)
 {
      foreach( var holiday in tbl_holidaylist)
      {
          //save changes
      }
 }

Basically you have two conflicting things going on in your page. You need to decide whether to go with the standard MVC practices or against them :)

Answer 2

this worked for me

<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 () {;


                //alert("hello");
                var tr = $(this).parents('tr:first');
                //alert(tr);
                var hid = tr.find("#hdnid").val();
                var HName = tr.find("#txtname").val();
                var Hdesc = tr.find("#txtdesc").val();
                var date = tr.find("#txtdate").val();
                tr.find("#hdnid").text(hid);
                tr.find("#txtname").text(HName);
                tr.find("#txtdesc").text(Hdesc);
                tr.find("#txtdate").text(date);
                toggleEditability.call(this);
                //tr.find('.edit-mode, .display-mode').toggle();
                //alert(hid);
                //alert(HName);
                //alert(Hdesc);
                //alert(date);
                var dataToSend = {
                    Holiday_Id: hid,
                    Holiday_Name: HName,
                    Holiday_Description : Hdesc,
                    Holiday_date: date
                }
                var url = '@Url.Action("Edit", "Holiday")';
                //alert("b4 ajax");
                $.ajax({
                    url: '@Url.Action("Edit", "Holiday")',
                    type: "Post",
                    data: dataToSend,
                    //dataType: "html",
                    success: function (data) { 
                        alert("saved");
                    },
                    error: function () {
                        alert("error");
                    }
                });
            });
        });
    </script>