$("#addRow").click(function ()
{
@{
new VLSM_Model().LansValues.Add(new Lans());
}
var rowCount = parseInt($("#totalLans").val());
rowCount ;
$("#totalLans").val(rowCount);
var html = '';
html = '<div id="inputFormRow" style="width: 35%">';
html = '<div >';
html = '<input type="number" id="[' (rowCount - 1) '].InitialLanValues" placeholder="Enter number of Hosts" autocomplete="off" style="width: 30%" required>';
html = '<div >';
html = '<button id="removeRow" type="button" style="margin-right: 5px">Remove Network</button>';
html = '</div>';
html = '</div>';
$('#newRow').append(html);
});
$(document).on('click', '#removeRow', function ()
{
var rowCount = parseInt($("#totalLans").val());
rowCount--;
$("#totalLans").val(rowCount);
$(this).closest('#inputFormRow').remove();
});
$(document).ready(function () {
$("#createButton").click(function ()
{
var inputData = $(this).serializeArray();
$.ajax(
{
type: "POST", //HTTP POST Method
url: "VLSM_Controller/Create", // Controller/View
data: inputData,
success : function(response) {
console.log(response)
}
});
});
}); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>VLSM CALCULATE</h1>
<hr />
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group" style="width: 35%">
<label asp-for="IP_Address" class="control-label"></label>
<input asp-for="IP_Address" class="form-control" />
<span asp-validation-for="IP_Address" class="text-danger"></span>
</div>
<br/>
<div class="form-group">
<div id="inputFormRow" style="width: 35%">
<div class="input-group mb-3">
<br/>
<div class="input-group-append"></div>
</div>
</div>
<div id="newRow">
<input type="hidden" id="totalLans" value="0" />
</div>
<button id="addRow" type="button" class="btn btn-info">Add Network</button>
</div>
<span asp-validation-for="LansValues" class="text-danger"></span>
<br/>
<div class="form-group" style="width: 35%">
<label asp-for="cidrValue" class="control-label"></label>
<input asp-for="cidrValue" class="form-control" />
<span asp-validation-for="cidrValue" class="text-danger"></span>
</div>
<br/>
<div class="form-group">
<input type="submit" value="Calculate VLSM" class="btn btn-info" id="createButton"/>
</div>
</form>
<div>
<a asp-action="VlsmResult">Back to List</a>
</div>正如您從代碼中看到的那樣，我創建了動態輸入欄位，但是我很難將資料傳遞給控制器??，并將資料用于控制器內部的計算。
我的問題是如何將資料從使用 ajax 動態創建的輸入欄位傳遞到控制器，以及如何將傳遞的資料用于任何型別的計算。
uj5u.com熱心網友回復：
模型系結系統將按名稱查看屬性。因此，您需要將 html 中的 name 屬性與模型屬性名稱匹配。也就是說，您動態添加的輸入欄位應該具有 name 屬性：name="LansValues[index].InitialLanValues"。
這是一個完整的作業演示：
模型：
public class VLSM_Model
{
public string IP_Address { get; set; }
public List<Lans> LansValues { get; set; }
public int cidrValue { get; set; }
}
public class Lans
{
public int InitialLanValues { get; set; }
}
看法：
修改type="submit"為type="button"，否則ajax不會命中。
@model VLSM_Model
<h1>VLSM CALCULATE</h1>
<hr />
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group" style="width: 35%">
<label asp-for="IP_Address" class="control-label"></label>
<input asp-for="IP_Address" class="form-control" />
<span asp-validation-for="IP_Address" class="text-danger"></span>
</div>
<br />
<div class="form-group">
<div id="inputFormRow" style="width: 35%">
<div class="input-group mb-3">
<br />
<div class="input-group-append"></div>
</div>
</div>
<div id="newRow">
<input type="hidden" id="totalLans" value="0" />
</div>
<button id="addRow" type="button" class="btn btn-info">Add Network</button>
</div>
<span asp-validation-for="LansValues" class="text-danger"></span>
<br />
<div class="form-group" style="width: 35%">
<label asp-for="cidrValue" class="control-label"></label>
<input asp-for="cidrValue" class="form-control" />
<span asp-validation-for="cidrValue" class="text-danger"></span>
</div>
<br />
<div class="form-group">
@*change here*@
<input type="button" value="Calculate VLSM" class="btn btn-info" id="createButton" />
</div>
</form>
<div>
<a asp-action="VlsmResult">Back to List</a>
</div>
JS：
將動態 html 更改為name="LansValues[' (rowCount - 1) '].InitialLanValues"并更改var inputData = $(this).serializeArray();為 var inputData = $('form').serializeArray();.
@section Scripts
{
<script>
$("#addRow").click(function ()
{
@*@{new VLSM_Model().LansValues.Add(new Lans());}*@
var rowCount = parseInt($("#totalLans").val());
rowCount ;
$("#totalLans").val(rowCount);
var html = '';
html = '<div id="inputFormRow" style="width: 35%">';
html = '<div >';
//change id attribute to name attribute and modify the name
html = '<input type="number" name="LansValues[' (rowCount - 1) '].InitialLanValues" placeholder="Enter number of Hosts" autocomplete="off" style="width: 30%" required>';
html = '<div >';
html = '<button id="removeRow" type="button" style="margin-right: 5px">Remove Network</button>';
html = '</div>';
html = '</div>';
$('#newRow').append(html);
});
$(document).on('click', '#removeRow', function ()
{
var rowCount = parseInt($("#totalLans").val());
rowCount--;
$("#totalLans").val(rowCount);
$(this).closest('#inputFormRow').remove();
});
$(document).ready(function () {
$("#createButton").click(function ()
{
var inputData = $('form').serializeArray(); //change here...
$.ajax(
{
type: "POST", //HTTP POST Method
url: "Home/Create", // Controller/View
data: inputData,
success : function(response) {
console.log(response)
}
});
});
});
</script>
}
控制器：
public class HomeController : Controller
{
[HttpPost]
public IActionResult Create(VLSM_Model model)
{
//...
}
}
筆記：
其實如果你只是使用表單提交，它也可以很好地作業。如果您使用表單提交，只需更改您的原始代碼：name="LansValues[' (rowCount - 1) '].InitialLanValues" 在$("#addRow").click()函式中。然后洗掉該$("#createButton").click()功能。無需更改任何其他代碼。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/326301.html