javascript - 如何将不同的数据类型模型值从 html 传输到控制器

Question

我正在尝试使用 java 脚本函数将值从 html 模型值带到控制器操作方法。我试图将值从 html 带到操作方法，但不起作用。空值被传递到参数模型

我的模型 Employee 模型中有以下对象

public List<string> Employee { get; set; }
public bool IsSick { get; set; }
public bool IsDeducted { get; set; }
public decimal DayOffHrs { get; set; } = 0.00M;

员工 html

 var emp = $('#dropdownEmployee option:selected');


 var model = {
            employee: $('#dropdownEmployee option:selected') ,
            issick:  $('#isdayoff').val(),
            isdeducted: $('#'isdeducted').val(),
            dayoffhrs: $('#'dayoffhrs').val()      
        }
  
    
            
        var url = "/Attendance/BulkUpdate"
        console.log(Emp);

        $.ajax({
            type: "POST",
            url: url,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(model),
            success: function (model) {
            },
            failure: function (response) {
                console.log(response.responseText);
            },
            error: function (response) {
                console.log(response.responseText);
            }
        });

 <td><input type="checkbox" id="isdayoff" value="true" asp-for="IsDayOff" /> </td>
 <div class="controls col-sm-8">
                                        <select id="dropdownEmployee" multiple class="form-control" asp-for="Employee" asp-items="@ViewBag.Employees" data-role="select"></select>
                                    </div>
 <td>
                                                <select id='isdeducted' name="IsDeducted" asp-for="IsDeducted" data-role="select">
                                                    <option value="false">No</option>
                                                    <option value="true">Yes</option>
                                                </select>
                                                
                                            </td>

<td><input type="text" id='dayoffhrs'  asp-for="DayOffHrs" class="col-sm-5" maxlength="5" /></td>



 

控制器动作方法

 [HttpPost]
        public IActionResult BulkUpdate([FromBody] Employee model)
        {
        }

标签： javascripthtmlasp.net-core

Answer 1

我根据您的代码进行了测试，同时将值存储在 formdata

模型：

public class Employee
{
    public List<string> employee { get; set; }
    public bool IsSick { get; set; }
    public bool IsDeducted { get; set; }
    public decimal DayOffHrs { get; set; } = 0.00M;
}

看法：

@model Employee
<td>
    <div>
        <label asp-for="IsSick"></label>
        <input type="checkbox" id="isdayoff" value="true" asp-for="IsSick" />
    </div>
</td>
<td>
    <div>
        <label asp-for="employee"></label>
        <div class="controls col-sm-8">
            <select id="dropdownEmployee" multiple class="form-control" asp-for="employee" asp-items="@ViewBag.Employees" data-role="select"></select>
        </div>
    </div>
</td>
<td>
    <div>
        <label asp-for="IsDeducted"></label>
        <select id='isdeducted' name="IsDeducted" asp-for="IsDeducted" data-role="select">
            <option value="false">No</option>
            <option value="true">Yes</option>
        </select>
    </div>
</td>

<td>
    <div>
        <label asp-for="DayOffHrs"></label>
        <input type="text" id='dayoffhrs' asp-for="DayOffHrs" class="col-sm-5" maxlength="5" />
    </div>
</td>

<input id="btn" type="button" class="btn btn-danger" value="submit" />
@section scripts{ 
<script>
    $("#btn").on("click", function () {
        var formdata = new FormData();
        var values = $('#dropdownEmployee').val();
        values.forEach(function (value,i) {
            formdata.append("employee[" + i + "]", value)
        })
        formdata.append("IsSick", $('#isdayoff').is(':checked'));
        formdata.append("IsDeducted", $('#isdeducted').val());
        formdata.append("dayoffhrs", $('#dayoffhrs').val());

        var url = "/Attendance/BulkUpdate"

        $.ajax({
            type: "POST",
            url: url,
            dataType: "json",
            processData: false,
            contentType: false,
            data: formdata,
            success: function (model) {
            },
            failure: function (response) {
                console.log(response.responseText);
            },
            error: function (response) {
                console.log(response.responseText);
            }
        });
    })

</script>
} 

控制器：

[HttpPost]
public IActionResult BulkUpdate(Employee model)
{
    return View();
}

结果：