代码之家 › 专栏 › 技术社区 › FllnAngl

定义使用哪个editorFor

asp.net-mvc-5 kendo-ui razor jquery c#

FllnAngl · 技术社区 · 7 年前

我正在创建一个应用程序,员工可以在其中选择他们当前所在的日期和不存在的日期。还有,如果他们在场;在什么时候。我正在使用 kendo ui 使用 kendoTimePicker() 选择时间。

我正在开发一个功能,如果在 editorFor . 假设用户星期五不工作,则用户在菜单中选择“缺席”,然后 jQuery 脚本禁用 startVr 和 endVr 计时器。

目前(参考我的脚本),在哪种情况下并不重要 编辑器 您选择“缺席”;这个 startMa 和 endMa 计时器选择器已禁用。

现在回答我的问题:

如何让脚本知道最终用户设置了星期一 编辑器 不在场而不是其他人?

这就是我目前拥有的:

jQuery:

$('#startMa, #startDi, #startWo, #startDo, #startVr, #startZa, #startZo').kendoTimePicker({
    format: "HH:mm",
    min: "8:00",
    max: "17:30",
    value: "8:30",
    interval: 15
});

$('#endMa, #endDi, #endWo, #endDo, #endVr, #endZa, #endZo').kendoTimePicker({
    format: "HH:mm",
    min: "8:00",
    max: "17:30",
    value: "17:00",
    interval: 15
});

$('#maandag, #dinsdag, #woensdag, #donderdag, #vrijdag, #zaterdag, #zondag').change(function () {
    var maStartTimePicker = $('#startMa').data("kendoTimePicker");
    var maEndTimePicker = $('#endMa').data("kendoTimePicker");

    var diStartTimePicker = $('#startDi').data("kendoTimePicker");
    var diEndTimePicker = $('#endDi').data("kendoTimePicker");

    var woStartTimePicker = $('#startWo').data("kendoTimePicker");
    var woEndTimePicker = $('#endWo').data("kendoTimePicker");

    var doStartTimePicker = $('#startDo').data("kendoTimePicker");
    var doEndTimePicker = $('#endDo').data("kendoTimePicker");

    var vrStartTimePicker = $('#startVr').data("kendoTimePicker");
    var vrEndTimePicker = $('#endVr').data("kendoTimePicker");

    var zaStartTimePicker = $('#startZa').data("kendoTimePicker");
    var zaEndTimePicker = $('#endZa').data("kendoTimePicker");

    var zoStartTimePicker = $('#startZo').data("kendoTimePicker");
    var zoEndTimePicker = $('#endZo').data("kendoTimePicker");

    if (this.value == "false" || this.value == "afwezig") {
        maStartTimePicker.enable(false);
        maEndTimePicker.enable(false);
    } else{
        maStartTimePicker.enable(true);
        maEndTimePicker.enable(true);
    }
});

我的观点(就在周一 编辑器 和 timePicker s保持简短):

        <div class="form-group">
            @Html.LabelFor(model => model.maandag, htmlAttributes: new { @class = "control-label col-md-5" })
            <div class="col-md-4">
                @Html.EditorFor(model => model.maandag, new { htmlAttributes = new { @class = "form-control", id = "maandag"} })
                @Html.ValidationMessageFor(model => model.maandag, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <p class="control-label col-md-5"><b>van</b></p>
            <div class="col-md-4">
                <input id="startMa" class="form-control" style="width:280px;"/>
                @Html.ValidationMessageFor(model => model.ma_van, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <p class="control-label col-md-5"><b>tot</b></p>
            <div class="col-md-4">
                <input id="endMa" class="form-control" style="width:280px;" />
                @Html.ValidationMessageFor(model => model.ma_tot, "", new { @class = "text-danger" })
            </div>
        </div>

我试着 onchange function 发送一个 parameter 但出于某种原因 function 未被识别。现在我不知道从哪里开始。

我希望将其全部保留在1个函数中,因为我希望将代码保留为干燥尽我所能。

1 回复 | 直到 7 年前

FllnAngl 7 年前

我想出来了,在艾尔之后,我走上了正确的道路 onchange="schakelAanUit(this)" 并对函数进行了一些更改。

脚本:

function schakelAanUit(a) {
            var selected = a.id;
            console.log(selected);
            //maak een variabel van de timepicker
            var maStartTimePicker = $('#startMa').data("kendoTimePicker");
            var maEndTimePicker = $('#endMa').data("kendoTimePicker");

            var diStartTimePicker = $('#startDi').data("kendoTimePicker");
            var diEndTimePicker = $('#endDi').data("kendoTimePicker");

            var woStartTimePicker = $('#startWo').data("kendoTimePicker");
            var woEndTimePicker = $('#endWo').data("kendoTimePicker");

            var doStartTimePicker = $('#startDo').data("kendoTimePicker");
            var doEndTimePicker = $('#endDo').data("kendoTimePicker");

            var vrStartTimePicker = $('#startVr').data("kendoTimePicker");
            var vrEndTimePicker = $('#endVr').data("kendoTimePicker");

            var zaStartTimePicker = $('#startZa').data("kendoTimePicker");
            var zaEndTimePicker = $('#endZa').data("kendoTimePicker");

            var zoStartTimePicker = $('#startZo').data("kendoTimePicker");
            var zoEndTimePicker = $('#endZo').data("kendoTimePicker");

            if (a.value == "false" || a.value == "Afwezig") {  //Ga door als de geselecteerde waarde "false" of "Afwezig".
                switch (selected) { //Schakel de corresponderende velden uit
                    case 'maandag':
                        maStartTimePicker.enable(false);
                        maEndTimePicker.enable(false);
                        break;
                    case 'dinsdag':
                        diStartTimePicker.enable(false);
                        diEndTimePicker.enable(false);
                        break;
                    case 'woensdag':
                        woStartTimePicker.enable(false);
                        woEndTimePicker.enable(false);
                        break;
                    case 'donderdag':
                        doStartTimePicker.enable(false);
                        doEndTimePicker.enable(false);
                        break;
                    case 'vrijdag':
                        vrStartTimePicker.enable(false);
                        vrEndTimePicker.enable(false);
                        break;
                    case 'zaterdag':
                        zaStartTimePicker.enable(false);
                        zaEndTimePicker.enable(false);
                        break;
                    case 'zondag':
                        zoStartTimePicker.enable(false);
                        zoEndTimePicker.enable(false);
                        break;
                }
            } else if(a.value == "true" || a.value == "Aanwezig") { //Ga door als de geselecteerde waarde "true" of "Aanwezig is"
                switch (selected) { //Schakel de corresponderende velden uit
                    case 'maandag':
                        maStartTimePicker.enable(true);
                        maEndTimePicker.enable(true);
                        break;
                    case 'dinsdag':
                        diStartTimePicker.enable(true);
                        diEndTimePicker.enable(true);
                        break;
                    case 'woensdag':
                        woStartTimePicker.enable(true);
                        woEndTimePicker.enable(true);
                        break;
                    case 'donderdag':
                        doStartTimePicker.enable(true);
                        doEndTimePicker.enable(true);
                        break;
                    case 'vrijdag':
                        vrStartTimePicker.enable(true);
                        vrEndTimePicker.enable(true);
                        break;
                    case 'zaterdag':
                        zaStartTimePicker.enable(true);
                        zaEndTimePicker.enable(true);
                        break;
                    case 'zondag':
                        zoStartTimePicker.enable(true);
                        zoEndTimePicker.enable(true);
                        break;
                }
            }
        };

查看:

        <div class="form-group">
            @Html.LabelFor(model => model.maandag, htmlAttributes: new { @class = "control-label col-md-5" })
            <div class="col-md-4">
                @Html.EditorFor(model => model.maandag, new { htmlAttributes = new { @class = "form-control", id = "maandag", onchange="schakelAanUit(this)" } })
                @Html.ValidationMessageFor(model => model.maandag, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <p class="control-label col-md-5"><b>van</b></p>
            <div class="col-md-4">
                <input id="startMa" class="form-control" style="width:280px;"/>
                @Html.ValidationMessageFor(model => model.ma_van, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <p class="control-label col-md-5"><b>tot</b></p>
            <div class="col-md-4">
                <input id="endMa" class="form-control" style="width:280px;" />
                @Html.ValidationMessageFor(model => model.ma_tot, "", new { @class = "text-danger" })
            </div>
        </div>