Ajax調用，但屏幕仍然上升

Question

我有這樣的：

查看：

<div id="tabs-2"> 
     @using (Ajax.BeginForm("EditPhotos", "Account", 
     new AjaxOptions() 
     { 
      InsertionMode = InsertionMode.Replace, 
      HttpMethod = "Post", 
     }, 
      new { enctype = "multipart/form-data"} 





     )) 

      //new { enctype = "multipart/form-data" })) 
     { 
      @Html.AntiForgeryToken() 

      <div class="form-horizontal"> 
       <h4>Photos</h4> 
       <hr /> 
       @Html.ValidationSummary(true) 
       @Html.HiddenFor(model => model.Id) 



       <form class="form-horizontal"> 

        <div class="editor-label"> 
         @Html.LabelFor(model => model.DisplayItem) 
        </div> 
        <div class="editor-field"> 
         @Html.EditorFor(model => model.DisplayItem) 

        </div> 

        <div id="upload-choices"> 
         <div class="editor-label"> 
          @Html.LabelFor(m => m.Image) 

          @Html.ValidationMessageFor(model => model.Image) 
         </div> 
         <div class="editor-row"> 
          @Html.ValidationSummary(true) 
         </div> 
        </div> 

        <br /> 


        <img width="200" height="150" src="@Url.Action("GetImage", "Account", new { id = Model.Id })"> 
        <input type="file" name="file" /> 
       </form> 
       <br /> 
       <div class="pull-left"> 
        <div class="col-md-offset-0"> 
         <input type="submit" value="Save" class="btn btn-default pull-left" /> 

        </div> 
       </div> 
      </div> 
     } 

     <br /><br /> 
     <div> 
      @Html.ActionLink("Back to List", "Index") 
     </div> 

    </div> 

和jQuery：

@section Scripts 
    { 
     <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" /> 
     <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 
     <script src="@Url.Content("~/Scripts/jquery-1.11.0.min.js")" type="text/javascript"></script> 
     <script src="@Url.Content("~/Scripts/jquery-ui-1.10.4.min.js")" type="text/javascript"></script> 
     <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> 
     <script> 
      $(document).ready(function() { 
       $("#tabs").tabs(); 

       $("#tabs").tabs("select", window.location.hash); 

       //var param = $(document).getUrlParam('selectedTab'); 
       //$('#tabs').tabs('select', param); 
      }); 
     </script> 
} 

和控制器的操作方法：

[HttpPost] 
     public ActionResult EditPhotos(UserProfile userprofile,HttpPostedFileBase file) 
     { 

      if (file != null && file.ContentLength > 0) 
      { 


       // extract only the fielname 
       var fileName = Path.GetFileName(file.FileName); 
       // store the file inside ~/App_Data/uploads folder 
       var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName); 
       file.SaveAs(path); 
      } 

      if (ModelState.IsValid) 
      { 
       string username = User.Identity.Name; 
       // Get the userprofile 
       UserProfile user = db.userProfiles.FirstOrDefault(u => u.UserName.Equals(username)); 

       // Update fields 
       user.Image = new byte[file.ContentLength]; 
       file.InputStream.Read(user.Image, 0, file.ContentLength); 
       user.ImageMimeType = file.ContentType; 

       db.Entry(user).State = EntityState.Modified; 

       db.SaveChanges(); 

       return Redirect(Url.Action("Edit", "Account") + "#tabs-2"); 

      } 
      return View(userprofile);  

     } 

哦，我可以保存照片，當我保存照片時當前選項卡保持選定選項卡。但保存後屏幕上升。所以它似乎是一個完整的回帖，而不是部分回帖。在我保存之前出現我看到三個選項卡。但在我保存選項卡後彈出。但我做了一個阿賈克斯電話。那該怎麼辦？

謝謝

奧凱，我有現在這樣的：

@section Scripts 
{ 
    <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" /> 
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 
    <script src="@Url.Content("~/Scripts/jquery-1.11.0.min.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/jquery-ui-1.10.4.min.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> 
    <script> 
     $(document).ready(function() { 

       $("#tabs").tabs(); 
       $(document).on("click", ".btn", function() { 
       $("#tabs").tabs("select", window.location.hash); 

       //var param = $(document).getUrlParam('selectedTab'); 
       //$('#tabs').tabs('select', param); 
      }); 
     }); 
    </script> 
} 

，因爲如果我這樣做：

$(document).on("click", ".btn", function() { 

       $("#tabs").tabs(); 

       $("#tabs").tabs("select", window.location.hash); 

       //var param = $(document).getUrlParam('selectedTab'); 
       //$('#tabs').tabs('select', param); 
      }); 

我沒有看到的標籤了

我有這個：

<div class="pull-left"> 
      <div class="col-md-offset-0"> 
       <input type="button" value="Save" class="btn btn-default pull-left" /> 

      </div> 
     </div> 
    </div> 

但是，你是什麼意思，你沒有看到Ajax調用？

我有這樣的：

<div id="tabs-2"> 
     @using (Ajax.BeginForm("EditPhotos", "Account", 
     new AjaxOptions() 
     { 
      InsertionMode = InsertionMode.Replace, 
      HttpMethod = "Post", 
     }, 
      new { enctype = "multipart/form-data"} 





     )) 

      //new { enctype = "multipart/form-data" })) 
     { 
      @Html.AntiForgeryToken() 

      <div class="form-horizontal"> 
       <h4>Photos</h4> 
       <hr /> 

等等

但仍屏幕上升，之後保存

好吧，我現在有這樣的：

$(document).ready(function() { 

      $.ajax({ 
       url: resolveUrl("/Account/EditPhotos/"), 
       type: "POST", 
       processData: false, 
       contentType: false, 
       data: data, 
       success: function (response) { 
        //code after success 

       }, 
       error: function (er) { 
        alert(er); 
       } 

      }); 


     }); 

但仍然頁面上升

如果我這樣做：

$(document).on("click", ".btn", function(){ 

     $("#ajaxUploadForm").ajaxForm({ 
      iframe: true, 
      type: 'POST', 
      dataType: "json", 
      cache: false, 
      timeout: 1200000, 
      async: false, 
      beforeSubmit: function() { 
       //Do something here if needed like show in progress message 
      }, 
      //success: function (result) { 
      // alert("sucess" 
      // }, 
      error: function (xhr, textStatus, errorThrown) { 
       alert("Error uploading file"); 
      } 
     }); 
     }); 

有：

<div class="pull-left"> 
        <div class="col-md-offset-0"> 
         <input type="button" value="Save" class="btn btn-default pull-left" /> 

        </div> 
       </div> 

則什麼也不會發生，

Answer 1

我沒有看到你的Ajax代碼發佈，但你的按鈕是一個提交按鈕，而不僅僅是一個按鈕。你需要改變，要

<input type="button" value="Save" class="btn btn-default pull-left" /> 

，並在你的腳本的事件更改爲點擊事件

$(document).on("click", ".btn", function(){ 
    ...