2017-10-20 117 views
0

我怎样才能Doctor Experience标签面板后submit uploading image如何使用MVC返回函数后调用javascript?

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

控制器:

[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'); 
+1

你不要,你在你的视图或模板(母版页)内添加js脚本,并让它在t时运行他的形式被加载。 –

+0

好的如何调用javascript函数服务器端到客户端@MasterYoda –

+1

你到底想要达到什么目的? 当您执行POST时,浏览器将重新加载整个页面,因此即使您将某些内容返回给该页面,该页面也会呈现在全新的空白页面中。也许你想要做的事情可以用更简单的方式实现。 如果您不希望重新加载页面,您可以搜索“Ajax图片上传”,在这种情况下,您可以在上传完成后注册回调函数。 –

回答

2

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

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

... defince此功能在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> 

而且你必须添加不显眼的Ajax这个动作发生

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

Here is a Tutorial

+0

[https://i.stack.imgur.com/WmsMQ.png]看到这张照片有些错误 –

+0

ahaha它成为** @使用(Ajax.BeginForm(**现在检查更新的答案 –

+0

但我认为这将是一个问题多部分图片 –

相关问题