How to pass dynamic values using MVC AJax.BeginForm

Question

I'm using MVC and AJax.BeginForm to do some ajax updating of my page. The BeginForm code looks something like:

using (Ajax.BeginForm("HandleCrop", "Card", 
                   new 
                   { 
                       accept = true, 
                       id = Model.ImageUpload.ID, 
                       file = Model.ImageUpload.File, 
                       imageCropX = Model.CropInfo.X,
                       imageCropY = Model.CropInfo.Y,
                       imageCropWidth = Model.CropInfo.Width,
                       imageCropHeight = Model.CropInfo.Height                        
                   }, 
                   new AjaxOptions 
                   { 
                       HttpMethod = "POST", 
                       OnComplete = "ConfirmCompleted", 
                       OnSuccess = "ReloadUpload", 
                       OnFailure = "Failure" 
                   }, null))

The Model.CropInfo is being put in as hidden fields like so:

<%=Html.HiddenFor(m => m.CropInfo.X) %>
<%=Html.HiddenFor(m => m.CropInfo.Y) %>
<%=Html.HiddenFor(m => m.CropInfo.Width) %>
<%=Html.HiddenFor(m => m.CropInfo.Height) %>

However, these values are being dynamically modified by some client side javascript, and these values need to be posted through the Ajax call back to the server. The above code will obviously not work as the imageCrop.. parameters in the Ajax form are being filled when the page is rendered (therefore being all 0).

My question is: what is the correct way to approach this situation?

Dusan · Accepted Answer · 2012-06-08 11:20:03Z

1

From Ajax this part should be absolutely removed:

    imageCropX = Model.CropInfo.X,
    imageCropY = Model.CropInfo.Y,
    imageCropWidth = Model.CropInfo.Width,
    imageCropHeight = Model.CropInfo.Height

With TryUpdateModel in the Action your CropInfo should be filled OK from posted data.

If you are NOT USING automatic update of the model (or via TryUpdateModel) and instead of that you are USING this data as input parameters in Action then just rename these Action parameters to CropInfo_X, CropInfo_Y, CropInfo_Width and CropInfo_Height (I think this is how the hidden fields will be named in HTML, check this in page source)

answered Jun 8, 2012 at 11:20

Dusan

5,1546 gold badges44 silver badges61 bronze badges

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

5 Comments

Arthur Over a year ago

I am not using automatic update of the model. I deleted the parameters as you described, and the hidden fields are indeed called the way you describe (with the _ ). However I still don't understand how these values will end up in the function 'HandleCrop'. Adding a Model argument to HandleCrop doesn´t work as this will just be an uninitialised object. Could you please elaborate how to do this correctly?

Dusan Over a year ago

They will end up in action because when Ajax is making post request will find and serialize all input, hidden, select and other fields inside your form. All you need to do is to make sure that your parameter names in Action match the names of fields in HTML. This behavior is already implemented and occurs behind the scenes.

Dusan Over a year ago

I have seen now that Names of your hidden fields would contain . (dot) which is not good for this scenario as C# does not allow dot in identifiers. If previously discussed does not work, replace your Html.HiddenFor with something like <input type="hidden" ...

Arthur Over a year ago

THe ID's are with _ as you said before, not with dots (.). I've added the hidden field names as arguments to the action function now, but all parameters are being passed in as null

Dusan Over a year ago

Just make the Name of hidden field and Name of parameter in action be the same by any means needed and it will work.

Collectives™ on Stack Overflow

How to pass dynamic values using MVC AJax.BeginForm

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related