Tabs in asp.net mvc

Question

I have three tabs on page and one user control. I want to RenderPartial on each tab.

<script type="text/javascript">
    $(document).ready(function() {
        $("#tabs").tabs();               
    });    
</script>


<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Text 1</a></li>
        <li><a href="#tabs-2">Text 2</a></li>
        <li><a href="#tabs-3">Text 3</a></li>
    </ul>
    <div id="tabs-1">
        <% Html.RenderPartial("usercontrol", Model);  %>            
    </div>
    <div id="tabs-2">
        <% Html.RenderPartial("usercontrol", Model);  %>            
    </div>
    <div id="tabs-3">
        <% Html.RenderPartial("usercontrol", Model);  %>            
    </div>
</div>    

how can i get values from different tabs.

Answer 1

If you want to recognize tab, which sent data back, you'll have to pass additional parameter to every partial view:

public class UserControlModel
{
    ModelType ParentModel { get; set; }
    string ID { get; set; }
}

<div id="tabs-1">
    <% Html.RenderPartial("usercontrol", new UserControlModel { ParentModel = Model, ID = "tab1" });  %>            
</div>
<div id="tabs-2">
    <% Html.RenderPartial("usercontrol", new UserControlModel { ParentModel = Model, ID = "tab2" });  %>            
</div>
<div id="tabs-3">
    <% Html.RenderPartial("usercontrol", new UserControlModel { ParentModel = Model, ID = "tab3" });  %>            
</div>

Then use Html.Hidden to store value in form in partial view and by checking value in post method, you can recognize tab.

Your partial view will have to inherit from ViewUserControl<TaskEditModel>:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<TaskEditModel>" %>