Question

我需要根据用户的操作来更新到期日期。我想在javascript中处理此问题，而不是将隐藏字段发送回控制器。

在模型中，我有两个日期。

    [DataType(DataType.Date)]
    public DateTime ExpirationDate { get; set; }

    [DataType(DataType.Date)]
    public DateTime LastUpdatedDate { get; set; }

在表单中，我显示当前的到期日期和此下拉选择框

                <div class="controls col-md-6">
                    <label for="selExpirationPeriod">Select the expiration period</label>
                </div>
                <div class="controls col-md-6">
                    <select id="selExpirationPeriod" class="form-control">
                        <option value=30>30 days</option>
                        <option value=90>90 days</option>
                        <option value=182>Half year</option>
                        <option value=365 selected>Year</option>
                    </select>
                </div>

目标是使用所选期间更新到期日期。

单击“更新”按钮后，我就有了要在其中进行更改的例程。

function updateModel() {

    alert($('#ExpirationDate'));
    return true;
}

它没有显示到期日期，而是显示“ [object Object]”

我需要类似的东西

model.ExpirationDate = DateTime.Today + $selExpirationPeriod.value

我不知道如何从javascript中访问这三个。

摘要：ExpirationDate是模型的属性，它将在返回服务器后保留在数据库中。如果可能的话，我宁愿在客户端中处理计算，只是因为我不知道怎么做。看起来应该很简单，我应该学习它。

更新
解决。我必须添加隐藏字段，以便可以将值发送回去。仅作为显示，它不会返回。

        <div class="control-group">
            <div class="controls col-md-6">
                @Html.HiddenFor(cm => cm.ExpirationDate, new { id = "ExpirationDate" }) @*hidden input so that POST will send the data back*@
                @Html.LabelFor(cm => cm.ExpirationDate)
                @Html.DisplayFor(cm => cm.ExpirationDate, new { @class = "form-control" })
            </div>
        </div>

然后我必须从例程中更新字段。

    document.getElementById("ExpirationDate").value = expireDate;

Answer 1

我认为您应该根据selExpirationPeriod的用户选择来计算过期日期，并根据您想要的model.ExpirationDate = DateTime.Today + $selExpirationPeriod.value之类的信息来计算过期日期

我提供了名为addDaysToDate()的纯JavaScript扩展名，可以将日期编号添加到DateTime.Now中，作为示例，您可以对其进行改进，只需在expBtn中单击expireDate即可通过该Ajax将其传递到服务器。

Date.prototype.addDaysToDate = function(days) { 
    var date = new Date(this.valueOf());
    date.setDate(date.getDate() + days);
    return date;
}  
var expBtn = document.getElementById('makeExpDate');
expBtn.addEventListener("click",function(e){
   var option = document.getElementById("selExpirationPeriod");
   var selectedDay = option.options[option.selectedIndex].value;
   var date = new Date(); 
   var expireDate = date.addDaysToDate(selectedDay);
   alert(expireDate);
},false);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="controls col-md-6">
    <label for="selExpirationPeriod">Select the expiration period</label>
    </div>
    <div class="controls col-md-6">
    <select id="selExpirationPeriod" class="form-control">
      <option value=30>30 days</option>
      <option value=90>90 days</option>
      <option value=182>Half year</option>
      <option value=365 selected>Year</option>
     </select>
</div>
<button id='makeExpDate'>Expire Date</button>

Answer 2

您无法在客户端上更新服务器端属性。您必须进行ajax调用才能更新“到期日期”字段或类似内容。

Answer 3

最终例程如下：

Date.prototype.addDaysToDate = function (days) {
    var date = new Date(this.valueOf());
    date.setDate(date.getDate() + (days * 1)); // coerce days to be an int
    return date;
}
function updateModel() {
    var option = document.getElementById("selExpirationPeriod");
    var selectedDay = option.options[option.selectedIndex].value;
    var date = new Date();
    date.setHours(0, 0, 0, 0);   // remove the time portion

    var expireDate = date.addDaysToDate(selectedDay);
    document.getElementById("ExpirationDate").value = expireDate;
    return true;
}

如何根据用户选择更新模型上的属性？

3 个答案: