將演員添加到DVD庫列表

因此，我有一個DVD對象，其中包含演員列表。我有一個添加視圖（其他所有內容都很好），但我一直試圖讓演員添加到DVD上的列表。我試圖將JavaScript集成到它中，爲每個演員創建新的文本框，但實際上並沒有比第一個節省更多。任何建議/建議？將演員添加到DVD庫列表

這裏是爲演員列表視圖代碼：

<div id="actorsContainer"> 
     <div class="form-group"> 
      @Html.LabelFor(model => model.dvd.ActorList, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.TextBoxFor(model => model.dvd.ActorList, new { htmlAttributes = new { @class = "form-control", id = "actors", name = "actors[]" } }) 
       <input type="button" class="btn-sm btn-default col-md-2" id="addActor" value="+" /> 
       @Html.ValidationMessageFor(model => model.dvd.ActorList, "", new { @class = "text-danger" }) 
      </div> 
     </div> 
    </div>

這裏是我目前使用的JavaScript的：

<script> 
    document.getElementById("addActor").onclick = function() { 
     var div = document.getElementById("actorsContainer"); 
     var input = document.createElement("input"); 
     input.type = "text"; 
     input.name = "actors[]"; 
     div.appendChild(document.createElement("br")); 
     div.appendChild(input); 
    } 
</script>

更新：

這裏是代碼我也爲控制器。也許這跟它有關係？也只有一個addActor按鈕存在，但希望添加一個文本框每次點擊添加多個actor。

 [HttpGet] 
    public ActionResult AddDVD() 
    { 
     DVDListVM vm = new DVDListVM(); 

     return View(vm); 
    } 

    [HttpPost] 
    public ActionResult AddDVD(DVDListVM model) 
    { 
     if (ModelState.IsValid) 
     { 
      DVD newDVD = new DVD(); 

      newDVD.Title = model.dvd.Title; 
      newDVD.ReleaseYear = model.dvd.ReleaseYear; 
      newDVD.DirectorName = model.dvd.DirectorName; 
      newDVD.Studio = model.dvd.Studio; 
      newDVD.MPAARating = model.dvd.MPAARating; 

      newDVD.ActorList = model.dvd.ActorList; 

      newDVD.UserNotes = model.dvd.UserNotes; 
      newDVD.UserRating = model.dvd.UserRating; 

      _dvdManager.AddDVD(newDVD); 

      return RedirectToAction("Collection"); 
     } 
     else 
     { 
      return View(model); 
     } 
    }

來源

2016-11-21 Sparksong

你是什麼意思的第一個？這個代碼是否在你的頁面上重複了？你有多個AddActor按鈕？如果是這樣，你的邏輯將不會工作，因爲你有多個ID。 –

我的意思是視圖代碼中的@ Html.TextBoxFor中的第一個文本框。這給了我一個初始文本框，但我試圖通過點擊「+」來使用JavaScript來創建更多的文本框。但我試圖找出如何讓在創建的文本框中編寫的演員實際添加到演員列表中。我知道我做錯了，但我不知道該怎麼做。 – Sparksong

如果ActorList是一個集合，你需要收集這樣在創建每個記錄輸入：

@for (int i = 0; i < model.dvd.ActorList.Count; i++) { @Html.TextBoxFor(model => model.dvd.ActorList[i], new { htmlAttributes = new { @class = "form-control"} }) }

我不給ID和name屬性，因爲剃鬚刀產生值這個屬性自動。

如果您想動態創建輸入，您需要檢查由剃鬚刀呈現的html以及它如何處理集合的索引。我使用asp.net的MVC核心，這就是電子郵件輸入這是一個集合的一部分，怎麼看起來HTML：

<input name="EmailAddresses[1].EmailAddress" class="form-control emailInputAddress" id="EmailAddresses_1__EmailAddress" type="email" value="">

要創建輸入動態我得到的元素索引，增加它，然後創建元素的副本與新指數。

var newEmailInput = $(".emailInput:last").clone(true)[0].outerHTML; 
    //get index generated by razor and increment it 
    var newEmailInputIndex = newEmailInput.match(/(\[([^\]]+)\])/i)[0].match(/\d+/i)[0]; 
    newEmailInputIndex++; 
    newEmailInput = newEmailInput.replace(/(\[([^\]]+)\])/ig, "[" + newEmailInputIndex + "]") 
          .replace(/(_([^_]+)__)/ig, "_" + newEmailInputIndex + "__"); 

    $(this.lastEmailInput).after(newEmailInput);

來源

2016-11-21 17:55:12

謝謝。這有很大幫助。我想我現在更瞭解它了。我會盡力讓它與之合作。 – Sparksong

將演員添加到DVD庫列表

回答

相關問題