通过 Javascript 访问视图模型元素

Question

我正在将一个名为 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>

Answer 1

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

// 在 cshtml 中

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


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

Answer 2

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

});

通过 Javascript 访问视图模型元素

Accessing a view model element through Javascript

javascript

asp.net-mvc

asp.net-mvc-views