我是一名新程序员,我试图通过使用form.serialise发送新行来使用ajax在数据库中添加一行。我要发送的模型新行是用于创建视图的主要模型的部分。
我知道有一种繁琐的方法来遍历每一列以匹配数据库中表的列,但是,我想使用更简单的选项-使用ajax。
这是我的模型的一部分,用于创建视图:
public ActionResult CreateCheck(Appliance NewAppliance)
{
db.Appliances.InsertOnSubmit(app);
db.SubmitChanges();
var appIndb = (from a in db.Appliances
where a.ApartmentID == app.ApartmentID
select a).LastOrDefault();
var applianceNew= appRepo.Add(appIndb );
return Json(new { success = true, appliance =
applianceNew},
JsonRequestBehavior.AllowGet);
}
这是我的控制器方法:
<form id="hidden-form-appliance">
@Html.AntiForgeryToken()
<div class="form-horizontal">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<br />
<div class="flex-container">
<div class="flex-container flex-vericalDirection">
<p class="removeMargin">Appliance Name </p>
@*@Html.LabelFor(model => model.NewAppliance.ApplianceName, htmlAttributes: new { @class = "control-label col-md-2" })*@
<div class="inputModal" id="applianceNameDiv">
@Html.EditorFor(model => model.NewAppliance.ApplianceName, new { htmlAttributes = new { @class = "form-control", id = "applianceName" } })
@Html.ValidationMessageFor(model => model.NewAppliance.ApplianceName, "", new { @class = "text-danger" })
</div>
</div>
<div class="flex-container flex-vericalDirection">
<p class="removeMargin"> Unit</p>
<div class="inputModal">
@{ var unitsList = new List<SelectListItem>();
foreach (var item in Model.AllApartmentsForID)
{
var unitType = new SelectListItem();
unitType.Value = item.ApartmentID.ToString();
unitType.Text = item.ApartmentNumber;
unitsList.Add(unitType);
}
}
@Html.DropDownListFor(model => model.NewAppliance.ApartmentID, unitsList, "Select Unit", new { @class = "form-control", @id = "ap_ApartmentID" })
@Html.ValidationMessageFor(model => model.NewAppliance.ApartmentID, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="flex-container">
<div class="flex-container flex-vericalDirection">
<p class="removeMargin"> Make</p>
<div class="inputModal">
@Html.EditorFor(model => model.NewAppliance.Make, new { htmlAttributes = new { @class = "form-control", id = "editedDistrict" } })
@Html.ValidationMessageFor(model => model.NewAppliance.Make, "", new { @class = "text-danger" })
</div>
</div>
<div class="flex-container flex-vericalDirection">
<p class="removeMargin"> Model</p>
<div class="inputModal">
@Html.EditorFor(model => model.NewAppliance.Model, new { htmlAttributes = new { @class = "form-control", id = "editedDistrict" } })
@Html.ValidationMessageFor(model => model.NewAppliance.Model, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="flex-container flex-vericalDirection removeMargin">
<p class="removeMargin">Description</p>
<textarea class="text-area-input-form">
@Model.NewAppliance.DescriptionDetails
</textarea>
</div>
<div class="flex-container">
<div class="flex-container flex-vericalDirection">
<p class="removeMargin"> Store</p>
<div class="inputModal">
@Html.EditorFor(model => model.NewAppliance.Store, new { htmlAttributes = new { @class = "form-control", id = "editedAddress" } })
@Html.ValidationMessageFor(model => model.NewAppliance.Store, "", new { @class = "text-danger" })
</div>
</div>
<div class="flex-container flex-vericalDirection">
<p class="removeMargin"> Cost</p>
<div class="inputModal">
@Html.EditorFor(model => model.NewAppliance.Cost, new { htmlAttributes = new { @class = "form-control", id = "editedAddress" } })
@Html.ValidationMessageFor(model => model.NewAppliance.Cost, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="flex-container flex-vericalDirection">
<p class="removeMargin"> Installed On</p>
<div class="inputModal">
@Html.EditorFor(model => model.NewAppliance.DateOfInstallment, new { htmlAttributes = new { @class = "form-control", id = "datepicker" } })
@Html.ValidationMessageFor(model => model.NewAppliance.DateOfInstallment, "", new { @class = "text-danger" })
</div>
</div>
</div>
</form>
这是我的观点-表单中的字段均为ALL html.editorfor或hiddenfor-我未指定 任何一个的名字 他们:
$('.btn.btn--
primary.saveNewAppliance').on('click',
function () {
alert($('#hidden-form-appliance').serialize());
$.ajax({
url: '@Url.Action("CreateCheck", "Appliance")',
data:{ NewAppliance: $('#hidden-form-
appliance').serialize()},
success: function(data) {
if (data) { // check if data is defined
if (data.success) { // if success is true
alert("It Worked!");
}
}
}
});
这是js:
<form id="hidden-form-appliance">
<input name="__RequestVerificationToken" type="hidden"
value="MLW1wQJnd0WnHyzEaOJO6kAEVm-r_9YYhDliWfy28Qxs6-
Q6kabsK48RICT5uAIhtJ1WQ3Hrq6S-axQwIoMw5F32t6webLXW-
T7npEad1lkn-7dVDO6HFyGcXsJpv2ayhiithucgvg3Ro2kd8Pk5MQ2"
/>
<input class="form-control text-box single-
line" id="applianceName"
name="NewAppliance.ApplianceName"
type="text" value="" />
<select class="form-control" data-
val="true" data-val-number="The field
ApartmentID must be a number."
id="ap_ApartmentID"
name="NewAppliance.ApartmentID"><option
value="">Select Unit</option>
</select>
<input class="form-control text-box single-
line" id="editedDistrict"
name="NewAppliance.Make" type="text"
value="" />
<input class="form-control text-box single-
line" id="editedDistrict"
name="NewAppliance.Model" type="text"
value="" />
<div class="flex-container flex-vericalDirection
removeMargin">
<p class="removeMargin">Description</p>
<textarea class="text-area-input-form">
</textarea>
<input class="form-control text-box single-
line" id="editedAddress"
name="NewAppliance.Store" type="text" value=""
/>
<input class="form-control text-box single-
line" data-val="true" data-val-
number="The field Cost must be a
number." id="editedAddress"
name="NewAppliance.Cost" type="text"
value="" />
<input class="form-control text-box single-
line" data-val="true" data-val-date="The field
DateOfInstallment must be a date." data-val-
required="The DateOfInstallment field is
required." id="datepicker"
name="NewAppliance.DateOfInstallment" type="date"
value="" />
</form>
更新:这是源代码:
Appliance.ApplianceName=jhbk&Appliance.ApartmentID=1388&Appliance.ApplianceID=0&Appliance.Make=hhj&Appliance.Model=hku&Appliance.DescriptionDetails=bhjk&Appliance.Store=gjh&Appliance.Cost=789&Appliance.DateOfInstallment=09%2F08%2F2009
我收到错误“值不能为空”。 (设备模型发送为空)。
更新2:
console.log($('#hidden-form-appliance')。serialize())产生:
{{1}}
任何人都可以帮忙吗?谢谢
答案 0 :(得分:0)
我没有为其指定名称
您似乎指定了编辑者的id属性,例如:
@Html.EditorFor(model => model.NewAppliance.Cost, new { htmlAttributes = new { @class = "form-control", id = "editedAddress" } })
什么可能会影响最终的请求数据对。由于您使用的是强类型编辑器,因此请尽量不要明确指定此html属性。如果您需要在js / css中进行操作,请尝试操作CSS类。