Question

我是MVC的新手，我正在尝试编辑一行并通过jQuery和AJAX将编辑后的数据发送到控制器方法，当我点击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)正在显示此 enter image description here

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>

控制器方法代码：

 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保存吗？

异常和数据在方法中为null： enter image description here

Answer 1

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

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

并且您的提醒应该返回tr数据，如下图所示。

enter image description here

如果您的AJAX发布的模型数据在null操作返回Save，则替代方法是从序列化数据对象构建数据数组，并仅采用下面所需的内容（所有您$('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');
        }
      });

现在您应该在控制器的Save操作中看到发布的数据。

enter image description here

更新1： 根据评论中记录的错误，您的主键似乎是null到控制器的操作方法。您可以向标记添加隐藏的输入字段，如下所示。

.....

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

....

Answer 2

由于序列化不会返回任何内容，我建议您抓取所需的字段而不是序列化行。变化

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

在你的ajax电话中

data: { 
    Holiday_id : $(this).closest('tr').find(".Holiday_id").val(), 
    Holiday_Name : $(this)...
},

Answer 3

Jquery serialize()不会序列化未设置元素name属性的值。确保为所有输入元素指定了name属性。

您还必须在剃刀代码中指定名称属性。

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

根据JQuery文档

仅将“成功控件”序列化为字符串。没有提交按钮值被序列化，因为表单未使用按钮提交。要使表单元素的值包含在序列化字符串中，元素必须具有name属性。复选框和单选按钮（“radio”或“checkbox”类型的输入）中的值仅在选中时才包含。文件选择元素中的数据未被序列化。

结帐fiddle

您需要在代码中修改的另一件事是跟随行。

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

因为只有那些具有name属性的元素才能序列化，并且代码中只有输入元素。

Answer 4

听起来你的public ActionResult Edit(tbl_HolidayList tbl_holidaylist)方法应该接受JSON并将其返回。

尝试这样的事情并浏览代码以查看失败的地方：

public JsonResult Edit(tbl_HolidayList model)
{
    var hlist = db.tbl_holidaylists.Where(x => x.Id = model.Id).FirstOrDefault();

    hlist = model; // something like this to overwrite the existing values...

    db.SaveChanges();

    return Json(hlist);
}

最后，更改您的AJAX成功回调以查看您收到的内容：

success: function (html) {
    console.log(html);
}

Answer 5

尝试此操作，首先修改视图，使其具有行中所需字段的一些标识符。

@Html.TextBoxFor(modelItem => item.Holiday_Id, new { @class = "holidayId"})
@Html.TextBoxFor(modelItem => item.Holiday_Name,  new { @class = "holidayName" })
@Html.TextBoxFor(modelItem => item.Holiday_Description, new { @class = "holidayDescription" })
@Html.TextBoxFor(modelItem => item.Holiday_date, new { @class = "holidayDate" })

然后将您的ajax调用数据更改为：

var data = {};
data.Holiday_Id = $(this).closest('tr').find(".holidayId").val();
data.Holiday_Name = $(this).closest('tr').find(".holidayName").val();
data.Holiday_Description = $(this).closest('tr').find(".holidayDescription").val();
data.Holiday_Date = $(this).closest('tr').find(".holidayDate").val();

测试警报，如果警报有数据，则在控制器操作方法上设置一个断点，看看参数是否填写完毕。

在jQuery中获取多个Textboxes值 - MVC

5 个答案: