C# 从cshtml文件中从datepicker向应用程序检索值

C# 从cshtml文件中从datepicker向应用程序检索值,c#,jquery,asp.net-mvc,datepicker,C#,Jquery,Asp.net Mvc,Datepicker,我是“MVC”新手,一直在尝试使用“Jquery”“datepicker”从用户处获取日期并在主应用程序中检索,请给我一些关于将日期检索回应用程序(控制器)的指导。下面是我的代码: Search.cshtml @model Dropdowns.Models.SearchModel @{ ViewBag.Title = "Search RedSea"; } <head> <title>RedSea holidays</title> <li

我是“MVC”新手,一直在尝试使用“Jquery”“datepicker”从用户处获取日期并在主应用程序中检索,请给我一些关于将日期检索回应用程序(控制器)的指导。下面是我的代码:

Search.cshtml

@model Dropdowns.Models.SearchModel

@{ ViewBag.Title = "Search RedSea"; }
<head>
    <title>RedSea holidays</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <!-- Code to wire up your DatePicker -->
    <script type="text/javascript">
        $(function () {
            // This will make every element with the class "date-picker" into a DatePicker element
            $('.date-picker').datepicker(); //Date Picker script
        })
    </script>
    <script type="text/javascript">
    </script>




</head>
<div class="row">
    <div class="col-sm-4 col-sm-offset-4">

        <h1>Search Red-Sea Holidays</h1>

        <div class="panel panel-default">
            <div class="panel-body">
                @using (Html.BeginForm("Search", "Search", FormMethod.Post, new { role = "form" }))
                {



                    @* State selection dropdown *@
                    <div class="form-group">
                        @Html.LabelFor(m => m.Airport)
                        @Html.DropDownListFor(m => m.Airport, 

                        Model.Airports,

                        "- Please select a Airport -",

                        new { @class = "form-control" })
                    </div>
                    @* Destination Dropdown*@

                    <div class="form-group">
                        @Html.LabelFor(m => m.Destination)
                        @Html.DropDownListFor(m => m.Destination,

                     Model.Destinations,
                       "- Please select a Destination -",

                       new {@class = "form-control"})
                    </div>

                    @* Preferred Accomodation Dropdown *@
                    <div class="form-group">
                     @Html.LabelFor(m => m.PreferredAccomodation)
                     @Html.DropDownListFor(m => m.PreferredAccomodation,

                         Model.PreferredAccomodations,
                       "- Please select Preferred Accomodation -",
                       new {@class = "form-control"})
                    </div>

                    <label>Desired Departure Date</label>
                    <input class="date-picker" /> //date picker control

                    <div class="form-group">
                     @Html.LabelFor(m => m.Duration)
                        @Html.DropDownListFor(m => m.Duration,

                       Model.Durations,
                       "- Please select Preferred Number of Rooms-",
                       new { @class = "form-control" })
                    </div>
                    <div class="form-group">
                     @Html.LabelFor(m => m.Room)
                     @Html.DropDownListFor(m => m.Room,

                         Model.Rooms,
                       "- Please select Preferred Number of Rooms-",
                       new { @class = "form-control" })
                    </div>

                    <button type="submit" class="btn btn-primary">Submit</button>                    
                }

            </div>
        </div>
    </div>
</div>
@model Dropdowns.Models.SearchModel
@{ViewBag.Title=“搜索红海”;}
红海假日酒店
$(函数(){
//这将使类为“date picker”的每个元素都成为DatePicker元素
$('.date picker').datepicker();//日期选择器脚本
})
搜索红海假期
@使用(Html.BeginForm(“Search”、“Search”、FormMethod.Post、new{role=“form”}))
{
@*状态选择下拉列表*@
@LabelFor(m=>m.Airport)
@Html.DropDownListFor(m=>m.Airport,
模型,机场,
“-请选择一个机场-”,
新的{@class=“表单控制”})
@*目的地下拉列表*@
@LabelFor(m=>m.Destination)
@Html.DropDownListFor(m=>m.Destination,
模型。目的地,
“-请选择目的地-”,
新的{@class=“表单控制”})
@*首选住宿下拉列表*@
@LabelFor(m=>m.preferredacomodation)
@Html.DropDownListFor(m=>m.preferredacomodation,
模型。首选住宿,
“-请选择首选住宿-”,
新的{@class=“表单控制”})
预期出发日期
//日期选择器控件
@LabelFor(m=>m.Duration)
@Html.DropDownListFor(m=>m.Duration,
模型。持续时间,
“-请选择首选房间数-”,
新的{@class=“表单控制”})
@LabelFor(m=>m.Room)
@Html.DropDownListFor(m=>m.Room,
样板房,
“-请选择首选房间数-”,
新的{@class=“表单控制”})
提交
}
SearchController.cs

using System.Collections.Generic;
using System.Web.Mvc;
using Dropdowns.Models;
using System;

namespace Dropdowns.Controllers
{
    public class SearchController : Controller
    {
        //
        // 1. Action method for displaying 'Sign Up' page
        //
        public ActionResult Search()
        {
            // Let's get all states that we need for a DropDownList
            var Airports = GetAllAirports();
            var Destinations = getAllDestinations();
            var PreferredAccomodations = getAllAccomodations();
            var Durations = getAllDurations();
            var Rooms = getAllRooms();
            var model = new SearchModel();


            // Create a list of SelectListItems so these can be rendered on the page
            model.Airports = GetSelectListItems(Airports);
            model.Destinations = GetSelectListItems(Destinations);
            model.PreferredAccomodations = GetSelectListItems(PreferredAccomodations);
            model.Durations = GetSelectListItems(Durations);
            model.Rooms = GetSelectListItems(Rooms);
            return View(model);
        }

        //
        // 2. Action method for handling user-entered data when 'Sign Up' button is pressed.
        //
        [HttpPost]
        public ActionResult Search(SearchModel model)
        {
            // Get all states again
            var airports = GetAllAirports();
            var Destinations = getAllDestinations();
            var PreferredAccomodations = getAllAccomodations();
            var Durations = getAllDurations();
            var Rooms = getAllRooms();
            // Set these states on the model. We need to do this because
            // only the selected value from the DropDownList is posted back, not the whole
            // list of states
            model.Airports = GetSelectListItems(airports);
            model.Destinations = GetSelectListItems(Destinations);
            model.PreferredAccomodations = GetSelectListItems(PreferredAccomodations);
            model.Durations = GetSelectListItems(Durations);
            model.Rooms = GetSelectListItems(Rooms);
            // In case everything is fine - i.e. both "Name" and "State" are entered/selected,
            // redirect user to the "Done" page, and pass the user object along via Session
            if (ModelState.IsValid)
            {
                Session["SearchModel"] = model;
                return RedirectToAction("Done");
            }

            // Something is not right - so render the registration page again,
            // keeping the data user has entered by supplying the model.
            return View("Search", model);
        }

        //
        // 3. Action method for displaying 'Done' page
        //
        public ActionResult Done()
        {
            // Get Sign Up information from the session
            var model = Session["SearchModel"] as SearchModel;

            // Display Done.html page that shows Name and selected state.
            return View(model);
        }

  //      public DateTime getDatePickerValue()
 //       {
           // var dt = new DateTime(DateTime.Parse($('#FromDateCollected').val()));
           // alert(dt);
        //    return dt; 
  //      }

        // Just return a list of states - in a real-world application this would call
        // into data access layer to retrieve states from a database.
        private IEnumerable<string> GetAllAirports()
        {
            return new List<string>
            {
                "London Gatwick",
                "Manchester",
                "Birmingham",
                "Belfast",
                "Bristol",
                "Cardiff",
                "East Midlands",
                "Edinburgh",
                "Exeter",
                "Glasgow",
                "London Heathrow",
                "London Luton",
                "Newcastle",
                "London Stansted",
            };
        }
        private IEnumerable<string> getAllDestinations()
        {
            return new List<string>
            {
                "Egypt",
                "Sharm El Sheikh",
                "Hurghada",
                "Marsa Alam",
                "Luxor",
                "Tunisia",
                "Djerba",
                "Tunisia (Mainland)",
            };

        }
        private IEnumerable<string> getAllAccomodations()
        {
            return new List<string>
            {        
            "Red Sea Saver: 4 Sun, Sharm el Sheikh",
            "The Grand Hotel, Sharm el Sheikh",    
            "Hilton Sharm Waterfalls Resort",     
            "Xperience St George Homestay",       
            "Sharm Plaza Hotel",       
            "Sharm Resort Hotel",      
            "Ghazala Gardens Hotel",
            "Ghazala Beach Hotel",         
            "Hilton Sharm Dreams Resort",        
            "Hilton Fayrouz Resort",       
            "Mövenpick Resort",        
            "Baron Palms Resort",        
            "Siva Sharm Resort & Spa",         
            "Sierra Sharm el Sheikh Hotel",
            "Melia Sharm Resort &amp; Spa",        
            "Hilton Sharks Bay Resort",         
            "Xperience Sea Breeze Resort",       
            "Cleopatra Luxury Resort",         
            "Rixos Sharm el Sheikh Hotel",          
            "Park Inn Sharm el Sheikh Resort",          
            "Iberotel Il Mercato Hotel",          
            "Royal Albatros Moderna Hotel",         
            "Iberotel Dahabeya",         
            "Le Meridien Dahab Resort",        
            "The Makadi Spa Hotel",         
            "The Makadi Palace Hotel",         
            "The Grand Makadi Hotel",        
            "Sunwing Makadi Hotel",         
            "Fort Arabesque Resort",        
            "Cleopatra Luxury Resort, Makadi Bay",         
            "Siva Grand Beach Hotel",       
            "The Grand Resort, Hurghada",      
            "The Grand Hotel, Hurghada (B&amp;B)",       
            "The Grand Hotel, Hurghada (All Inclusive)",
            "Jungle Aqua Park Hotel",       
            "Red Sea Saver: 4 Sun, Hurghada",          
            "Red Sea Saver: 5 Sun, Makadi Bay",         
            "Movenpick Resort &amp; Spa El Gouna",       
            "Three Corners Rihana Resort",        
            "The Captain’s Inn", 
            "Sheraton Miramar Resort El Gouna",        
            "Mosaique Hotel",      
            "Fanadir Hotel",        
            "The Oberoi Hotel, Sahl Hasheesh",      
            "Tropitel Sahl Hasheesh Resort",     
            "Sheraton Soma Bay Resort",       
            "The Palace Port Ghalib Resort",        
            "Siva Port Ghalib Resort",         
            "Hilton Marsa Alam Nubian Resort",   
            "Fayrouz Plaza Beach Resort",        
            "Maritim Jolie Ville Kings Island Hotel",        
            "Iberotel Luxor Hotel",       
            "Sonesta St George Hotel",
           };
        }
        private IEnumerable<string> getAllDurations()
        {
            return new List<string>
            {
                    "7 nights",
                    "9 nights",
                    "10 nights",
                    "11 nights",
                    "12 nights",
                    "14 nights",
            };
        }
        private IEnumerable<string> getAllRooms()
        {
            return new List<string>
            {
                "1",
                "2",
                "3",
            };                
        }

        // This is one of the most important parts in the whole example.
        // This function takes a list of strings and returns a list of SelectListItem objects.
        // These objects are going to be used later in the SignUp.html template to render the
        // DropDownList.
        private IEnumerable<SelectListItem> GetSelectListItems(IEnumerable<string> elements)
        {
            // Create an empty list to hold result of the operation
            var selectList = new List<SelectListItem>();

            // For each string in the 'elements' variable, create a new SelectListItem object
            // that has both its Value and Text properties set to a particular value.
            // This will result in MVC rendering each item as:
            //     <option value="State Name">State Name</option>
            foreach (var element in elements)
            {
                selectList.Add(new SelectListItem
                {
                    Value = element,
                    Text = element
                });
            }

            return selectList;
        }


}


    }
using System.Collections.Generic;
using System.Web.Mvc;
using System.ComponentModel.DataAnnotations;
using System;

namespace Dropdowns.Models
{
    public class SearchModel
    {

        // This property will hold a state, selected by user
        [Required]
        [Display(Name = "Airport")]
        public string Airport { get; set; }

        // This property will hold all available states for selection
        public IEnumerable<SelectListItem> Airports { get; set; }

        [Required]
        [Display(Name = "Destination")]
        public string Destination { get; set; }

        public IEnumerable<SelectListItem> Destinations { get; set; }

        [Display(Name = "OutboundDate")]
        public DateTime OutboundDate {get; set;}

        [Required]
        [Display(Name = "PreferredAccomodation")]
        public string PreferredAccomodation { get; set; }

        public IEnumerable<SelectListItem> PreferredAccomodations { get; set; }

        [Required]
        [Display(Name = "Duration")]
        public string Duration { get; set; }

        public IEnumerable<SelectListItem> Durations { get; set; }


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

        [Required]
        [Display(Name = "Rooms")]
        public string Room { get; set; }

        public IEnumerable<SelectListItem> Rooms {get; set;}
    }
}
使用System.Collections.Generic;
使用System.Web.Mvc;
使用下拉菜单。模型;
使用制度;
名称空间下拉列表.控制器
{
公共类SearchController:Controller
{
//
//1.显示“注册”页面的操作方法
//
公共行动结果搜索()
{
//让我们得到所有我们需要的州的下拉列表
var Airports=GetAllAirports();
var Destinations=getAllDestinations();
var PreferredAccomodations=getAllAccomodations();
var Durations=getAllDurations();
var Rooms=getAllRooms();
var模型=新的SearchModel();
//创建SelectListItems列表,以便在页面上呈现这些项目
model.Airports=GetSelectListItems(机场);
model.Destinations=GetSelectListItems(目的地);
model.PreferredAccomodations=GetSelectListItems(PreferredAccomodations);
model.Durations=GetSelectListItems(Durations);
model.Rooms=GetSelectListItems(房间);
返回视图(模型);
}
//
//2.按下“注册”按钮时处理用户输入数据的操作方法。
//
[HttpPost]
公共行动结果搜索(SearchModel)
{
//再次获取所有状态
var airports=GetAllAirports();
var Destinations=getAllDestinations();
var PreferredAccomodations=getAllAccomodations();
var Durations=getAllDurations();
var Rooms=getAllRooms();
//在模型上设置这些状态。我们需要这样做,因为
//只有从DropDownList中选择的值被发回,而不是全部
//国家名单
model.Airports=GetSelectListItems(机场);
model.Destinations=GetSelectListItems(目的地);
model.PreferredAccomodations=GetSelectListItems(PreferredAccomodations);
model.Durations=GetSelectListItems(Durations);
model.Rooms=GetSelectListItems(房间);
//如果一切正常-即输入/选择“名称”和“状态”,
//将用户重定向到“完成”页面,并通过会话传递用户对象
if(ModelState.IsValid)
{
会话[“搜索模型”]=模型;
返回重定向到操作(“完成”);
}
//有些地方不对劲-请重新呈现注册页面,
//通过提供模型保留用户输入的数据。
返回视图(“搜索”,模型);
}
//
//3.显示“完成”页面的操作方法
//
公众行动结果完成()
{
//从会话获取注册信息
var模型=会话[“SearchModel”]作为SearchModel;
//显示显示名称和所选状态的Done.html页面。
返回视图(模型);
}
//公共日期时间getDatePickerValue()
//       {
<input class="date-picker" /> //date picker control
@Html.TextBoxFor(m => m.DepartureDate, new {@class = "date-picker"})
$('.date-picker').datepicker(); // you already have this line
  <input class="date-picker" name="departureDate" />