通过 Javascript 访问视图模型元素答案

【问题标题】：Accessing a view model element through Javascript通过 Javascript 访问视图模型元素
【发布时间】：2023-04-04 09:53:01
【问题描述】：

我正在向我的视图传递一个名为 HomeViewModel 的模型。 HomeViewModel 有一个名为 isNext 的 bool 属性。在我看来，我只想显示 isNext 值。所以基本上我有这个：

@model Impoware.Models.HomeViewModel

@{
    ViewBag.Title = "View Contest";
}

<h2>View Current Contest</h2>

@using (Html.BeginForm())
{
    <table>
        <tr>
            <td>@Html.LabelFor(m => m.isNext)</td>
            <td></td>
            <td align="right">Submenu goes here</td>
        </tr>
    </table>
}

在同一个视图中，我有一个简单的 div，onclick 调用 setIsNext(true)。本质上，我想根据单击 <div> 的内容将 isNext 的值设置为 true/false，但似乎 javascript 无法找到 elemntbyId('isNext') （alert('2') 永远不会被调用）。有什么想法吗？

<script>
    var setIsNext = function(input){
        alert(input);
        var output = document.getElementById('isNext');

        if (output != null) {
            output.innerHTML = input;
            alert('2');
        }
    }
</script>

【问题讨论】：

在你看来，你在哪里打电话给setIsNext？同样在您看来，如果您想设置可以添加到 @Html.InputForm(m => m.isNext) 中的值，您只有一个 LabelFor
@Html.LabelFor() 不显示属性的值 - 它显示属性的名称..并且它不生成任何 id 属性

标签： javascript asp.net-mvc asp.net-mvc-views

【解决方案1】：

LabelFor 将为您的属性名称而不是该属性的值呈现标签。如果要设置它的值，以便在提交表单时更新值可用，则应使用输入字段。如果您不喜欢显示可见的输入字段，您可以考虑使用隐藏字段。

@using (Html.BeginForm())
{
    <table>
        <tr>
            <td> @Html.HiddenFor(f=>f.isNext)</td>                
            <td align="right">Submenu goes here</td>
        </tr>
    </table>
    <div class="myDiv" data-val="true">Yes</div>
    <div class="myDiv" data-val="false">No</div>
}

您可以读取点击按钮的 data-val 属性值并将其设置为隐藏输入。

$(function () {

    $(".myDiv").click(function(e) {
            $("#isNext").val($(this).data("val"));
    });

});

此外，如果您希望在 UI 中为布尔属性设置一个复选框，并希望根据 div 点击更新该复选框的值，您可以这样做。

@using (Html.BeginForm())
{
   @Html.CheckBoxFor(f=>f.isNext)
   <div class="myDiv" data-val="true">Yes</div>
   <div class="myDiv" data-val="false">No</div>
}

当点击 div 时，您还需要更新检查状态

$(function () {

    $(".myDiv") .click(function (e) {
            var v = $(this).data("val");
            $("input[name='isNext']").val(v);
            $("#isNext").attr("checked", v);;
        });

});

【讨论】：

所以我将我的行改为 @Html.HiddenFor(m => m.isNext, new { id = "isNext" }) 但问题是我无法阅读这个字段回到我的控制器中（如下） public ActionResult Viewcontest(bool isNext) { // 做一些工作 } 尽管我的 javascript 函数将它设置为视图中的正确值，我的 isNext 始终为假（我已经使用警报仔细检查了这个视图中的函数调用）。

【解决方案2】：

您需要在视图文件中指定 ID

//在cshtml中

@Html.LabelFor(m => m.isNext, new { id = "MyNextId" })


var output = document.getElementById('MyNextId');

【讨论】：