Themed grid and multiple details forms

Jan 6, 2015 at 7:27 PM
Hi all,

I'd like to pop-up different detail forms using different view models. I'm able to partially achieve this using a shared detail from definition:
@{ Html.DetailFormFor(Ajax, m => m.xxxx, .....}
and by supplying different views by underlying controllers.

But if there is a postback from the detail form, it submits URL based on Action and Controller name from the detail form definition.

I have no idea how to define another detail form using a different model (probably I could encapsulate different submodels into on integrating view model. But still I'd need to distinguish a form the postback has been posted from.

Thanks, pf
Coordinator
Jan 7, 2015 at 9:11 AM
Sorry, I don't understand your problem. The DetailFormFor helper is designed to work with the same model used for each grid row or with a subclas of it that contains some fields more, since the detail form fields are synchronized with the row fields(copied into the row associated with the detail form once received from the server). If you need to open a detail form with a completely different model I think you should proceed manually by using the jquery dialog. If you give me some detail more I'll explain how to proceed.
Jan 7, 2015 at 9:23 AM
I apologize for unclear question. I've rather complex model and in a grid I show just basic features. To edit such model, I'd like to split detail edition into multiple details forms (using the same model). And I'd like to have some additional pop-up forms showing information like code-lists in yours sortable lists having different view models not directly related do grid's view model and sending postbacks to controllers to sort.

I hope I shed some light on my intention.
Thanks, pf
Jan 8, 2015 at 1:16 PM
Hi Frank,

following your advice, I tried to pop-up jQuery dialog containg sortable list manualy.
  1. View:
  <input type="button" id="btnShowRights" class="Theme-RoundButtonWithImageNoText" title="List of all user rights"/>

    $(document).on("click", "#btnShowRights", function (e) {
      url = "/Users/Role/RightsList/";
      $("#dialog-rights").dialog('open');
      return false;
    });

    $("#dialog-rights").dialog({
      title: 'User Rights',
      autoOpen: false,
      resizable: false,
      width: 800,
      show: { effect: 'slide', direction: "left" },
      modal: true,
      draggable: true,
      open: function (event, ui) {
        $(".ui-dialog-titlebar-close").show();
        $(this).load(url);
      }
    });
  1. Controller
    [HttpGet]
    public ActionResult RightsList(string returnUrl)
    {
      int totalPages;
      List<KeyValuePair<LambdaExpression, OrderType>> order = null;
      RightsListViewModel model = new RightsListViewModel();
      model.Rights = RightsListViewModel.FetchRightsPage(DbContext, this.CoreModel, PageDim, out totalPages, ref order);
      return PartialView("RightsList", model);
    }

    [HttpPost]
    public ActionResult RightsList(RightListViewModel model)
    {
      if (ModelState.IsValid)
      {
        ModelState.Clear();
        if (model.RightsOrdering != null && model.RightsOrdering.Count > 0)
        {
          model.Rights = model.Rights.ApplyOrder(model.RightsOrdering).ToList(); 
        }
      }
      return PartialView(model);
    }
It somehow works, at least at get phase: dialog is shown and partial view with correct content is loaded.

But sorting submitting post requests does not work resp. it works, but sorted content is shown in another tab in the browser, not in (the same) poped-up dialog.
How to achieve to show resorted content in the pop-up dialog as well?

Thanks, pf
Coordinator
Jan 8, 2015 at 1:52 PM
Edited Jan 8, 2015 at 7:58 PM
The point is that the content you load in the dialog box must be enclosed intoa an ASP.net MVC ajax form instead of a simple form, so that when the form is submitted it is submitted via ajax. Moreover, the content received via ajax must be parsed to add jquery validation, otherwise client validation doesn't work.

However, you may simply use the DetailFormFor helper. You need just one detail form, but different detail links. Each link must specify a different parameter to select which part of the model you want to show.

Say, you have 4 different detail types. You may use an unique ViewModel that is a subclass of the grid item ViewModel but with 4 properties more:
publi class OverallModel: GridItemModel
{
public Detail1 Section1 {get; set;}
public Detail2 Section2 {get; set;}
public Detail3 Section3 {get; set;}
public Detail4 Section4 {get; set;}
}
Where Detail1...4 are classes containing the properties more to show in each detail.

You need also 4 different views...one for each detail type.

you will have different detail links:
.Add(m => m.id, FieldFeatures.Hidden,
                displayTemplate: _S.H<ToDoView>(
                    @<span>  
                        @item.DetailLink(Ajax, "Edit Details 1", DetailType.Edit, "ToDoSubTasks", "Home",
                            new { id = item.ViewData.Model.id, detailSelect= 1 }, null)
                        @item.DetailLink(Ajax, "Edit Details 2", DetailType.Edit, "ToDoSubTasks", "Home",
                            new { id = item.ViewData.Model.id, detailSelect= 2 }, null)
                        @item.DetailLink(Ajax, "Edit Details 3", DetailType.Edit, "ToDoSubTasks", "Home",
                            new { id = item.ViewData.Model.id, detailSelect= 3 }, null)
                       @item.DetailLink(Ajax, "Edit Details 4", DetailType.Edit, "ToDoSubTasks", "Home",
                            new { id = item.ViewData.Model.id, detailSelect= 4 }, null)
                    </span>)),
Clearly the action methot must have two parameters now: id and detailSelect. The secon parameter selects ViewModel to fill and View to be used.
The action that receives the post must be based on the OverallModel class and it is able to understand which detail type submitted the the form by looking at which of the Section1...Section4 is not null.