取消选中后,复选框值未插入mvc应用程序

时间:2018-10-15 18:24:32

标签: arrays ajax asp.net-mvc checkbox enums

我有一个复选框和一个文本框,现在当我选中该复选框并在那时在文本框中写入文本时,会插入复选框值和文本框值,但是当我取消选中该复选框并在那时将文本写入文本框中时,值未插入数据库中。

这是我的代码

我为复选框和文本框使用了枚举值

这是枚举代码

public enum ChassisJobTypeEnum
{
    LinerChange = 1,
    ChainSetChange = 2  
}

这是视图设计代码

<div class="form-group row">
    <label class="col-sm-3 col-form-label">Change Linear</label>
    <div class="col-sm-3">
        <input type="checkbox" class="form-group" id="ChassisJob@((int)ChassisJobTypeEnum.LinerChange)_Checked" placeholder="" />
    </div>
    <div class="col-sm-3">
        <input type="text" class="form-group" id="ChassisJob.@((int)ChassisJobTypeEnum.LinerChange)_OtherJob" placeholder="" />
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-3 col-form-label">Change Chain Set</label>
    <div class="col-sm-3">
        <input type="checkbox" class="form-group" id="ChassisJob@((int)ChassisJobTypeEnum.ChainSetChange)_Checked" placeholder="" />
    </div>
    <div class="col-sm-3">
        <input type="text" class="form-group" id="ChassisJob.@((int)ChassisJobTypeEnum.ChainSetChange)_OtherJob" placeholder="" />
    </div>
</div>

<div class="form-group row">
    <div class="col-sm-12">
        <button type="submit" class="btn btn-primary" id="submit-form">Submit</button>
    </div>
</div>

现在,当那时提交表单时,ajax正在调用控制器

$('form').submit(function (event) {
 event.preventDefault();

 var chassisJobs = [];
 chassisJob = {
     ChassisJobsTypeId: @((int)ChassisJobTypeEnum.LinerChange),                                 
     Checked: $("#ChassisJob@((int)ChassisJobTypeEnum.LinerChange)_Checked").prop('checked'),
     OtherJob: document.getElementById("ChassisJob.@((int)ChassisJobTypeEnum.LinerChange)_OtherJob").value,                                 
 };
 chassisJobs.push(chassisJob);

 chassisJob = {
    ChassisJobsTypeId: @((int)ChassisJobTypeEnum.ChainSetChange),
    Checked: $("#ChassisJob@((int)ChassisJobTypeEnum.ChainSetChange)_Checked").prop('checked'),
    OtherJob: document.getElementById("ChassisJob.@((int)ChassisJobTypeEnum.ChainSetChange)_OtherJob").value,
 };
 chassisJobs.push(chassisJob);

var serviceJobData = {
    'Id': document.getElementById("Id").value,                            
    'ChassisJob': chassisJobs
    };

     $.ajax({
         type: "POST",
         url: '/ServiceJob/AddUpdate',
         data: serviceJobData,
         dataType: "json",
         success: function (data) {
             if (data.success == true) {
                   alert("Data has been update successfully");

                 //RefreshTable();
                 location.reload(true);

      // set focus on edit form
      document.getElementById("service-job-list").scrollIntoView();

      //reste form
      var frm = document.getElementsByName('service-job-form')[0];
      frm.reset();

  }
  else {
        alert("Unable to insert data")
     }
             error: function (xhr, ajaxOptions, thrownError) {
             alert('Failed to add Detail.');
        }
   });
});

这里是控制器,其中addupdate方法在“提交”按钮上调用。

[HttpPost]
public IActionResult AddUpdate(ServiceJobModel model)
{
    ServiceJob serviceJob = new ServiceJob();
    bool iSInsertData = true;

    var chassisJobs = _Db.ChassisJob.Where(x => x.ServiceJobId == model.Id).ToList();
    if (chassisJobs.Any())
    {
        _Db.ChassisJob.RemoveRange(chassisJobs);
        _Db.SaveChanges();
    }

    return Json(new { success = true });            
}

现在,这是我尝试过的代码。

为更加清晰,请看任务图片。

当我选中复选框并在那时在文本框中输入值时,请正确插入数据,而在获取时,它将正确显示复选框和文本框的值。

enter image description here

现在,当我取消选中该复选框并在文本框中输入值时,此时不会插入数据,并且在获取时它不会显示任何内容。

enter image description here

如果您有任何问题要理解,请随时提出。

0 个答案:

没有答案