如何使用ajax调用创建动态html表

Question

大家下午好

这是我在asp.net mvc的第一个项目。我想显示的产品列表与可用的库存数量从数据库从控制器到视图。它是正确显示的，但在产品名称中，只有第一个单词显示Ex. (Raw Steel)，然后只显示Raw。但如果我将其更新为RawSteel，则显示为RawSteel.

方法在控制器中获取数据并传递给视图:

[HttpGet]
public JsonResult Get_StkData(int id=0)
{
Session["Outwordid"] = id;
Outword obj_Outword = new Outword();
List<Outword> outword_list = new List<Outword>();
outword_list = obj_stckdb.Get_MaterialwiseStock();
return Json(outword_list, JsonRequestBehavior.AllowGet);
}

function get_Materialstock(id) {
$.ajax({
url: "/SalesStock/Get_StkData/" + id,
type: "GET",
contentType: "application/json;charset=UTF-8",
dataType: "json",
success: function (data) {
var row;
$.each(data, function (i, v1) {
row += "<tr><td><input class='nm form-control' readonly id='nm' value=" + v1.Material_nm + " /></td><td><input class='quantity form-control' readonly id='quantity' value=" + v1.Avail_Qty + " /></td><td><input class='rq form-control' id='rq' value='0' /></td><td style='visibility: collapse'><input class='mid form-control' readonly id='mid' value=" + v1.Material_Id + " /></td></tr>"
});
$("#custTable").append(row);
$('#modal-updateStock').modal('show');
}
});```

产品
名称

<th style="width:150px;text-align:center">Available <br />Quantity</th>
<th style="width:150px;text-align:center">Used <br />Quantity</th>
<th style="visibility:collapse">Material_Id</th>
</tr>

</table>```

对不起，我的英语不好。

Answer 1

使用jquery模板。创建一个普通的jquery/javascript附加行模板是一件痛苦的事情。基本上你要做的(如果你不想使用插件)是给你的主体一个id(在这个例子中是tbodyItems)，然后:

var html = "";
for(var i = 0; i < data.length; i++){
html += "<tr>";
html += `<td>${data[i].something}</td>`;
html += `<td>${data[i].otherSomething}</td>`;
html += `<td>${data[i].anotherSomething}</td>`;
html += "</tr>";
}
$("#tbodyItems").html(html);