![](/img/trans.png)
[英]Add dynamically generated input fields into a JSON object with JQuery
[英]Dynamically add fields and send JSON
我是JS的菜鸟。 我正在制作ASP.NET MVC应用程序。 我有一个局部视图,我想在其中添加新产品。
<fieldset>
<form>
<legend>Add detail</legend>
<div>
<p>
Select categorie:
@Html.DropDownList("Categories");
</p>
</div>
<div>
<p>
Select brand:
@Html.DropDownList("Brands");
</p>
</div>
<div>
<p>
Model name:
@Html.EditorFor(model=>model.part.parts_model)
@Html.ValidationMessageFor(model=>model.part.parts_model)
</p>
</div>
<div>
<p>
Price:
@Html.EditorFor(model=>model.part.parts_price)
@Html.ValidationMessageFor(model=>model.part.parts_price)
</p>
</div>
<div>
<p>
Amount:
@Html.EditorFor(model=>model.part.parts_amount)
@Html.ValidationMessageFor(model=>model.part.parts_amount)
</p>
</div>
<div class="details">
<input type="text" name="details_name" />
<input type="text" name="details_value" />
</div>
<div><p><a class="plus">Add detail</a></p></div>
<div>
<input type="file" name="uploadImage" />
</div>
</form>
<div>
<input type="submit" value="Save" />
</div>
</fieldset>
用户按下“添加详细信息”后,应添加新字段(与类“详细信息”相同)。 用户按下“提交”后,新产品必须发送到服务器端。
我试图添加这样的新字段:
$(function() {
$('form').on('click', 'a.plus', function() {
var fld = $(this).closest('div').prev().find('div.details').last(), add=fld.clone().val('');
fld.after(add)})
})
我正在寻求帮助,谢谢。
编辑:Erdogan Oksuz帮助动态添加字段。 我还是不知道如何将JSON对象发送到服务器端。 再者,是否可以使用Razor元素呢?
楷模:
public class AddPartViewModel
{
public bs_parts part { get; set; }
public List<bs_details> detail { get; set; }
public bs_images image { get; set; }
}
public partial class bs_parts
{
public bs_parts()
{
this.bs_details = new HashSet<bs_details>();
this.bs_images = new HashSet<bs_images>();
this.bs_orders = new HashSet<bs_orders>();
}
public decimal parts_id { get; set; }
public decimal parts_category_id { get; set; }
public decimal parts_brand_id { get; set; }
public string parts_model { get; set; }
public double parts_price { get; set; }
public int parts_amount { get; set; }
public virtual bs_brands bs_brands { get; set; }
public virtual bs_categories bs_categories { get; set; }
public virtual ICollection<bs_details> bs_details { get; set; }
public virtual ICollection<bs_images> bs_images { get; set; }
public virtual ICollection<bs_orders> bs_orders { get; set; }
}
public partial class bs_details
{
public decimal details_id { get; set; }
public string details_name { get; set; }
public string details_value { get; set; }
public decimal details_part_id { get; set; }
public virtual bs_parts bs_parts { get; set; }
}
和我的服务器代码(不要看IDE,它只是为了测试):
[HttpPost]
public ActionResult CreatePart(AddPartViewModel model, HttpPostedFileBase uploadImage)
{
ViewBag.Categories = new SelectList(_db.bs_categories, "categories_id", "categories_name");
ViewBag.Brands = new SelectList(_db.bs_brands, "brands_id", "brands_name");
if (ModelState.IsValid && model.part != null)
{
model.part.parts_brand_id = 3;
model.part.parts_category_id = 3;
_db.bs_parts.Add(model.part);
if (model.detail != null)
{
foreach (var details in model.detail)
{
details.details_part_id = 8;
_db.bs_details.Add(details);
_db.SaveChanges();
}
}
if (ModelState.IsValid && uploadImage!=null)
{
byte[] imageData = null;
using (var binaryReader = new BinaryReader(uploadImage.InputStream))
{
imageData = binaryReader.ReadBytes(uploadImage.ContentLength);
}
model.image.image_part_id = model.part.parts_id;
model.image.images_image = imageData;
_db.bs_images.Add(model.image);
}
_db.SaveChanges();
return RedirectToAction("Main");
}
return View(model);
}
var $myForm=$("#myForm"); $(".plus").off("click").on("click",function(){ $(".details").append(` <div class="details-part"> <input class="details_name" type="text" /> <input class="details_value" type="text" /> </div> `) }); $("#save-form").off("click").on("click",function(){ var detailList=[]; $myForm.find(".details-part").each(function(){ detailList.push({ details_value:$(this).find(".details_value").val(), details_name:$(this).find(".details_name").val() }) }); $myForm.find('[name="details"]').val(JSON.stringify(detailList)) $myForm.submit() });
.plus{ cursor:pointer; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <form id="myForm" method="post" action="/yourpath"> <div class="details"> <div class="details-part"> <input class="details_name" type="text" /> <input class="details_value" type="text" /> </div> </div> <div><p><a class="plus">Add detail</a></p></div> <div> <input type="file" name="uploadImage" /> </div> <input type="hidden" name="details"/> <div> <button id="save-form">Save</button> </div> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.