首页 > 解决方案 > 取消选中复选框值后未在 mvc 应用程序中插入

问题描述

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

这是我的代码

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

这是枚举代码

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 });            
}

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

为了更清楚,让我们看看任务图像。

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

在此处输入图像描述

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

在此处输入图像描述

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

标签: arraysajaxasp.net-mvccheckboxenums

解决方案


推荐阅读