将输入文本从视图传递到控制器

Question

我知道有很多这样的问题，但我真的无法得到答案的解释......这是我的观点......

<script type="text/javascript" language="javascript">
$(function () {
    $(".datepicker").datepicker({ onSelect: function (dateText, inst) { },
        altField: ".alternate"
    });

});
</script>

@model IEnumerable<CormanReservation.Models.Reservation>
@{
ViewBag.Title = "Index";
}

<h5>
    Select a date and see reservations...</h5>
<div>
    <div class="datepicker">
    </div>
    &nbsp;<input name="dateInput" type="text" class="alternate" />
</div>

我想获取输入文本的值...我的输入文本中已经有一个值，因为日期选择器将其值传递给它...我不能做的是将它传递给我的控制器...这里是我的控制器：

  private CormantReservationEntities db = new CormantReservationEntities();
    public ActionResult Index(string dateInput )
    {
        DateTime date = Convert.ToDateTime(dateInput);
        var reservations = db.Reservations.Where(r=>r.Date==date).Include(r => r.Employee).Include(r => r.Room).OrderByDescending(r => r.Date);
        return View(reservations.ToList());
    }

我正在尝试在我的主页中列出用户在我主页的日历中选择的日期期间所做的预订......

Answer 1

我在您的视图中没有看到表单标签...或者您没有显示整个视图？很难说..但要发布到您的控制器，您应该通过 ajax 调用将值发送到控制器或发布模型。在您的情况下，您的模型是 IEnumerable<CormanReservation.Models.Reservation> 并且您的输入是日期选择器，并且看起来不像绑定到您的 ViewModel。您在什么时候将日期发布回服务器？您是否有带有提交按钮的表单，或者您是否有未显示的 ajax 调用？

这是一个 Ajax 请求示例，可以调用它来传递您的日期

$(function () {
    $(".datepicker").onselect(function{
          searchByDate();
        })
    });

});

function searchbyDate() {
   var myDate = document.getElementById("myDatePicker");

    $.ajax({
        url: "/Home/Search/",
        dataType: "json",
        cache: false,
        type: 'POST', 
        data: { dateInput: myDate.value },
        success: function (result) {
            if(result.Success) {
               // do something with result.Data which is your list of returned records
            }
        }
    });
}

你的日期选择器控件需要一些东西来引用它

<input id="myDatePicker" name="dateInput" type="text" class="alternate" />

您的操作可能看起来像这样

private CormantReservationEntities db = new CormantReservationEntities();

public JsonResult Search(string dateInput) {
    DateTime date = Convert.ToDateTime(dateInput);
    var reservations = db.Reservations.Where(r=>r.Date==date).Include(r => r.Employee).Include(r => r.Room).OrderByDescending(r => r.Date);
    return View(reservations.ToList());
    return Json(new {Success = true, Data = reservations.ToList()}, JsonRequestBehaviour.AllowGet());
}

更新

如果您想让它成为发布数据并返回视图的标准帖子，那么您需要进行与此类似的更改。

创建视图模型

public class ReservationSearchViewModel {
    public List<Reservation> Reservations { get; set; }
    public DateTime SelectedDate { get; set; }
}

修改您的控制器操作以初始加载页面，然后能够发布数据返回视图和数据

public ActionResult Index() {
    var model = new ReservationSearchViewModel();
    model.reservations = new List<Reservation>();
    return View(model);
}

[HttpPost]
public ActionResult Index(ReservationSearchViewModel model) {
    if(ModelState.IsValid)    
    var reservations = db.Reservations.Where(r => r.Date = model.SelectedDate).Include(r => r.Employee).Include(r => r.Room).OrderByDescending(r => r.Date);
    }
    return View(model)
}

修改您的视图，以便您可以将表单发布到 Index HttpPost 操作

@model CormanReservation.Models.ReservationSearchViewModel

<h5>Select a date and see reservations...</h5>
@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    @Html.EditorFor(model => model.SelectedDate)
    @Html.EditorFor(model => model.Reservations) // this may need to change to a table or grid to accomodate your data
    <input type="submit" value="Search" />
}