jquery - 在 jQuery 中获取多个文本框值 - MVC

Question

我是 MVC 新手，我正在尝试编辑一行并通过 jQuery 和 AJAX 将编辑后的数据发送到 Controller 方法，当我单击 edit 时，特定行将变为文本框和 save ActionLink 显示而不是 edit，但是当我保存它时，它给了我一个异常，因为 null 正在进入 data

jQuery/Ajax 代码:

$(document).ready(function () {
            function toggleEditability() {
                $(this).closest('tr')
                       .find('a.Edit, a.Save, .displayText, input[type=text]')
            }

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

            $('a.Save').click(function () {
                toggleEditability.call(this);
                var data = $(this).closest('tr').serialize();   
                alert(data);
                //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');      
                    }
                });
            });
        });

alert(data) 显示此

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>
           @* <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>
                <div class="HolidayName">
                    @Html.TextBoxFor(modelItem => item.Holiday_Name,  new { id = "", 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 = "", 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 = "", 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>

Controller 方法代码:

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

你能告诉我如何获取 data 中的文本框值以供 jQuery 保存吗？

异常和数据在方法中为空:

Answer 1

alert(data) 的结果为 null，因为您尝试序列化最接近的 tr 的整个内容，并且它也包含非输入控件。因此，尝试仅序列化输入控件，如下所示

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

您的警报应返回 tr 数据，如下图所示。

如果您的 AJAX 发布的模型数据在 Save 操作中返回 null，那么另一种方法是从序列化数据对象构建数据数组，并仅获取您想要的数据需要如下所示的内容(以下所有代码均位于 $('a.Save').click(function () { ... )

var dataArray = $(this).closest('tr').find('input').serialize();
dataObj = {};

 // loop through and create your own data object
 $(dataArray).each(function (i, field) {
      dataObj[field.name] = field.value;
 });

 var data = {};
 data.Holiday_Id = dataObj['item.Holiday_Id'];
 data.Holiday_Name = dataObj['item.Holiday_Name'];
 data.Holiday_Description = dataObj['item.Holiday_Description'];
 data.Holiday_date = dataObj['item.Holiday_date'];

 var actionURL = '@Url.Action("Save", "Holiday")';

 $.ajax({
        url: actionURL,  // Url to send request to
        data: JSON.stringify({ model: 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) {
             $("#dialog-edit").dialog('open');
        }
      });

现在您应该在 Controller 的保存操作中看到发布的数据。

更新1:根据您评论中指出的错误，您的主键似乎作为 Controller 的操作方法的 null 出现。您可以将隐藏的输入字段添加到标记中，如下所示。

.....

<td>
     @Html.DisplayFor(modelItem => item.Holiday_Id)
     @Html.HiddenFor(modelItem => item.Holiday_Id);
</td>

....