2015-06-26 14 views
0

我剛接觸'MVC',並試圖使用'jquery''datepicker'從用戶獲取日期並在主應用程序中將其恢復,請給我一些關於檢索日期回到應用程序(控制器)的指導。下面是我的代碼:從datepicker檢索從cshtml文件到應用程序的值

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> 

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


} 


    } 

SearchModel.cs

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

回答

0

您需要關聯名稱 - 值對與您的輸入元素像這樣

<input class="date-picker" name="departureDate" /> 

然後您將選擇值。

在您的控制器的操作方法中,您需要一個名稱與datapicker輸入元素的名稱完全相同的輸入參數,在這種情況下,它需要爲「departureDate」

0

在你看來不是這樣的:

<input class="date-picker" /> //date picker control 

做這樣的事情:當您執行提交選定的日期

$('.date-picker').datepicker(); // you already have this line 

現在:

@Html.TextBoxFor(m => m.DepartureDate, new {@class = "date-picker"}) 

,並在同一視圖中添加此javascript將被綁定到在模型中提交的DepartureDate

相關問題