PortFolio

@model ViewModel.BookingModel

<style>
    .datepicker {z-index: 1151 !important;}
    /*.clockpicker {z-index: 1151 !important;}*/
</style>

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "frmClient" }))
{

    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-horizontal">
        <div class="form-group">
            @Html.LabelFor(model => model.IDRuang, htmlAttributes: new { @class = "control-label col-md-4" })
            <div class="col-md-8">
                @Html.DropDownListFor(model => model.IDRuang, (IEnumerable<SelectListItem>)ViewBag.RuangList, "-- Select --", new { @class = "form-control input-sm select2", @style = "width: 100%;" })
                @*@Html.EditorFor(model => model.IDRuang, new { htmlAttributes = new { @class = "form-control", @required = "required" } })*@
                @Html.ValidationMessageFor(model => model.IDRuang, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Date, htmlAttributes: new { @class = "control-label col-md-4" })
            <div class="col-md-8">
                @Html.EditorFor(model => model.Date, new { htmlAttributes = new { @class = "form-control date", @required = "required" } })
                @Html.ValidationMessageFor(model => model.Date, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.StartTimeString, htmlAttributes: new { @class = "control-label col-md-4" })
            <div class="col-md-2">
                @Html.EditorFor(model => model.StartTimeString, new { htmlAttributes = new { @class = "form-control time", @required = "required" ,@placeholder = "hh:mm"} })
                @Html.ValidationMessageFor(model => model.StartTimeString, "", new { @class = "text-danger" })
            </div>
            @Html.LabelFor(model => model.EndTimeString, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-2">
                @Html.EditorFor(model => model.EndTimeString, new { htmlAttributes = new { @class = "form-control time", @required = "required", @placeholder = "hh:mm" } })
                @Html.ValidationMessageFor(model => model.EndTimeString, "", new { @class = "text-danger" })
            </div>
        </div>


    </div>
}
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    <button id="btn-save" type="button" class="btn btn-save btn-primary" onclick="save()">Save</button>
</div>

@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
    //datepicker
    $(document).ready(function () {
        $(".date").datepicker({
            format: 'dd-M-yyyy',
            autoclose: true,
        });
    });

    function save() {
        debugger;
        var date = $("#Date").val();
        var starttime = date + " " + $("#StartTimeString").val() + ":00";
        var endtime = date + " " + $("#EndTimeString").val() + ":00";

        var item = { ID: 0, IDRuang: $("#IDRuang").val(), Date: date, StartTime: starttime, EndTime: endtime };

        $.ajax({
            url: '@Url.Action("Create", "Booking")',
            data: JSON.stringify(item),
            type: 'post',
            contentType: 'application/json; charset=utf-8',
            success: function (result) {
                if (result.success) {
                    debugger;
                    alert('Success: ' + result.message);
                    $("#modal-form").modal("hide");
                    TableofList();
                } else {
                    alert('Error: ' + result.message);
                }
            },
            fail: function () {
                alert('Error');
            }
        });
        return false;
    }
</script>