Обновить страницу после отправки с помощью вкладок

Question

Я хочу обновить страницу после сохранения. Я использую вкладки, например:

<div id="tabs-2"> 

     @using (Html.BeginForm("EditPhotos", "Account", FormMethod.Post, new { id = "form", enctype = "multipart/form-data" })) 
     { 
      @Html.AntiForgeryToken() 

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

       @Html.HiddenFor(model => model.Id) 


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

       <div class="table-responsive"> 
        <table class="table"> 

         <tr> 
          <th><img width="200" height="150" src="@Url.Action("GetImage", "Account", new { id = Model.Id })"></th> 


         </tr> 
        </table> 
       </div> 

       <input type="file" name="file" class="filestyle" data-buttontext="Find file"> 



       <br /> 
       <div class="progress progress-striped"> 
        <div class="progress-bar progress-bar-success">0%</div> 
       </div> 

       <div id="status"></div> 


       <br /> 

       @*@Html.ActionLink("Upload photos", "Upload")*@ 
       <div class="pull-left"> 
        <div class="col-md-offset-0"> 
         <input type="submit" value="Save" accept="image/x-png, image/gif, image/jpeg" class="btn btn-default pull-left" /> 

        </div> 
       </div> 

      </div> 
     } 

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

и это JQuery:

$("form").ajaxForm({ 



        beforeSend: function() { 

         status.empty(); 
         var percentVal = '0%'; 
         bar.width(percentVal) 
         percent.html(percentVal); 
        }, 
        uploadProgress: function (event, position, total, percentComplete) { 
         var percentVal = percentComplete + '%'; 
         bar.width(percentVal) 
         percent.html(percentVal); 
        }, 
        success: function() { 
         var percentVal = '100%'; 
         bar.width(percentVal) 
         percent.html(percentVal); 
        }, 
        complete: function (xhr) { 
         status.html(xhr.responseText); 
        } 
       // }); 
      }); 

и это мой метод действия контроллера:

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

      if (file != null) 
      { 


       // 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); 
       ModelState.Clear(); 
      } 

      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 RedirectToAction(Url.Action("Edit", "Account") + "#tabs-2"); 


     } 

, но после загрузки (сохранения) I получить эту ошибку:

Server Error in '/' Application. 

The resource cannot be found. 

Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly. 

Requested URL: /Account/Account/Edit#tabs-2 

поэтому как улучшить RedirectAction с помощью вкладок?

Спасибо

нормально, у меня теперь так:

$("#tabs").tabs(); 
    // $(document).on("click", ".btn", function() { 
    $("#tabs").tabs("select", window.location.hash); 
    window.location.hash; 
    // $("#tab-2").show(); 

, но после обновления, он переходит к первой вкладке, а не вкладки-2 (вкладка так тока)

как это:

$("#tabs").tabs(); 
    // $(document).on("click", ".btn", function() { 
    $("#tabs").tabs("select", window.location.hash); 
    window.location.hash; 
    $("a[href=tabs-2]").trigger("click"); 

Оке, я пытался так:

$ ("# язычки"). Вкладки ( {

 select: function(event, ui) { 
      document.getElementById("tabs-2").value = ui.index; 
     }, 
     selected: document.getElementById("tabs-2").value 
    }); 

, но все же идут на первую вкладку

Answer 1

Попробуйте указать, как показано ниже,

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

Даже если вы получите эту работу , не уверены, что вкладка будет выбрана. Поскольку вкладки будут выбираться только на основе событий, не входящих в строку запроса. Поэтому предпочтительно создавать новую строку запроса как «вкладку» или «активный» или по своему усмотрению и передавать значение активной вкладки.

return RedirectToAction("Edit", routeValues: new { controller = "Account", activetab = "tabs-2" }); 

Затем с помощью JQuery, при загрузке документа вы можете вызвать событие щелчка на вкладке с помощью соответствующего переключателя самостоятельно.

пробуйте,

$("a[href='#tabs-2']").trigger("click");