【问题标题】:Passing values from ViewModel to JavaScript将值从 ViewModel 传递到 JavaScript
【发布时间】:2023-03-09 22:31:01
【问题描述】:

我正在制作一个 MVC 5 Web 应用程序,我希望将一个值从我的 ViewModel 传递给我的 JavaScript 中的函数

目的是在用户选择“否”选项时隐藏标签/Div,并在用户将选项更改回“是”时使其重新出现

这是我目前所拥有的:

视图模型:

public enum BasicAnswer
        {
            [Display(Name= "Yes")]
            Yes,
            [Display(Name= "No")]
            No
        }
 public BasicAnswer userDiscomfortResponse { get; set; }

查看:

   <div id="UserDiscomfortAnswerLabel">
            <label id="somelabel">Did you have any discomfort with an exercise?</label>
            <div class="Answer1" onclick=feedback data-id='@Model.userDiscomfortResponse'>
                @Html.EnumDropDownListFor(m => m.userDiscomfortResponse, new { @class = "form-control" })
        </div>
    </div>

    <div class="Question2">
        <label id="UserDiscomfortExerciseLabel">What exercise was the issue?</label> 
        <div class="Answer2">
            @Html.DropDownListFor(m => m.discomfortExercise, Model.UsersSelectedExcerises, new { @class = "form-control" })
        </div>
    </div>

JavaScript:

function feedback() {
    var feedback = $(this).attr('data-id'); 
    if (feedback == "Yes") {
        document.getElementById("UserDiscomfortExerciseLabel").style.display = "block"
    }
    else {
        document.getElementById("UserDiscomfortExerciseLabel").style.display = "none"
    }
}

我遇到的问题是 var feedback = $(this).attr('data-id') 结果为未定义,因此标签在点击时隐藏但不再显示。

有什么我错过的吗?

提前谢谢你。

【问题讨论】:

  • 它是否正在加载带有空数据 ID 的页面?在我看来,您应该将 onchange 移到下拉列表中并调用反馈 onload(在事件处理程序中将其更改为“#userDiscomfortResponse”)
  • 否,一旦页面加载,data-id='@Model.userDiscomfortResponse' 的值为“Yes”
  • 在 Javascript 中是否 $(this) 对 DIV 进行评估?还是“这个”是别的东西。另外,尝试 $(this).data("id") 而不是 attr("id")
  • 你能提供一些关于你的建议的示例代码吗?

标签: javascript c# jquery model-view-controller


【解决方案1】:

好的,尝试删除 div 上的 onclick 并添加:

$(document).ready(function()
{
    function feedback() {
        var feedback = $('#userDiscomfortResponse').val()
        if (feedback == "Yes") {
            document.getElementById("UserDiscomfortExerciseLabel").style.display = "block"
        }
       else {
           document.getElementById("UserDiscomfortExerciseLabel").style.display = "none"
       }
    }

    $("#userDiscomfortResponse").change(feedback);
    feedback();
}

【讨论】:

  • 复制并粘贴您的示例得到:未捕获的 ReferenceError: $ is not defined On line 1
  • 您使用 JQuery 的权利 - 那么您是否在包含 jquery.js 后没有创建 javascript?
  • 我不知道了哈哈 xD 道歉,我对这一切都很陌生,我错过了一个组件吗?
  • 之前包含javascript的HTML页面需要在答案中包含javascript。
  • 我已经用答案中的那个替换了我原来的 JavaScript 代码,两段代码都存储在一个 .JS 文件中 在我的 HTML 中,我有以下内容: 我错过了什么吗?
猜你喜欢
  • 1970-01-01
  • 2023-03-27
  • 1970-01-01
  • 2022-01-21
  • 1970-01-01
  • 1970-01-01
  • 2019-11-24
  • 2016-06-04
  • 2015-09-19
相关资源
最近更新 更多