CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc
stig
stig

Reputation: 1220

MVC - Passing ViewModel between partial views with Jquery

I am having trouble passing a ViewModel between my partial views and the controller.

What I basicly want is to have one ViewModel which is beeing passed through different Views using Jquery and updated dynamicly.

I have a modal dialog wich is using a Fuel UX Wizard. The code for the modal is in a file called "Container" and partial views is beeing loaded into the container.

When the modal is clicked the changed.fu.wizard function is getting called.

$('#uiWizard').on('changed.fu.wizard', function () {
        switch ($('#uiWizard').wizard('selectedItem').step) {
            case 1:
                console.log("step 1");

                $.ajax({
                    url: '@Url.Action("Step1", "Alert")',
                    datatype: "json",
                    type: "POST",
                    contentType: 'application/json; charset=utf-8',
                    beforeSend: function () {
                        $('#container1').html(loadingData());
                    },
                    success: function (data) {
                        $('#container1').html(data);
                    },
                    error: function (data) {
                        $('#container1').html(errorMessage(data));
                    },
                    complete: function () {

                    }
                });
                break;
        }
    });

The controller method looks simplified like this:

[HttpPost]
public PartialViewResult Step1()
{
   TestView model = new TestView();
   return PartialView("Step1", model);
}

So this is basicly just loading the Step1 view into the Container View.

So here is when the issues start. Say that I inn Step.cshtml import the model on top with @model Application.ViewModels.TestView and I use Html helpers on the Step1 page such as checkboxes and Textareas.

When the "Next" button is called again on the wizard the changed method gets called again. (Which is in the Container.cshtml file) I want to pass the Model thats in step1 with Jquery to a controller which takes a ViewModel.

I want the controller to just look like this. Get the model from the View and just pass it on.

So very easily would be just to stringify the Model. This seems to be working in some cases but the problem I am having is that Model is not beeing updated.

$.ajax({
    url: '@Url.Action("Step2", "Alert")',
    datatype: "json",
    data: JSON.stringify('@Model'),
    type: "POST",
    contentType: 'application/json; charset=utf-8'
});

[HttpPost]
public PartialViewResult Step2(TestView model)
{
    return PartialView("Step2", model);
}

This got abit messy but hope it was understandable ;)

EDIT:

Partial Views: What I am thinking about the Partial Views is that I only want to retrieve the ViewModel from the controller. Some Partial Views may change some variables and others may just pass it on.

So on all the partial views I have @model Application.ViewModels.TestView on top. I do not have this on the Container page. (Since its not beeing used here)

Then I can f.ex have a TextArea like this:

<section>
    <div class="textarea textarea-resizable">
        @Html.TextAreaFor(m => m.Text, new { @class = "form-control", rows = 15 })
    </div>
</section>

There is basicly no more code here since the form tags and everything else is in the container view.

From container.cshtml

        <div class="step-content">
            <form class="form-inline" id="fuelux-wizard" method="post">
                <div class="step-pane text-center active" id="step1">
                    <div id="container1"></div>
                </div>
                <div class="step-pane" id="step2">
                    <div id="container2"></div>
                </div>
                <div class="step-pane" id="step3">
                    <div id="container3"></div>
                </div>
                <div class="step-pane" id="step4">
                    <div id="container4"></div>
                </div>
            </form>
        </div>

And the divs are beeing loaded with the change method posted earlier in the success method.

            success: function (data) {
                $('#container1').html(data);
            },

Upvotes: 1

Views: 2550

Answers (1)

user3559349
user3559349

Reputation:

data: JSON.stringify('@Model') will only post back the fully qualified name of your class, not any values of the model (and even if it did work, it would only post the original values of the model since razor code is parsed on the server before its sent to the client). You need to serialize your form, so the ajax call should be

$.ajax({
    url: '@Url.Action("Step2", "Alert")',
    // datatype: "json",
    data: $('form').serialize(), // update this
    type: "POST",
    // contentType: 'application/json; charset=utf-8'
});

Note that contentType: 'application/json; charset=utf-8' needs to be removed and and datatype specifies the data which is returned by the controller method - which you don't appear to be accessing so it's not necessary

Note also you could also build the form data manually using

data: { Text: $('#Text').val(), AnotherProperty: $('#AnotherProperty').val(), etc },

Upvotes: 2

Related Questions