CODEWITHSUNDEEP
javascriptjqueryasp.netasp.net-mvcrazor
gandalf
gandalf

Reputation: 470

Converted razor model to JS object properties are null

I try to convert my model to javascript object but the properties are null, if I switch to the MVC standard submission, the properties are not null.

Razor Code

 @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "myForm" })){@Html.TextBoxFor(model => model.Name, null, new { @class = "form-control", @id = "drpPipeline" })}

Javascript code

 $("#modalForm").on("submit", "#myForm", function(e) {
        e.preventDefault();  // prevent standard form submission
        debugger;
        var associationPoolUi = @Html.Raw(Json.Encode(@Model));
    });

Upvotes: 0

Views: 184

Answers (1)

Florin-Constantin Ciubotariu
Florin-Constantin Ciubotariu

Reputation: 3817

This is how it is designed.

Let's speak about:

  1. Razor

More than sure you have a class A. When you hit your action method inside a controller, you return a View with has a Model which is of type A.

You create a form based on how class A looks like. What values has the Model? Probably all properties will have a default value. This is what happens on the GET HTTP request.

The magic happens on POST. If you are using Razor, your action method will probably accept as parameter an object of type A. ASP.NET MVC is smart enough to look over all the properties you want to send back to the controller and to map into class A.

Keep in mind that Razor translates to HTML. That means that when you click on the submit button, Razor has no power there.

  1. Javascript

After you have your page rendered, you should treat everything as HTML. Razor can not help you at the moment you handle the submit event. Thinking in HTML terms, what do you think it will rendered when you write @Html.Raw(Json.Encode(@Model))?

Keep in mind that you used the Model only to create the form which you will present to the user (which had the default values). You should not expect the Model properties to be updated every time you fill out the form (like some frontend frameworks). I recommend you to try out this: simply CTRL+U on the page and look at that specific line.

Upvotes: 1

Related Questions