Ticket (Solved)

Dialog box for dashboard

I have a user dashboard, that I need to prompt a user for information. A dialog seems like a nice way to do this, so here is the setup.

how it flows: 1. user navigates to the dashboard 2. dashboard controller returns the dashboard view and view model 3. if the view model's IsInfoNeeded == true show the dialog 4. dialog gets view and view model from dashboard controller/RequiredInfo 5. when data is entered, dialog posts back to the dashboard 6. controller/RequiredInfo with view model holding entered data controller returns user to dashboard and saves data.

I hope this is clear and works well here on orchard pros

here is the code:

public class DashboardController : Controller, IUpdateModel

    public ActionResult Index()        {
        DashboardViewModel viewModel = new DashboardViewModel();
        viewModel .IsInfoNeeded = true;

        var shape = _orchardServices.New.Dashboard((Data: viewModel));
        return new ShapeResult(this, shape);

    public ActionResult RequiredInfo()        {
        RequiredInfoViewModel viewModel = new RequiredInfoViewModel();
        var shape = _orchardServices.New.RequiredInfo(Data: viewModel );
        return new ShapeResult(this, shape);

    public ActionResult RequiredInfo(RequiredInfoViewModel viewModel)
        return RedirectToAction("Index", "Dashboard");

//the dashboard view will be something like this
    var viewModel= (DashboardViewModel)Model.Data;

//other dashboard stuff here that really doesn't matter for this example
<h2>welcome to the dashboard</h2>

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.9.1.js"></script>
        <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

            $(document).ready(function () {
                if (viewModel.IsInfoNeeded)
                    $("#dialog").load("@Url.Action("RequiredInfo", "Dashboard")",
                        function (response, status, xhr) {

                $("#dialog").dialog({ modal: true });


//the view for the Required Information would be something like this

    var model = (RequiredInfoViewModel)Model.Data;

<h2>@T("Required Info")</h2>
<p>@T("Please fill out the form below")</p>

@using (Html.BeginFormAntiForgeryPost(Url.Action("RequiredInfo", "Dashboard", new { area = "MyModule" })))
    <article class="form">
                    <div class="field-label">@Html.LabelFor(m => model.FirstName)</div>
                    <div class="field-editor">@Html.TextBoxFor(m => model.FirstName)</div>
                    <div class="field-label">@Html.LabelFor(m => model.LastName)</div>
                    <div class="field-editor">@Html.TextBoxFor(m => model.LastName)</div>
                    <div class="field-label">@Html.LabelFor(m => model.City, T("City"))</div>
                    <div class="field-editor">@Html.EditorFor(m => model.City)</div>
                    <div class="field-label">@Html.LabelFor(m => model.State, T("State"))</div>
                    <div class="field-editor">@Html.EditorFor(m => model.State)</div>

            <footer class="commands">
                <button type="submit">@T("Save")</button>

Re: Dialog box for dashboard

Could you explain a little more about what you need help with specifically?

Wednesday, April 16, 2014 11:42:15 PM bysfmskywalker

Re: Dialog box for dashboard

The javascript in the dashboard view needs to call to the controller dashboard/RequiredInfo, for its view, display it and that view post back to the controller dashboard/RequiredInfo. I think what i have is close but i have not been able to even get the javascript to successfully call the get for dashboard/RequiredInfo. So, right now I think my javascript is broken. Let me know if that still needs clearification.

Thursday, April 17, 2014 12:31:57 AM byRob Allred

Re: Dialog box for dashboard

Yes, it's hard to see what's wrong by just looking at this code (at least at this hour. :)). Did you try the F12 Developer Tools (or your favorite browser's equivalent) to inspect the XHR requests and the console to see javascript errors? Another suggestion could be to maybe attach your module to this ticket (zipped) so we can have a look at it interactively. If you can;t provide the module itself, perhaps you can setup a sample module demonstrating the issue.

Thursday, April 17, 2014 12:45:22 AM bysfmskywalker

Re: Dialog box for dashboard

attached a module with example code

Thursday, April 17, 2014 1:27:36 AM byRob Allred

Re: Dialog box for dashboard

I looked at your sample module, and found two issues with it:

  1. Your script tried accessing a variable named "viewModel". However, no such variable is defined anywhere (see screensot-1.png).
  2. After fixing the undefied variable issue, the call to $("#dialog").load(...) will not invoke your callback, since no HTML element exists with an id of "dialog". After adding an element with id "dialog", everything worked (see screenshot-2.png).

I attached a working sample with this comment.

Thursday, May 1, 2014 2:19:01 PM bysfmskywalker

Re: Dialog box for dashboard

Thanks, I wish it was worth more points but I am a small fish so my questions are small points.

Thursday, May 1, 2014 5:45:46 PM byRob Allred

Re: Dialog box for dashboard

Thanks for the recommendation. :) Yeah, we've been thinking about the points system. Currently the reward is based on the Level of the OP. However, the question could require advanced Orchard knowledge, research time or other skills and effort which should be rewarded with more points. Perhaps the OP should be allowed to grant more points manually? Thoughts?

Thursday, May 1, 2014 6:42:32 PM bysfmskywalker

Re: Dialog box for dashboard

start with base points that you already have and let people vote it harder than points...maybe add a point per vote or something, regardless this site is a great idea. Good job!

Thursday, May 1, 2014 7:34:37 PM byRob Allred

Post a reply

You need to be signed in to post a reply.

Sign In