javascript 使用单选按钮MVC隐藏/显示表行

62lalag4  于 2023-09-29  发布在  Java
关注(0)|答案(1)|浏览(104)

我有一个员工名单,我拉它通过我的数据库,我想添加单选按钮隐藏/显示表行在我的名单。
我把这个写在veiw:

@*  ---Active part*@ 
            <div class="form-group">
                <div class="row">
                    <div class="col-md-3">
                        <label>Correct Identification</label>
                    </div>
                    <div class="col=md-4">
                        <div class="form-check form-check-inline">
                            @Html.RadioButton("IsCorrectIdentification", 1, new { @class = "form-check-input" })<span>Yes</span>
                            @Html.RadioButton("IsCorrectIdentification", 0, new { @class = "form-check-input" })<span>No</span>
                        </div>
                    </div>
                    <div class="col-md-5">
                        @Html.ValidationMessageFor(model => model.Active, "", new { @class = "text-danger" })
                    </div>
                </div>

            </div>

我的控制器是:

public ActionResult Active() 
        {
          
            return View();

        }

        [HttpPost]
         public ActionResult Active(Employee Model)
        {
            if (ModelState.IsValid)
            {
                var Employee = db.Employees.Where(x => x.EmID == Model.EmID).SingleOrDefault();
                if (Employee != null)
        }

它是一个活动表,包含:ActiveId(1,2)ActiveNme(是,否)
我的编辑页面控制器代码:

public ActionResult EditEm2(int? id) //add the same data type from the viwe page 
        {
            var Result = db.Employees.Where(x => x.EmID == id).SingleOrDefault(); // create "resultreturn a value to edit page 
            ViewBag.DepartmentData = db.Departments.ToList();
            ViewBag.GenderData = db.Genders.ToList();
            ViewBag.NationalityData = db.Nationalities.ToList();
            return View(Result);

        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult EditEm2(Employee Model)
        {
            if (ModelState.IsValid)
            {
                var Employee = db.Employees.Where(x => x.EmID == Model.EmID).SingleOrDefault();
                if (Employee != null)
                {     // item i want to edit in edit page , Em ID must be can not 
                    Employee.EmID = Model.EmID;
                    Employee.EmNameEN = Model.EmNameEN;
                    Employee.EmNameAR = Model.EmNameAR;
                    Employee.NationalityID = Model.NationalityID;
                    Employee.BirthDate = Model.BirthDate;
                    Employee.EmplymentDate = Model.EmplymentDate;
                    Employee.GenderID = Model.GenderID;
                    Employee.DepartmentID = Model.DepartmentID;
                    Employee.ContactPhone = Model.ContactPhone;
                    db.Entry(Employee).State = System.Data.Entity.EntityState.Modified;
                    db.SaveChanges();
                }

                return RedirectToAction("indexEm");

              
            }
            else
            {

                EditEm2(Model.EmID);

            }
            return View();

我试图从表中提取数据并创建有效的代码,但我并不理解它

iyr7buue

iyr7buue1#

首先,在视图中创建一个单选按钮列表:

@Html.RadioButtonFor(model => model.IsVisible, true) Yes
@Html.RadioButtonFor(model => model.IsVisible, false) No

接下来,添加一个JavaScript函数,根据所选单选按钮值切换表行的可见性:

<script>
  $(document).ready(function () {
      $('input[type="radio"]').change(function () {
          var isVisible = $(this).val() === 'true';
           $('#myTable tr').toggle(isVisible);
      });
  });
</script>

在本例中,我们使用jQuery监听单选按钮选择的更改,并相应地切换表行的可见性。如果选择了“Yes”单选按钮,则var isVisible变量设置为true,否则设置为false。然后我们使用toggle()方法来显示或隐藏ID为“myTable”的表行。
最后,在控制器操作中,可以将IsVisible属性作为参数传递给视图,如下所示:

public IActionResult MyAction()
{
  MyModel model = new MyModel();
  model.IsVisible = true; // Or false, depending on your default state
  return View(model);
}

这将把IsVisible属性传递给视图,然后可以使用该属性有条件地呈现表行。

相关问题