How to set a Model property inside javascript and be able to receive it in POST method

Question

I have a button when that button is clicked I want to set a model property to true and be able to receive it in the back end. Code is a bit messed up but bear with me please as I have taken alot of code out of it.

@model FullConfigurationMV
 @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "MyForm" }))
    {
        @Html.HiddenFor(model => model.IsTemplate)

        // Code removed for brevity 
        <button id="DraftName">Click me</button>

    }
    <script>
    $( document ).ready(function() {
        debugger;
        $("#DraftName").click(function()
        {
            @Model.IsTemplate = true; // I AM SETTING THE VALUE AS TRUE
                SaveStyles();
        });
    });
</script>

<script>
function SaveStyles() {
    var data = $('#MyForm').serialize();
    var URL = "SOME URL"
    $.ajax({
        url: URL,
        type: 'POST',
        data: data,

        success: function (result) {

        },
        error: function (error) {
        }
    });
}
</script>

POST ACTION

 public JsonResult SaveStyles(FullConfigurationMV data)
        {
                 // data.IsTemplate is coming out to be false
                // Rest of the UI control data is coming back properly
        }

EDIT Since I have below code. is that the issue?

var data = $('#MyForm').serialize();

FullConfigurationMV class , what property it has, that corresponds to DraftName? — Vlado Pandžić, Jul 24 '17 at 20:28
Draftname is just a button, I want to send the data for the IsTemplate Bool variable. — Unbreakable, Jul 24 '17 at 20:29

CodeNotFound · Answer 1 · 2017-07-24T20:41:12.803

2

Razor view are generated in server side. So when you browser get the HTML there is no razor code in it so the following code will not work:

$("#DraftName").click(function()
{
    @Model.IsTemplate = true; // <-- this will not work and will not exist in client side
    SaveStyles();
});

You should set the hidden field you just put in your form @Html.HiddenFor(model => model.IsTemplate) which generate <input type='hidden' /> and just update your javascript code by doing this:

$("#DraftName").click(function()
{
    $("#MyForm input[type='hidden']").val("true"); //  <- Replace your Razor code with this.
    SaveStyles();
});

edited Jul 24 '17 at 20:41

answered Jul 24 '17 at 20:31

CodeNotFound

18,731
6
54
63

This line looks incomplete. "You should set the hidden you just put in your form and do this:" – Unbreakable Jul 24 '17 at 20:39
Can you kindly guide me how can I send `hidden field` and still use the serialize to receive value in back end. – Unbreakable Jul 24 '17 at 20:40
` $("#MyForm input[type='hidden']").val("true");` in this code you have no where mentioned about isTemplate. – Unbreakable Jul 24 '17 at 20:40
still in your javascript I do not see the IsTemplate property – Unbreakable Jul 24 '17 at 20:42
I will have to mention that right? I am a beginner, bear with me – Unbreakable Jul 24 '17 at 20:42
`$("#MyForm input[type='hidden']").val("true");` this line needs to be tweaked a little right? – Unbreakable Jul 24 '17 at 20:43
LOL. Some kind and your comment. just here to help even if you're an expert or not. – CodeNotFound Jul 24 '17 at 20:43
IsTemplate is set via the generated hidden field. You just put into your form through `@Html.HiddenFor(model => model.IsTemplate)` – CodeNotFound Jul 24 '17 at 20:44
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/150029/discussion-between-unbreakable-and-codenotfound). – Unbreakable Jul 24 '17 at 20:44
For what ? I don't see a negative vote on my answer. – CodeNotFound Jul 25 '17 at 14:09
I have one small question. Please do clarify this doubt. So you mean to say that, I can never ever use `@Model.someproperty` in my scripts tag right? I mean I can never access any of the Model property in my script tag. The only work around to access it is if that property (hidden or not hidden) is applied to any UI element, then in that case I can fetch via jQuery selector. If I have a Model property and its been not used in the cshtml code then I can never access it in script file even if the View is taking the entire model `@Model someModel` on top of cshtml file – Unbreakable Jul 31 '17 at 14:16
You can access to any generated field. Just add an Id or custom CSS class to that field and you will access trought jQuery selector – CodeNotFound Jul 31 '17 at 14:31
So, if I set a mode property `temp` in my back end and pass the entire Model to the cshtml file but I never use it hidden or not hidden in my cshtml file, then I can never access the value as` @Model.temp` in my script tag. – Unbreakable Jul 31 '17 at 14:33
Thank you so so much.. :)\ – Unbreakable Jul 31 '17 at 14:35
1

The only way to access any property is to render it hidden or not hidden and then use Jquery selector. there is no other way, :) – Unbreakable Jul 31 '17 at 14:36
1

Exactly. The field need to be in the cshtml : visible to the user or not. – CodeNotFound Jul 31 '17 at 14:38
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/150649/discussion-between-unbreakable-and-codenotfound). – Unbreakable Jul 31 '17 at 18:02

score 2 · Accepted Answer · answered Jul 24 '17 at 20:31

2

Think about this problem a little differently.

All the view does is render html. Since you have a form in html, all your javascript has to do is to set the form element's value to true.

You should be able to use the jQuery selector like

$('input:hidden[name=IsTemplate]').val(true);

And your form serialize should pick it up.

answered Jul 24 '17 at 20:31

Fran

6,005
1
21
34

1

`$('#IsTemplate').val(true);` is a more efficient selector. – Jul 24 '17 at 22:06
@StephenMuecke I try to stay away from id selectors if i can and HiddenFor does not generate an id attribute. – Fran Jul 24 '17 at 22:24
1

It absolutely does generate the `id` attribute (based on the name of the property) As do all the `HtmlHelper` methods that generate form controls. – Jul 24 '17 at 22:26
@StephenMuecke https://stackoverflow.com/questions/3866716/what-does-html-hiddenfor-do. They do not. You need to pass your own in the htmlattributes object if you want an id – Fran Jul 24 '17 at 22:30
1

Are your serious - look at the html it generates. And inspect the source code to understand how the `HtmlHelper` methds work and what they really do – Jul 24 '17 at 22:34
Kindly see my `edit 1`. I tried to inspect the element and I could see the `id element` for the hidden field. – Unbreakable Jul 24 '17 at 22:36
1

@Unbreakable, You have shown the html for a property named `BoolVal`, not `IsTemplate` :) - but it will be similar and it will include an `id` attribute – Jul 24 '17 at 22:39
Oh ya. You are right. Actually, I had other hidden fields too in my forms. I just happen to grab the screenshot of different one. – Unbreakable Jul 24 '17 at 22:40
1

@StephenMuecke i stand corrected. I deccompiled hiddenfor and see the id generation code. – Fran Jul 24 '17 at 22:50
@StephenMuecke I have one small doubt. Please do clarify this doubt. I learned from answer to this question is, I cn never ever use @Model.someproperty in my scripts tag right? I mean I can never access any of the Model property in my script tag. The only work around to access it is if that property (hidden, not hidden) is applied to any UI element, then in that case I can get via jQuery selector. If I have a `Model property` and its been NOT used in the cshtml code then I can never access it in script file even if View file( cshtml file) is strognly bound to entire model `@Model someModel` – Unbreakable Jul 31 '17 at 14:20
@StephenMuecke: One more thing. After further looking into google I found out that "I can always access the value of Model Property" inside the script tag. Turns out the problem comes when I need to alter the value from JS. So bottom line is I can always access Model property from JS but in order to alter the value I need to use jquery selector and all. i CANNOT directly call upon `@Model.someproperty == blabla` and alter its value. Please guide me. Am I making sense to you? – Unbreakable Jul 31 '17 at 18:37
I am a beginner, so I get confused at small stuffs. – Unbreakable Jul 31 '17 at 18:39
1

@Unbreakable, you can access a model property in a script, but you cannot set it because your model is server side code (it does not exist in the browser). You need to send the data to the controller and update the model in the controller (e.g. by submitting a form, or by using ajax) – Jul 31 '17 at 23:12
Thank you sir. :) – Unbreakable Jul 31 '17 at 23:13

How to set a Model property inside javascript and be able to receive it in POST method

2 Answers2