c# - Retrieve value from datepicker to the application from the cshtml file -
i'm new 'mvc' , have been trying use 'jquery' 'datepicker' date user , retrieve in main application, please give me guidance on retrieving date application (controller). below code:
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 wire datepicker --> <script type="text/javascript"> $(function () { // make every element class "date-picker" 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 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 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 displaying 'sign up' page // public actionresult search() { // let's states need dropdownlist var airports = getallairports(); var destinations = getalldestinations(); var preferredaccomodations = getallaccomodations(); var durations = getalldurations(); var rooms = getallrooms(); var model = new searchmodel(); // create list of selectlistitems these can rendered on 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 handling user-entered data when 'sign up' button pressed. // [httppost] public actionresult search(searchmodel model) { // states again var airports = getallairports(); var destinations = getalldestinations(); var preferredaccomodations = getallaccomodations(); var durations = getalldurations(); var rooms = getallrooms(); // set these states on model. need because // selected value dropdownlist posted back, not 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 fine - i.e. both "name" , "state" entered/selected, // redirect user "done" page, , pass user object along via session if (modelstate.isvalid) { session["searchmodel"] = model; return redirecttoaction("done"); } // not right - render registration page again, // keeping data user has entered supplying model. return view("search", model); } // // 3. action method displaying 'done' page // public actionresult done() { // sign information session var model = session["searchmodel"] searchmodel; // display done.html page shows name , selected state. return view(model); } // public datetime getdatepickervalue() // { // var dt = new datetime(datetime.parse($('#fromdatecollected').val())); // alert(dt); // return dt; // } // return list of states - in real-world application call // data access layer retrieve states 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 & 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&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 & 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", }; } // 1 of important parts in whole example. // function takes list of strings , returns list of selectlistitem objects. // these objects going used later in signup.html template render // dropdownlist. private ienumerable<selectlistitem> getselectlistitems(ienumerable<string> elements) { // create empty list hold result of operation var selectlist = new list<selectlistitem>(); // each string in 'elements' variable, create new selectlistitem object // has both value , text properties set particular value. // 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 { // property hold state, selected user [required] [display(name = "airport")] public string airport { get; set; } // property hold available states 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;} } }
you need associate name-value pair input elements this
<input class="date-picker" name="departuredate" /> and select value.
in controller's action method, need input parameter name same name of datapicker input element, in case needs "departuredate"
Comments
Post a Comment