asp.net-core - 如何在用 JavaScript 填充的选项中从数据库中进行选择

Question

我是剃刀页面的新手

我有一个编辑页面 - 它有 2 个选择标签

• 1 - “MissionTime”，另一个 - “MissionDay”。MissionDay 中的选择因 MissionTime 的选择而异。就 JavaScript 而言，它工作得很好！在“创建”页面上，它运行得非常好。

同样在编辑页面上，它在 JavaScript 部分也能很好地工作。 问题是当数据库有信息（）但它没有根据数据库中的值进行选择。

        <div class = "col-sm-4">
            <label asp-for = "Mission.MissionTime" class = "control-label"> </label>

             <select id = "MissionTime" asp-for = "Mission.MissionTime">
                <option value = "0">
                    with no
                </option>
                <option value = "1">
                    Every day
                </option>
                <option value = "7">
                    once a week
                </option>
                <option value = "30">
                    once a month
                </option>
                <option value = "365">
                    Once a year
                </option>
            </select>
        </div> <div class = "col-sm-4">
            <label asp-for = "Mission.MissionDay" class = "control-label"> </label>
            <select id = "MissionDay" asp-for = "Mission.MissionDay">
                <option value = "0">
                    with no
                </option>
            </select>
        </div>

代码 JavaScript -

  <script>

    $ (document) .ready (function () {

        missionTime ();


        $ ("#MissionTime"). Change (function () {
            missionTime ();
        });

        $ ("#MissionDay"). Change (function () {
            var d = new Date ();
            var val = $ (this) .val ();
            if (val == "Sunday") {

                d.setDate (d.getDate () + ((7 - d.getDay ())% 7 + 0)% 7);

            } else if (val == "Monday") {
                d.setDate (d.getDate () + ((7 - d.getDay ())% 7 + 1)% 7);
            } else if (val == "Tuesday") {
                d.setDate (d.getDate () + ((7 - d.getDay ())% 7 + 2)% 7);
            } else if (val == "Wednesday") {
                d.setDate (d.getDate () + ((7 - d.getDay ())% 7 + 3)% 7);
            } else if (val == "Thursday") {
                d.setDate (d.getDate () + ((7 - d.getDay ())% 7 + 4)% 7);
            }
            else if (val == "startMonth") {

                d.setMonth (d.getMonth () + 1, 1);
            }
            else if (val == "middleMonth") {
                // if 15th of current month is over move to next month
                // need to check whether to use> = or just> ie on 15th Jun
                // if you want 15 Jun then use> else if you want 15 Jul use> =
                var dt = d.getDate ();
                d.setDate (15);
                if (dt> = 15) {
                    d.setMonth (date.getMonth () + 1);
                }
                d.setHours (23, 59, 59, 0);
            }
            else if (val == "endMonth") {

                d.setMonth (d.getMonth () + 1);
                d.setDate (0);
            }
            else if (val == "firstYear") {

                d = new Date (new Date (). getFullYear () +1, 0, 1);

            }
            else if (val == "lastYear") {

                d = new Date (new Date (). getFullYear (), 11, 31);
            }

            var dd = String (d.getDate ()). padStart (2, '0');
            var mm = String (d.getMonth () + 1) .padStart (2, '0'); // January is 0!
            var yyyy = d.getFullYear ();

            d = yyyy + '-' + mm + '-' + dd;

            document.getElementById ("firstDate"). value = d;
        }
        );






        function missionTime () {
            var val = $ ("# MissionTime"). val ();
            if (val == "1") {
                $ ("#MissionDay"). Html ("<option value = '0'> without </option>");
                today ();
            } else if (val == "7") {
                $ ("#MissionDay"). Html ("<option value = 'Sunday'> Sunday </option> <option value = 'Monday'> Monday </option> <option value = 'Tuesday'> Tuesday < / option> <option value = 'Wednesday'> Wednesday </option> <option value = 'Thursday'> Thursday </option> ");

                var d = new Date ();
                d.setDate (d.getDate () + ((7 - d.getDay ())% 7 + 0)% 7);
                var dd = String (d.getDate ()). padStart (2, '0');
                var mm = String (d.getMonth () + 1) .padStart (2, '0'); // January is 0!
                var yyyy = d.getFullYear ();

                d = yyyy + '-' + mm + '-' + dd;

                document.getElementById ("firstDate"). value = d;

            } else if (val == "30") {
                . / option> ");
                var d = new Date ();
                d.setMonth (d.getMonth () + 1, 1);
                var dd = String (d.getDate ()). padStart (2, '0');
                var mm = String (d.getMonth () + 1) .padStart (2, '0'); // January is 0!
                var yyyy = d.getFullYear ();
                d = yyyy + '-' + mm + '-' + dd;
                document.getElementById ("firstDate"). value = d;

            } else if (val == "365") {
                $ ("#MissionDay"). Html ("<option value = 'firstYear'> beginning of year </option> <option value = 'lastYear'> end of year </option>");

            } else if (val == "0") {
                $ ("#MissionDay"). Html ("<option value = '0'> without </option>");
                today ();

            }
        }




        function today () {

            var today = new Date ();
            var dd = String (today.getDate ()). padStart (2, '0');
            var mm = String (today.getMonth () + 1) .padStart (2, '0'); // January is 0!
            var yyyy = today.getFullYear ();

            today = yyyy + '-' + mm + '-' + dd;

            document.getElementById ("firstDate"). value = today;
        }






    });
</script> 

代码效果很好！问题是我无法在“MissionDay”中获取数据

我猜这是因为页面首先从数据库中获取数据，然后才运行脚本。有人对如何解决这个问题有任何提示吗？

此致

标签： asp.net-corerazor-pages

Answer 1

问题是当数据库有信息（）但它没有根据数据库中的值进行选择。

请注意，在呈现Select Tag Helper时，您在 JavaScript 客户端上生成的选项不可用。因此，它不会根据传递的数据设置默认选择选项Mission.MissionDay。

为了实现根据存储设置默认选择选项的要求MissionDay，您可以尝试将数据存储在隐藏字段中，然后在 JavaScript 代码中设置选择选项，如下所示。

添加一个隐藏字段id="hf_missionDay"

<label asp-for="Mission.MissionDay" class="control-label"> </label>
<input type="hidden" id="hf_missionDay" value="Mission.MissionDay" />
<select id="MissionDay" asp-for="Mission.MissionDay">
    <option value="0">
        with no
    </option>
</select>

根据隐藏字段中的数据存储设置所选选项

$(document).ready(function() {

    missionTime();

    SetSelectionOfMissionDay();

    //...
    //your code logic here
    //...

SetSelectionOfMissionDay 函数

function SetSelectionOfMissionDay() {
    var mday = $("#hf_missionDay").val();

    $("select#MissionDay option[value='" + mday + "']").attr("selected", true);
    //or
    //$("select#MissionDay").val(mday);
}