CODEWITHSUNDEEP
asp.net-mvcrazorasp.net-mvc-controller
Arjit Kapoor
Arjit Kapoor

Reputation: 21

MVC - unable to pass value back to controller using hidden field

I'm trying to assign value to the hidden field in java script using the JavaScript variable and trying to pass it back to the controller. The value every time I go in the post method for my model property DBErrorID is 0.

Razor View: 

<body>
    @Html.HiddenFor(model => model.DBErrorID, new { id = "DBErrorId" })
    <input type="submit" value="Update" class="btn btn-success" onclick="GetValue()" />
</body>

JavaScript:

<script language="javascript" type="text/javascript">          
  function GetValue() {
        $("#DBErrorId").val(totalValues);
        // alert(totalValues);
  }
<script>

Controller:

[HttpPost]
public ActionResult ErrorStatusView(Models.ErrorStatusModel obj)
{
   Models.ErrorStatusModel objreg = new Models.ErrorStatusModel();
   objreg.DBErrorID = obj.DBErrorID; 
}

Upvotes: 2

Views: 1062

Answers (1)

Shyju
Shyju

Reputation: 218722

Your current server side code is creating an unnecessary new object of ErrorStatusModel as the first line, which will create a new object(objreg variable) with default values(unless you are setting it in a constructor), for an int type property it will be 0. If you are inspecting the values of objreg, that is the reason you see 0 as the property value.

You do not need to create this additional object. The model binder framework will create one for you and map the posted values, when you use ErrorStatusModel your method parameter type. That means your obj property is properly populated by the form data (assuming the DBErrorID property is settable)

[HttpPost]
public ActionResult ErrorStatusView(Models.ErrorStatusModel obj)
{
     // obj is populated with form values.
     // use obj
     // return something.
}

Also, your client side code is trying to set the value of hidden input inside the GetValue method which is called on the onclick event of the submit button. If you are using a normal form submit and your button is inside a form tag, when user clicks on the submit button it will immediately submit the form (with the current value of that input)

If that is the case, you should prevent the default behavior (submitting the form) when the button is clicked, set the value as needded and fire the form submit via JavaScript.

There are multiple ways to do it. Here is one approach- the unobtrusive JavaScript approach- which assumes you have jQuery loaded to your page. Give an Id to the button, which we can use to wireup the click event.

<input type="button" value="Update" class="btn btn-success"
       id="btn-save" />

Now in JavaScript, listen to the click event on this button, prevent the normal behavior(submitting the form), update the hidden input value and trigger the form submit.

$(function () {

    $('#btn-save').click(function (e) {
        e.preventDefault();
        $("#DBErrorId").val(34);

        $(this).closest("form").submit();
    });

})

Also you should not create a new object in server

Upvotes: 1

Related Questions