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

时间:2012-05-11 03:06:01

标签: asp.net-mvc-3 view controller

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

<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>

我想得到输入文本的值...我的输入文本中已经有一个值因为datepicker传递了它的值...我不能做的就是将它传递给我的控制器...这里是我的控制者:

  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());
    }

我想在我的主页上列出用户在我主页的日历中选择的日期所做的预订....

1 个答案:

答案 0 :(得分:0)

我在您的视图中看不到表单标记...或者您没有显示整个视图?很难说..但要发布到您的控制器,您应该通过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
            }
        }
    });
}

你的datepicker控件需要通过

引用它
<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());
}

<强>更新

如果您想将此作为发布数据并返回视图的标准帖子,则需要进行类似的更改。

创建ViewModel

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" />
}