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

Answer 1

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>

Answer 2

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 :)