Ivin Raj
Ivin Raj

Reputation: 3429

how to call javascript after return function using MVC?

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');

Upvotes: 1

Views: 2773

Answers (1)

Rohit Kumar
Rohit Kumar

Reputation: 1792

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

Upvotes: 6

Related Questions