在jQuery中获取多个Textboxes值 – MVC
我是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)显示此信息 
chtml代码：
@* @Html.Label("ID") *@ @Html.Label("Name") @Html.Label("Description") @Html.Label("Date") @foreach (var item in Model) { if (Convert.ToDateTime(item.Holiday_date).Year.ToString() == DateTime.Now.Year.ToString()) { @* @Html.TextBoxFor(modelItem => item.Holiday_Id, new { style = "display: none; width:170px; height:15px" }) @Html.DisplayFor(modelItem => item.Holiday_Id) *@ @Html.TextBoxFor(modelItem => item.Holiday_Name, new { id = "", style = "display: none; width:170px; height:15px" }) @Html.DisplayFor(modelItem => item.Holiday_Name) @Html.TextBoxFor(modelItem => item.Holiday_Description, new { id = "", style = "display: none; width:170px; height:15px" }) @Html.DisplayFor(modelItem => item.Holiday_Description) @Html.TextBoxFor(modelItem => item.Holiday_date, new { id = "", style = "display: none; width:170px; height:15px" }) @Html.DisplayFor(modelItem => item.Holiday_date) @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" } ) } }
控制器方法代码：
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 Holiday_date { get; set; } } }
你能告诉我如何获取jQuery data的文本框值以保存它吗？
exception和数据在方法中为null： 
因为您正在尝试序列化最近的tr的整个内容并且它还包含非输入控件，因此您将获得alert(data) null 。 因此，尝试仅像下面那样序列化输入控件
var data = $(this).closest('tr').find('input').serialize(); alert(data);
并且您的警报应该返回tr数据，如下图所示。
如果您的AJAX发布的模型数据在Save操作中返回null ，则替代方法是从序列化数据对象构建数据数组，并且仅采用下面所需的内容（ $('a.Save').click(function () { ...的以下所有代码） $('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操作中看到发布的数据。
更新1：根据评论中记录的错误，您的主键似乎是控制器的操作方法为null 。 您可以向标记添加隐藏的输入字段，如下所示。
..... @Html.DisplayFor(modelItem => item.Holiday_Id) @Html.HiddenFor(modelItem => item.Holiday_Id); ....
因为序列化没有返回任何东西我建议你抓住你想要的字段而不是序列化行。 更改
data = $(this).closest('tr').serialize();
在你的ajax电话中
data: { Holiday_id : $(this).closest('tr').find(".Holiday_id").val(), Holiday_Name : $(this)... },
Jquery serialize（）不会序列化未设置元素name属性的值。 确保为所有输入元素指定了name属性。
您还必须在剃刀代码中指定name属性。
@Html.TextBoxFor(modelItem => item.Holiday_Name, new { id = "", name="HolidayName", style = "display: none; width:170px; height:15px" })
根据JQuery文档
只有“成功控件”被序列化为字符串。 没有提交按钮值被序列化，因为表单未使用按钮提交。 要使表单元素的值包含在序列化字符串中， 该元素必须具有name属性。 复选框和单选按钮（“radio”或“checkbox”类型的输入）中的值仅在选中时才包括在内。 文件选择元素中的数据未序列化。
看看这个小提琴
您需要在代码中修改的另一件事是跟随行。
var data = $(this).closest('tr').find('input').serialize();
因为只有那些具有name属性的元素才能序列化，并且代码中只有输入元素。
听起来像你的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); }
试试这个，首先修改你的视图，为行中需要的字段提供一些标识符。
@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();
测试警报，如果警报包含数据，则在控制器操作方法上设置断点，并查看参数是否已填写。