動態添加字段併發送JSON

Question

我是JS的noob。我正在製作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)}) 
}) 

我在尋找這方面的幫助，謝謝。

編輯： 埃爾多安Oksuz幫助動態添加字段。我仍然不知道，如何將JSON對象發送到服務器端。還有一件事，是否可以用剃刀元素來做？

型號：

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

Answer 1

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>