Question

我将一个Model传递给我的视图，称为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（＆＃39; isNext＆＃39;）（警报（＆＃39; 2＆＃39） ;）永远不会被调用）。有什么想法吗？

<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

2 个答案: