Presenting a second form with Jquery UI Dialog and KnockoutJS

Question

I have a primary form defined and nicely laid out, it does what it needs to do...

@{ Html.BeginForm(); }
@Html.ValidationSummary(false)
@Html.AntiForgeryToken()
@Html.EditorFor(model => model)
<h2>Properties</h2>
<hr />
@* I want to put some stuff here... *@
<br class="space" />
<div class="clearfix">>
    <button type="submit" data-bind="click: save">
        Save
    </button>
</div>
@{ Html.EndForm(); }

Now, then. This model (or ViewModel, rather) has an IList<PropertyViewModel> attached to it.

A PropertyViewModel has its own set of validations. They are pretty simple for now, but there is a chance that later there will be more complicated uses for this setup.

I am using KnockoutJS for my viewModel consistency. Though I suppose it is fairly irrelevent. I want to display a second form in a jQuery UI Dialog and return the result, essentially..

<script type="text/javascript">
    var viewModel = {
        name: ko.observable(),
        description: ko.observable(),
        properties: ko.observableArray(),

        save: function () {
            alert(ko.toJSON(viewModel));
        },

        includeProperty: function () {
            $("#dialog").dialog({
                width: 500,
                closeText: '',
                resizable: true,
                buttons: {
                    'Submit': function () {
                        $(this).dialog('close');
                        callback( @* I want the new data to get sent back *@ );
                    },
                    'Cancel': function () {
                        $(this).dialog('close');
                        return false;
                    }
                }
            });
        }
    };
    function callback(value) {
        alert(ko.toJSON(value)); // (I will push the new property to the viewmodel here)
    }
    ko.applyBindings(viewModel);
</script>

However, I am not really sure how to actually put the EditorTemplate into the dialog, moreover I am not sure how to get the data back out of it.

Community · Accepted Answer · 2017-05-23 10:00:04Z

1

I don't completely understand your question, but from what I understood what you are trying to do is pass data to the dialog and retrieve data from the dialog. If that is the case then this may be useful:

http://api.jquery.com/jQuery.data/

Here is detailed example on how to use:

Passing data to a jQuery UI Dialog

edited May 23, 2017 at 10:00

CommunityBot

11 silver badge

answered May 27, 2011 at 18:44

B Z

9,46217 gold badges71 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ciel Over a year ago

No, that is not really what I am trying to do... or if it is, these examples are extremely cryptic. I do not understand any of this. I need to display a second form inside of a dialog, do validation on it, and return the result back to the original form.

Ciel Over a year ago

Actually, this might work. I could wrap the form in a partial view and load it into the dialog, and return its data... I'll experiment a bit, thank you. This isn't quite the answer I was looking for, but I'll see if I can take a different approach using it.

Ciel Over a year ago

This did not solve my problem, but it did open up some interesting solutions to other problems.

B Z Over a year ago

@Ciel - I would suggest then maybe rephrasing your question so we can help

Ciel Over a year ago

Actually, this did inevitably solve it because it showed me some things about dialogs I did not previously understand.

Collectives™ on Stack Overflow

Presenting a second form with Jquery UI Dialog and KnockoutJS

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related