使用jQuerydate上的Ajax更改，将Form Collection的“重新加载”在BeginForm内部进行

Question

我的剃须刀 PendingBillsByWeekView具有一个形式/型号，带有- DatePicker (m => m.date)＆amp;Table data。

从模型收集内部，当datepickers日期更改时，

1. 如何重新加载该日期的表单数据？
2. BeginForm中的AJAX按钮或链接是正确的方式吗？还是i 需要使用Ajax.BeginForm？我还希望在datepicker中设置新日期。

---

@model Models.BillsModel
@using (Html.BeginForm())
{
//@Html.AntiForgeryToken()
 <h3>Bills Table, please select Date Below</h3>
 <div id="dates">
    //Is label Correct or should I use Input/TextBox??
    // HOW to submit this data change as AJAX and Reload the Form?
    <label id="DATEPICKER_BILLS">Bills Date: @Html.EditorFor(model => model.StartDate)</label>
 </div >
 <div id="TaBle_Bills">
    // Table Bills records I want to reload, how to refresh this form
 </div >
<input type="submit" class="btn blue" name="ReviewedBillsButton" value="Save Draft" />
 }

---

此返回是否正确重新加载表格？

[HttpPost]
public ActionResult UpdateDateFilters(DateTime dateStart, DateTime dateEnd = null)
{
   if (dateEnd == null) dateEnd = dateStart.AddDays(2);
   if (Request.IsAjaxRequest())
       {
         return PartialView( "_Partial", bModel );
       }
   else
   {         
        DateTime start = DateTime.ParseExact(dateStart.Substring(0,10), "yyyy-MM-dd", CultureInfo.InvariantCulture);
        DateTime end = DateTime.ParseExact(dateEnd.Substring(0, 10), "yyyy-MM-dd", CultureInfo.InvariantCulture);
        BillsModel bModel = BillFilterd(start, end);
        return View(bModel); // 
    }
  }
 [HttpPost] //Save on Submit
 public ActionResult PendingBillsByWeekView(BillsModel model)
 {
  // the startdate never makes it back!
 }

---

如何在选择的每个日期重新加载新账单的日期选择器。编辑 - 信用@stephen

$("StartDate").change(function() {
       var dateVal = $("StartDate").val()
       $.ajax({
           url: "/home/UpdateDateFilters",
           type: "get" // or POST?
           data:  dateVal  //$this.val()
       }).done(function(data) {
           alert(data);
           // not working, how do I remove old and attach new?
           $("#TaBle_Bills").html(data);
       }).fail(function() {
           alert('error');
       });
   });

---

添加了模型

// this class creates an Invoice based on the selected range of dates.
public class BillsModel
{
    public int Id { get; set; }
    [Required] // Date for the bills on that date
    public DateTime Date { get; set; } 
    [Required] // From StartDate
    public DateTime SelectedStartDate { get; set; } 

    [Required] // To EndDate, if this is not set, only bills for that date
    public DateTime? SelectedEndDate { get; set; } 
    [Required(ErrorMessage = "Review is required")]
    [StringLength(4000)]
    public string ReviewNotes { get; set; }
    public int ClientInvoiceId { get; set; }
    //Table with list of records Bills
    public virtual List<Bill> Bills { get; set; }
    public decimal? TotalCost { get; set; }
}
public class Bill
{
    public int Id { get; set; }
    [Required]
    public DateTime BillDate { get; set; } // Date of bill  
    [StringLength(40)]
    public string InvoiceItem { get; set; }
    public decimal? Cost { get; set; }    
}

Answer 1

首先，我更喜欢使用GET，因为您仅获取数据，因此您的ajax调用将像这样

   $("#StartDate").change(function () {
                var dateVal = $("#StartDate").val();
                $.ajax({
                    url: "/home/UpdateDateFilters",
                    type: "get" ,
                    data:  {dateStart : dateVal,dateEnd:null}  
            }).done(function(data) {
                alert(data);
                $("#TaBle_Bills").html(data);
            }).fail(function() {
                alert('error');
            });
            });

jquery中的注意，我们使用#获取特定ID的数据和行动

[HttpGet]
public ActionResult UpdateDateFilters(DateTime dateStart, DateTime? dateEnd)
{  
}

您无法将日期设置为null，因此我们使用nullable ?将默认值设置为null