2017-10-20 22 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

但我認爲這將是一個問題多部分圖片 –

相關問題