c# - 如何在使用 MVC 返回函数后调用 javascript？

Question

如何在提交上传图片后得到Doctor Experience标签面板

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;
        }

如何调用下面的javascript函数return语句

脚本:

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

Answer 1

在 BeginForm 中有 OnSucess 选项...这是调用成功时要执行的所有操作的地方。

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

在客户端...用 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>

并且您必须添加 Unobtrusive Ajax 才能使此操作发生

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

Here is a Tutorial