How to Load Partial Views with Jquery UI Tab by pa

Question

I have a parent page (DistributionReview.aspx) that has a Deposit Date to select using DatePicker.

Just below I have two tabs(*DistributionByType* and DistibutionByStatus) that I want to load PartialViews. Here the parameter to the PartialView is DepositDate.

And I have a custom ViewModel called DistributionReviewModel that the parent page is implementing.

I am coming across articles that are directly loading static partial views(Ex: http://www.kevgriffin.com/blog/index.php/2010/02/23/using-jquery-tabs-and-asp-net-mvc-partial-views-for-ajax-goodness/ ). But I am looking for any code sample/articles by passing parameter?

Appreciate if anyone can share code samples to pass parameters and load the partialview both when the TabSelection is changed and and DepositDate is changed.

Thanks for your time.

Html Code:

<script type="text/javascript">

$(function () {
    //tab
    $("#divDistributionReview").tabs();

    $("#fileDepositDate").datepicker(); //DateTime Picker
    var depositDate = $("#fileDepositDate").val();

});

<div id="container" >

<% using (Html.BeginForm("frmDistributionReview", "DistibutionReview"))
{ %>

    <div> Select a Date: &nbsp;     <input type="text" id="fileDepositDate" name="datepicker"  value='<%= ViewData["FileDepositDate"] %>' /></div>     
    <div id="divDistributionReview">             
    <ul>                 
    <li><a href="/DistributionReview/DistributionByType">Distribution Type</a></li>                 
    <li><a href="/DistributionReview/DistributionByStatus">Status</a></li>             
    </ul>     
    </div> 
        <%} %>
</div>

C# Code:

public ActionResult DistributionReview()
    {
        ViewData["FileDepositDate"] = DateTime.Now.ToShortDateString();
        var view = View(ApplicationConstants.DistributionReviewViewName, new MegaLockbox.Web.ViewModels.DistributionByTypeViewModel(securityManager, distributionReviewDataAdapter, Convert.ToDateTime(ViewData["FileDepositDate"])));
        return view;
    }


    public ActionResult DistributionByType(string id)
    {
        DateTime depositDate;
        var view = new PartialViewResult();
        if (DateTime.TryParse(id , out depositDate))
        {
            view = PartialView(ApplicationConstants.DistributionByTypeViewName, new MegaLockbox.Web.ViewModels.DistributionByTypeViewModel(securityManager, distributionReviewDataAdapter, depositDate));
        }
        return view;
    }

    public ActionResult DistributionByStatus(string id)
    {
        DateTime depositDate;
        var view = new PartialViewResult();
        if(DateTime.TryParse(id, out depositDate) )
        {
            view = PartialView(ApplicationConstants.DistributionByStatusViewName, new MegaLockbox.Web.ViewModels.DistributionByTypeViewModel(securityManager, distributionReviewDataAdapter, depositDate));
        }
        return view;
    }

Answer 1

here you have nice guide how to do this:

http://ericdotnet.wordpress.com/2009/03/17/jquery-ui-tabs-and-aspnet-mvc/

if you have any questions.. let us know:)

PS you can download the example, and play with it

Answer 2

Html for tab headers

  <li><a onclick="LoadTabData('type')" href="/DistributionReview/DistributionByType">Distribution   Type</a></li>                 
        <li><a onclick="LoadTabData('status')"  href="/DistributionReview/DistributionByStatus">Status</a></li>   

Jquery function

function LoadTabData(type){

if(type='type')

       $.post("YourController/DistributionByType", { id:  $("#fileDepositDate").val()},
            function(data) {
               $(#"yourByTypeTabDiv").html(data);
       });

}else{
  $.post("YourController/DistributionByStatus", { id:  $("#fileDepositDate").val()},
            function(data) {
                $(#"yourByStatusTabDiv").html(data);
       });


}

Answer 3

Also this will work.

<div id="tabs">
<ul>
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
</ul>
 <div id="tab-1">
    @Html.Partial("_PartialViewForTab1", Model)
 </div>
 <div id="tab-2">
    @Html.Partial("_PartialViewForTab2", Model)
 </div>
 <div id="tab-3">
    @Html.Partial("_PartialViewForTab3", Model)
 </div>
</div>