Как загрузить частичные представления с вкладкой пользовательского интерфейса Jquery, передав параметры?

У меня есть родительская страница (DistributionReview.aspx), на которой есть Дата депозита для выбора с помощью DatePicker.

Чуть ниже у меня есть две вкладки(*DistributionByType* и DistibutionByStatus), на которые я хочу загрузить PartialViews. Здесь параметром PartialView является DepositDate.

И у меня есть пользовательская ViewModel с именем DistributionReviewModel, которую реализует родительская страница.

Я сталкиваюсь со статьями, которые напрямую загружают статические частичные представления (например: http://www.kevgriffin.com/blog/index.php/2010/02/23/using-jquery-tabs-and-asp-net-mvc-partial-views-for-ajax-goodness/ ). Но я ищу любой образец/статьи кода, передавая параметр?

Спасибо, если кто-нибудь может поделиться примерами кода для передачи параметров и загрузить частичное представление как при изменении TabSelection, так и при изменении DepositDate.

Спасибо за ваше время.

HTML-код:

<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;
    }

asp.net-mvc asp.net-mvc-3 asp.net-ajax asp.net-mvc-2 jquery-ui-tabs
person Rita    schedule 21.06.2011    source источник
comment
Вы можете иметь один метод (действие) в контроллере и передать два параметра: один для данных и один для типа («статус» или «тип»)   -  person Jayantha Lal Sirisena    schedule 21.06.2011

Ответы (3)


arrow_upward
4
arrow_downward

здесь у вас есть хорошее руководство, как это сделать:

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

если у вас есть какие-либо вопросы .. дайте нам знать :)

PS вы можете скачать пример и поиграть с ним

person cpoDesign    schedule 21.06.2011

arrow_upward
2
arrow_downward

Html для заголовков вкладок

  <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 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);
       });


}
person Jayantha Lal Sirisena    schedule 21.06.2011

arrow_upward
0
arrow_downward

Также это будет работать.

<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>
person muruge    schedule 31.12.2012