Не удается увидеть значение даты из элемента <td>в Date1

Question

Я пытаюсь сравнить две даты, которые извлекаются из базы данных.Я делаю все это в ASP. NET MVC.

Вот мой класс модели:

public DateTime? Date1{ get; set; }
public DateTime? Date2 { get; set; }

Контроллер:

public ActionResult 
   {
      Hello test = new Hello();
      return View(test.getStuff());
    }

Просмотры:

 @foreach (var item in Model)
   {
    <td id="date1"> @Html.EditorFor(x => item.Date1)</td>
    <td id="date2">@Html.DisplayFor(x => item.Date2)</td>
   }

   <script type="text/javascript">

    $(document).ready(function () {
        $("td#date1").bind("change", function () {
            var cur_td = $(this).parent("tr#home");
            var date2 = cur_td.find("td#date2").text();
            console.log(date2);
            var date1 = cur_td.find("td#date1").text(); // I don't understand why this is null? 
            console.log(date1);

            if (date1 > date2) {
                alert("Outside of the Editor Box");
            } else {
                alert("Date ok");
            }
     });
});

HTML:

<input class="text-box single-line" data-val="true" data-val-date="The field date1 must be a date." id="item_date1" name="item.Date1" type="date" value="2017-03-31">

<input class="text-box single-line" data-val="true" data-val-date="The field date1 must be a date." id="item_date1" name="item.Date1" type="date" value="2017-04-20">

Вот что выдает консоль Google Chrome: Консоль:

Дата2 отображается, но Дата1 остается пустым, поэтому оператор if всегда пропускает первое условие и переходит прямо к условию else.Я просто хочу сравнить эти две даты, но не могу получить значение даты для Date1 .Любая работа вокруг этого?

Answer 1

У вас есть несколько проблем с вашим кодом.Прежде всего, у вас есть жестко закодированные значения атрибута Id внутри цикла foreach, который создаст одно и то же значение Id для более чем одного элемента.

Поскольку у вас есть несколько элементов, которые вы визуализируете внутри цикла, вы должны рассмотретьиспользуя относительные методы, такие как closest и find.Я также обернул бы tds внутри родительского элемента, который можно использовать для ограничения области при использовании относительных методов.

Я удалил атрибут Id и дал простой атрибут date1 и date2 для каждого tds

<table>
    @foreach (var item in Model)
    {
        <tr>
            <td date1> @Html.EditorFor(x => item.Date1)</td>
            <td date2>@Html.DisplayFor(x => item.Date2)</td>
        </tr>
    }
</table>

Теперь в своем сценарии вы можете использовать этот атрибут для прослушивания события изменения в элементе input, использования 2 значений даты, создания Date объектов из этих строк и выполнения проверки.

$(document).ready(function () {
    $("td[date1] > input").bind("change", function () {

        var $tr = $(this).closest("tr");
        var date1 = $(this).val();
        var date2 = $tr.find("td[date2]").text();

        // Make sure to check date1 and date2 for empty string before trying to parse

        var d1 = Date.parse(date1);
        var d2 = Date.parse(date2);

        if (d1 > d2) {
            console.log("Outside of the Editor Box");
        } else {
            console.log("Date ok");
        }
    });
});