lightbox viewmodel

Scheduler ASP.NET MVC
#1

how can I associate the lightbox form with a complex type view model (event object + some other object)?

#2

Hi,
do you use built-in scheduler’s lightbox, or a custom form like one described here scheduler-net.com/docs/lightbox. … a_lightbox ?

#3

I use custom form like this: but I need to pass another object besides “event”
usually I what do is create a “viewmodel” that has multiple objects and create a view that strong-typed with the “viewmodel” so I can access to mitlple objects in the view
@model SmartField.Data.Event

@{
ViewBag.Title = “Appointments”;
}

@using(Html.BeginForm(“Save”, “Scheduler”, new { id = “schedulerForm” })){
@Html.HiddenFor(m => m.id)

    <div>
        @Html.TextAreaFor(m=>m.text)
    </div>    
    <div>
        From
        @Html.TextBoxFor(m=>m.start_date, new { @type = "datetime" })
        To
        @Html.TextBoxFor(m=>m.end_date, new { @type = "datetime" })
        Appointment With
        @Html.DropDownListFor(m=>m.field1, new SelectList(Enumerable.Empty<SelectListItem>()), "-- Select type --", new Dictionary<string, object> { { "data-native-menu", "true" } })
        Location
        @Html.DropDownListFor(m=>m.field2, new SelectList(Enumerable.Empty<SelectListItem>()), "-- Select type --", new Dictionary<string, object> { { "data-native-menu", "true" } }) 
  
        Attempt Type
        @Html.DropDownListFor(m=>m.AttemptTypeID, new SelectList(Enumerable.Empty<SelectListItem>()), "-- Select type --", new Dictionary<string, object> { { "data-native-menu", "true" } })
    </div>
    
    <p>
        <input type="submit" name="actionButton" value="Save" />
        <input type="button" onclick="lightbox.close()/* helper-method, only available in custom lightbox */" value="Close" />
        <input type="submit" name="actionButton" value="Delete" />
    </p>
}
#4

Is there an answer to this question? I am facing the same situation.

#5

Hi,
you should be able to provide any ViewModel you need into the custom form

If you used the example from our package (Scheduler.MVC5 project),
You should be able to find the related controller (MVCFormInLightboxController.cs) and you can see it contains the following actions

  • public ActionResult Index() - this is the page itself
  • public ActionResult LightboxControl(Event ev) - scheduler calls this to load the form
  • public ContentResult Data() - data loading
  • public ActionResult Save(int? id, FormCollection actionValues) - both scheduler and the custom form submits changes here
  • public ActionResult CustomSave(Event changedEvent, FormCollection actionValues) - saving changes from custom form
  • public ContentResult NativeSave(Event changedEvent, FormCollection actionValues) - saving other changes made in scheduler

Inside the LightboxControl you invoke the View where the custom form is defined:

c#:

public ActionResult LightboxControl(Event ev)
{
    var current = Repository.Events.SingleOrDefault(e => e.id == ev.id);
    if (current == null)
       current = ev;
    return View(current);
}

LightboxControl.cshtml:

@model Scheduler.MVC5.Model.Models.Event

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<body>
    @using(Html.BeginForm("Save", "MVCFormInLightbox", new { id = "schedulerForm" })){   
      ...
        
        <p>
            <input type="submit" name="actionButton" value="Save" />
            <input type="button" onclick="lightbox.close()/* helper-method, only available in custom lightbox */" value="Close" />
            <input type="submit" name="actionButton" value="Delete" />
        </p>
    }
</body>
</html>

You can change the type of the model of LightboxControl view, as well as the code that processes form submit - this is completely on your end and works outside the scope of the scheduler.
Here is a complete demo:
https://files.dhtmlx.com/30d/7400503c12b1d6846f0f50ba75871dbc/Scheduler.MVC5.CustomModel.zip