从 html xml 格式字符串中检索信息 jQuery/AJAX -MVC

Question

我是 MVC 的新手，我正在处理一个项目，其中有一个显示数据的 Gridview，当我单击 Edit 时，特定行变为 textboxes，Edit 变为 Save，我编辑数据并单击 Save，控件进入 jQuery 函数，该函数使用 AJAX 将编辑的行数据发送到控制器方法，我发出警报以查看给我这个字符串的数据

null 将转到我的控制器方法，我得到一个异常

我的jQuery/Ajax代码：

<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('tr').find('input').serialize();      
                alert(data);          
                $.ajax({
                    url: '@Url.Action("Edit", "Holiday")',             // 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
                    //contentType: 'application/json; charset=utf-8',
                    success: function (html) {
                        alert(html);
                        console.log(html);
                    },
                    error: function () {
                        alert("error");
                    }
                });
            });
        });
    </script>

chtml代码：

<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>
                @Html.HiddenFor(modelItem => item.Holiday_Id)
            @*<td>
                 @Html.DisplayFor(modelItem => item.Holiday_Id)
                 @Html.HiddenFor(modelItem => item.Holiday_Id)
            </td>*@
            <td>
                <div class="HolidayName">
                    @Html.TextBoxFor(modelItem => item.Holiday_Name,  new { id = "txtname", name="HolidayName", style = "display: none; width:170px; height:15px" })
                </div>
                <div class="displaytext">
                    @Html.DisplayFor(modelItem => item.Holiday_Name)
                </div>
            </td>
            <td>
                <div class="HolidayDescription">
                    @Html.TextBoxFor(modelItem => item.Holiday_Description, new { id = "txtdesc", name="HolidayDescription", style = "display: none; width:170px; height:15px" })
               </div>
               <div class="displaytext">
                    @Html.DisplayFor(modelItem => item.Holiday_Description)
                </div>
            </td>
            <td>
                <div class="HolidayDate">
                    @Html.TextBoxFor(modelItem => item.Holiday_date, new { id = "txtdate", name="HolidayDate", style = "display: none; width:170px; height:15px" })
                </div>
                <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>

我的控制器方法代码是：

[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();//save changes
                TempData["Msg"] = "Data has been updated succeessfully";
                return RedirectToAction("Index");
            }
            return PartialView(tbl_holidaylist);
        }

我的问题是如何从 data 中的字符串中检索我的特定信息，以便我的控制器方法可以将其作为参数？？

Answer 1

您的控件名称与我们的属性名称不匹配（例如，您的 tbl_holidaylist 具有属性名称 Holiday_Name 但您回发的键值 item.Holiday_Name).您还生成了无效的 html（每行重复 id 属性）。

而不是

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

使用

var inputs = $(this).closest('tr').find('input');
var id = inputs.eq(0).val();
var name = inputs.eq(1).val();
var description = inputs.eq(2).val();
var date = inputs.eq(3).val();
var data = { Holiday_Id: id, Holiday_Name: name, Holiday_Description: description, Holiday_date: date };
....

我还建议您将 @Html.TextBoxFor() 方法的 html 属性更改为

@Html.TextBoxFor(modelItem => item.Holiday_Name,  new { id = "txtname", name="HolidayName", style = "display: none; width:170px; height:15px" })

至

@Html.TextBoxFor(modelItem => item.Holiday_Name,  new { id = "" })

这将删除 id 属性。然后使用 css 来处理样式而不是内联格式

table input {
  display: none;
  width:170px;
  height:15px;
}

Answer 2

我进行了这些更改，解决了我的问题

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

从 html xml 格式字符串中检索信息 jQuery/AJAX -MVC

Retrieving information from html xml format string in jQuery/AJAX -MVC

ajax

asp.net-mvc

jquery

onclick

asp.net-mvc-4