How to bind image name to hiddenfield before submit form ?

Question

0.00/5 (No votes)

See more:

I am working in MVC5, After save the upload image on project folder then I want to bind the image name to model object using hidden field value,

View,

HTML

@Html.HiddenFor(m => m.AdImageFileName, new { @id = "hdAdImageFileName" })

What I have tried:

By using jQuery below code, I have saving image and return and bind the image name in to the Hidden field as value.

JavaScript

Advertisement = {
   Addform: function (e) {
    this.SaveAdvtImages();
                   $.ajax({
                       url: "/UserRegister/Advertisement",
                       type: "POST",
                       data: $('form').serializeArray(),
                       success: function (result) {
                           $('.loading').hide();
                           $(".modal-content").height(225);
                           $('#alertMsgModalContent').html(result);
                           $('#alertMsgModal').modal(options);
                           $('#alertMsgModal').modal('show');
                       },
                       error: function (result) {

                       }
                   });
                   },
   SaveAdvtImages: function () {

       var formData = new FormData($('#frmAdvertisement')[0]);
       $('.loading').show();
       $.ajax({
           url: '../UserRegister/SaveAdvImages/',
           type: 'POST',
           data: formData, //{ $formData, pageVM: hidJson },

           contentType: false,
           processData: false,

           success: function (res) {
               $('#hdAdImageFileName').val(res.AdvImage);
           },
           error: function (data) {

           }
       });
   }
   }

But before submit the '

$('form').serializeArray()

' I have to set

m => m.AdImageFileName

model object. Now,

C#

 [HttpPost]
        public ActionResult Advertisement(AdvertisementVM advertisementVM
{

}

the

advertisementVM.AdImageFileName

is passing null, not setting image name.

Please help me, how can I do this ?

Posted 22-Apr-17 22:43pm

Member 12955507

Updated 22-Apr-17 23:09pm

v4

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Kornfeld Eliyahu Peter · Answer 1 · 2017-04-22T23:09:00

Solution 1

JavaScript

$('#id').val(value-to-set); // just before your ajax call

Posted 22-Apr-17 23:09pm

Kornfeld Eliyahu Peter

Comments

Member 12955507 23-Apr-17 5:18am

Yes, I am setting value '$('#hdAdImageFileName').val(res.AdvImage);' and it is happening after execute this ' this.SaveAdvtImages();' function. But only the 'advertisementVM.AdImageFileName' is passing null

Kornfeld Eliyahu Peter 23-Apr-17 5:22am

Maybe your first ajax call never get into 'success'? Try to debug it...

Member 12955507 23-Apr-17 5:27am

No, it is happening there. I did debugged there and getting Image name also. but after submit the form the hidden field value is binding. Actually I want to bind the value to hidden field before submit the form.

Kornfeld Eliyahu Peter 23-Apr-17 5:32am

Move your assignment out of the ajax call, just before this.SaveAdvtImages();

Member 12955507 23-Apr-17 5:36am

Excuse me! I can not understand, do you mean I have to move the '$('#hdAdImageFileName').val(res.AdvImage);' outside the 'this.SaveAdvtImages();' function ?

Kornfeld Eliyahu Peter 23-Apr-17 5:45am

Yes.

Member 12955507 23-Apr-17 5:49am

now the error: 'Uncaught ReferenceError: res is not defined'

Kornfeld Eliyahu Peter 23-Apr-17 6:39am

Check this:
The .serializeArray() method uses the standard W3C rules for successful controls to determine which elements it should include; in particular the element cannot be disabled and must contain a name attribute. No submit button value is serialized since the form was not submitted using a button. Data from file select elements is not serialized. Elements that do not contain a value attribute are represented with the empty string value.

Member 12955507 23-Apr-17 8:37am

Here, what I can do? please

Kornfeld Eliyahu Peter 23-Apr-17 8:40am

Excuse me? Did you saw my last comment?

Member 12955507 23-Apr-17 8:42am

Yes... yes, but I can not find the solution. so...

Kornfeld Eliyahu Peter 23-Apr-17 8:45am

Do you have a name attribute on your hidden field?

Member 12955507 23-Apr-17 8:47am

@Html.HiddenFor(m => m.AdImageFileName, new { @id = "hdAdImageFileName" }) this is the hiddenfield, so the name attr is 'AdImageFileName', isn't it?

Kornfeld Eliyahu Peter 23-Apr-17 8:52am

Should be... You always better check it... It is possible that the type of the field in your model does not fit the value you try to push in?

Member 12955507 23-Apr-17 8:56am

hm... I have checked the hd value after submit the form. like $('#AdImageFileName').val()
"c6bc97f7-003a-4981-8b0c-2348efadcb9b.jpg"
Then model object 'AdImageFileName' datatype is 'public string AdImageFileName { get; set; }'

Kornfeld Eliyahu Peter 23-Apr-17 8:58am

Have you checked $('form').serializeArray(); outside the ajax call?
And $('#AdImageFileName').val() or $('#hdAdImageFileName').val() (as in your code)?

Member 12955507 23-Apr-17 9:19am

yes, after call the function this.SaveAdvtImages(); i did alert the $('#hdAdImageFileName').val() or $('#AdImageFileName').val() then it is empty

Kornfeld Eliyahu Peter 23-Apr-17 9:23am

And you sure you got to the success branch in the ajax call? Maybe you should add an alert to the error branch...