使用 JavaScript 根据 Viewbag 的值在 MVC 表单上显示或隐藏字段答案

【问题标题】：Show or Hide Field on MVC form base on the value of Viewbag using JavaScript使用 JavaScript 根据 Viewbag 的值在 MVC 表单上显示或隐藏字段
【发布时间】：2021-02-24 11:05:47
【问题描述】：

我试图隐藏或显示在 MVC 表单基础上存储在 Viewbag 中的值。 Viewbag 的值是一个数据库返回。我可以在我的 JavaScript 中看到 Viewbag 的值，但是当我运行表单时，隐藏/显示功能不起作用。我错过了任何人可以帮助的东西

CHTML 代码

  <div class="form-group" id="SharedAssetShared" style="display:none">
       <div class="form-group">
           <div class="row">

               <div class="col-md-2">
                 <label class="control-label ">If yes, what is the Legal basis for sharing? </label>
               </div>
               <div class="col-md-10">
                  <input asp-for="LegalBasisforSharing" class="form-control" />
                    <span asp-validation-for="LegalBasisforSharing" class="text-danger"></span>
                </div>
             </div>
        </div>

Javascript 代码

   $(document).ready(function () {
     divAsset();
   });

   function divAsset() {
    var AssetShared1 = '@ViewBag.AssetShared';

    if (AssetShared1 == 'true') {
    $("#SharedAssetShared").show();
    
   }
    else {
    $("#SharedAssetShared").hide();
    
  }

}

用于存储 Viewbag 值的 C# 代码

public async Task<IActionResult> Edit(int? id)
{
  var asset = await _context.VwAllUserAssets.Where(x => x.Id == id).FirstOrDefaultAsync();
   ViewBag.AssetShared = asset.AssetShared;
 
  return View(asset);
}

【问题讨论】：

什么没用？现在您已删除拼写错误，var AssetShared1 = '@ViewBag.AssetShared'; 在视图中呈现的值是多少？
值 AssetShared1 = true 基于我的 JavaScript 代码，当我运行表单 div SharedAssetShared 时会显示，但没有发生

标签： javascript c# jquery asp.net-mvc

【解决方案1】：

您应该更改 viewbag 分配：

 ViewBag.AssetShared = asset.AssetShared.ToString();

删除

style="display:none"

在你的 javasctipt 中

if (AssetShared1 == 'True') {

$('#SharedAssetShared').css("display","block");
}
    else {
  $('#SharedAssetShared').css('display','none');
    
  }

但是如果你使用 bootstrap 更好用：

if (AssetShared1 == 'True') {
$('#SharedAssetShared').removeClass("d-none");
}
    else {
  $('#SharedAssetShared').addClass("d-none");
    
  }

【讨论】：

【解决方案2】：

尝试在浏览器控制台中记录您的 AssetShared1。

console.log(AssetShared1);

如果它说 True 像我的那样确实将您的代码更改为：

if (AssetShared1 == 'True') {
   $("#SharedAssetShared").show();
}

【讨论】：