how to call javascript after return function using MVC?

Question

How can i get Doctor Experience tab panel after submit uploading image

Cs.Html:

 @using (Html.BeginForm("AddDoctorImage", "Doctor", FormMethod.Post, new { enctype = "multipart/form-data" }))
            {
                <section>
                    <div class="row">
                        <div class="col-lg-4">
                            <fieldset class="form-group">
                                <label class="form-label semibold">Upload Doctor Image</label>&nbsp;&nbsp;
                                @*<input type="file" name="postedFile" id="txtUploadImage" class="btn btn-rounded btn-file" style="cursor:pointer;" />*@
                                <span class="btn btn-rounded btn-file">
                                    <span>Choose file</span>
                                    <input type="file" name="postedFile" id="postedFile">
                                </span>
                            </fieldset>
                        </div>
                        <div class="col-lg-4">
                            <fieldset class="form-group">
                                <label class="form-label semibold">Perview Image</label>&nbsp;&nbsp;
                                <img id="image_upload_preview" src="http://placehold.it/100x100" alt="your image" />
                                <a id="remove" onclick="javascript:ClearFileUploadControl();" style="display: none; cursor: pointer;">Remove</a>
                            </fieldset>
                        </div>
                        <div class="col-lg-4">
                            <input type="submit" name="ImageUpload" value="Upload image" class="btn btn-rounded btn-inline btn-success" />
                            <span style="color:green">@ViewBag.Message</span>
                        </div>
                    </div>
                </section>
            }

Controller:

[HttpPost]
        public ActionResult AddDoctorImage(HttpPostedFileBase postedFile)
        {
            int docId = Convert.ToInt32(Session["docID"]);


            if (postedFile != null)
            {
                string path = Server.MapPath("~/Doctor/");
                if (!Directory.Exists(path))
                {
                    Directory.CreateDirectory(path);
                }

                var filename = docId.ToString() + ".png";
                postedFile.SaveAs(path + filename);
                ViewBag.Message = "File uploaded successfully.";
            }
            return javacript;
        }

How to call bellow javascript function return statement

script:

var linkHref = "tabs-1-tab-1";
                $('#myLinks li a').removeClass('active');
                $('#myLinks li')
                  .find('a[href="#' + linkHref + '"]')
                  .parent()
                  .next()
                  .find('a')
                  .tab('show')
                  .addClass('active')
                  .attr('data-toggle', 'tab');
                $('a.nav-link').not('.active').css('pointer-events', 'none');

You dont, you add the js script inside either your view or a template (master page) and let it run when the form is loaded. — Master Yoda, Oct 20 '17 at 13:21
ok how to call javascript function server side to client @MasterYoda — Ivin Raj, Oct 20 '17 at 13:24
What exactly are you trying to achieve? When you do a POST, the browser will reload the entire page, so even if you return something to the page, it will be rendered in a whole new blank page. Maybe what you're trying to do can be achieved in a simpler manner. If you don't want the page to be reloaded, you can search for "Ajax image upload", in this case you will be able to register a callback function when the upload has been finished. — Heitor Corrêa, Oct 20 '17 at 13:24
@IvinRaj Just return the page along with a response object as a parameter, check the parameter client side and if it evaluates that the image has been successfully uploaded write your javascript to handle the response. — Master Yoda, Oct 20 '17 at 13:27
hi Ivin good to see you again... so you want to do some action once the image is uploaded ..am i correct ? — Rohit Kumar, Oct 20 '17 at 13:29

Rohit Kumar · Answer 1 · 2017-10-20T13:40:38.567

6

There is OnSucess option in BeginForm...which is where all actions to be done on success should be called.

  @using (Ajax.BeginForm("AddDoctorImage", "Doctor", FormMethod.Post, new { enctype = "multipart/form-data" } , new AjaxOptions { OnSuccess = "ChangeTab" }))

on the client side...defince this function in Javascript

<script type="text/javascript">
    function ChangeTab(result) { console.log(result)
           var linkHref = "tabs-1-tab-1";
            $('#myLinks li a').removeClass('active');
            $('#myLinks li')
              .find('a[href="#' + linkHref + '"]')
              .parent()
              .next()
              .find('a')
              .tab('show')
              .addClass('active')
              .attr('data-toggle', 'tab');
            $('a.nav-link').not('.active').css('pointer-events', 'none');
    }
</script>

And you have to add Unobtrusive Ajax for this action to happen

<script src="~/Scripts/jquery-1.8.2.min.js"></script>  
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

Here is a Tutorial

edited Oct 20 '17 at 13:40

answered Oct 20 '17 at 13:33

Rohit Kumar

1,777
2
13
26

ahaha it become **@using (Ajax.BeginForm(** now check updated answer – Rohit Kumar Oct 20 '17 at 13:40
but i Think it would be a problem with multipart Image – Rohit Kumar Oct 20 '17 at 13:45
There is solution here ..the one with 30 votes https://stackoverflow.com/questions/581703/how-to-do-a-asp-net-mvc-ajax-form-post-with-multipart-form-data – Rohit Kumar Oct 20 '17 at 13:46
that is the reason ...Developers use 3rd party tools like [dropzone.js](http://www.dropzonejs.com/) when dealing with files... It runs a separate queue for files & lets the other textual content of the form work in ajax. It is like the defacto standard for handling the multipart issues & save you from writing extraaaaa lines of code of serialising Image to base 64 & then deserialising base 64 back to image – Rohit Kumar Oct 20 '17 at 13:49
here is one [solution](https://www.codeproject.com/Articles/874215/File-upload-in-ASP-NET-MVC-using-Dropzone-JS-and-H) i could find... you have to see the on Complete calls backs tho – Rohit Kumar Oct 20 '17 at 13:54

how to call javascript after return function using MVC?

1 Answers1