使用JavaScript動態添加html.TextAreaFor

-1

我正在嘗試將文本區域元素（使用TextAreaFor）添加到模式主體。爲了演示，我有兩個按鈕。當單擊一個TextBoxFor元素被添加到模態主體。當單擊另一個按鈕時，將添加一個TextAreaFor元素。使用JavaScript動態添加html.TextAreaFor

TextBoxFor工作正常，但我有問題讓文本區域呈現正常。我只是一個JavaScript初學者，但看起來textarea元素的結束標記正在導致字符串在達到最終'>'之前結束。

所以按鈕被點擊，並添加HTML：

btn.onclick = function() { 
$('.modal-body').html('<label>Question Label</label>@Html.TextAreaFor(c => c.Response, new { @class = "form-control" })'); 
modal.style.display = "block"; 
}

然而，這將呈現爲：

$('.modal-body').html('<label>Question Label/label><textarea class="form-control" cols="20" id="Response" name="Response" rows="2">X 
</textarea>

隨着 'X' 是被我收到「未捕獲的SyntaxError：無效或意外的標記「錯誤。任何建議如何解決這將非常感激。

來源

2017-03-20 user7435243

它應該告訴你哪一行語法錯誤是...點擊它，它應該帶下劃線。這對你來說應該很簡單。 – NewToJS

我確切地知道錯誤在哪裏（我把X放在哪裏）。但我不知道如何讓@ Html.TextAreaFor（...）呈現爲一個字符串。我覺得它應該很容易，但一直困在這一點。 – user7435243

任何原因你不能只使用' X'而不是textareafor？ – Pete

你可以嘗試像

$(document).ready(function(){ 
 
    var counter=0; 
 
    $("#addButton").click(function() { 
 
    
 
    if(counter>=5){ 
 
    alert("you can insert only 5 textareas")} 
 
    else{ 
 
    
 
var newTextBoxDiv = $(document.createElement('div')) 
 
     .attr("id", 'TextBoxDiv'); 
 

 
newTextBoxDiv.after().html('<label>Question Label </label>' + '<textarea rows=5 cols=50 name="textbox" id="textbox" value="" >'); 
 

 
    newTextBoxDiv.appendTo("#TextBoxesGroup"); 
 
    counter++; 
 
    } 
 
    }) 
 
    
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='TextBoxesGroup'> 
 
    <div id="TextBoxDiv1"> 
 
    <label>Textbox #1 : </label><input type='textbox' id='textbox1' > 
 
    </div> 
 
</div> 
 
<input type='button' value='Add Button' id='addButton'>

計數器變量，以確保不超過加5個文字區域。

來源

2017-03-20 12:18:10

使用JavaScript動態添加html.TextAreaFor

回答

相關問題