开发者

persist data in tab navigation in asp.mvc

开发者 https://www.devze.com 2023-03-08 02:53 出处:网络
I have three tabs (div- enabled on click) in my view, In tab3 I have a delete functionality. When I click \"Ok\" in the confirmation box, the record is deleted and redirected to my view, which is tab1

I have three tabs (div- enabled on click) in my view, In tab3 I have a delete functionality. When I click "Ok" in the confirmation box, the record is deleted and redirected to my view, which is tab1 enable.

My controller:

public ActionResult DeleteAccount(int? id)
        {
            if(id.HasValue)
            { this.UserAccou开发者_如何学PythonntTasks.DeleteUserProfile(id.Value); }

            return this.RedirectToAction("ManageCompanies");
        }

How can I redirect to the same tab3 after deletion?


Start with this:

return RedirectToAction("ManageCompanies", new { showThirdTab = true });

And in your ManageCompanies Action, take in a bool parameter called showThirdTab. Pass that to your view and if it's true, set a class or some value to tell your javascript to switch to that tab.

Off topic a bit, but might I suggest a different approach? Just return the data/html for your three tabs asynchronously after the delete and load it into the other divs with jQuery.


I have listed below ways, there might be more!

1.All the operations in tabs should be done with ajax call.

2.With Html and model data manipulation.

Steps:

a). Create a property in the model, "ActiveTab" type integer

b). In the view,

@{
   //We can also use the array
   string activeTabCss1  =Model.ActiveTab == 1? "active-tab":String.Empty ;
   string activeTabCss2 = Model.ActiveTab == 2? "active-tab":String.Empty ;
   string activeTabCss3 = Model.ActiveTab == 3? "active-tab":String.Empty ;
}
<div class="tab @activeTabCss1"></div>
<div class="tab @activeTabCss2"></div>
<div class="tab @activeTabCss3"></div>

3.Use jquery for manipulating DOM elements.

Steps:

a). Follow step 2.a

b). In the view, create a hidden for ActiveTab.

@Html.HiddenFor(m=>m.ActiveTab)

c). Write a below javascript function.

$(document).ready(function(){
      var activeTab = $("#ActiveTab").val();
      $(".tab:nth-child("+activeTab +")").addClass('active-tab');
});
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号