Question

我的剃刀PendingBillsByWeekView的表格/模型带有 - DatePicker (m => m.date)＆amp; Table data。

从From Model集合中，当datepickers日期更改时，

如何重新加载该日期的表格帐单数据？
BeginForm内的AJAX按钮或链接是否正确？或者我需要使用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!
 }

如何Ajax日期选择器为每个选定日期重新加载新账单。已编辑 - 来自@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)
{  

}

你不能将dateEnd设置为null所以我们使用nullable ?它会将默认值设置为null

在JqueryDate上使用Ajax更改，强制在BeginForm中重新加载表单集合

1 个答案: