Creation of tabs in MVC

Question

Hi all,

 

 I am developing an application in MVC razor engine.I am stuck with small problem,I created 4 different tabs.code releated to first tab is worked fine.but when i try to bind the data in second tab it not working .

can any one guide me is any thing i missed in that code ?

Here i am attaching my code in  view of application.

 

 

<div id="tabs" class="autoSize">
<ul>
<li><a href="#tabs_TransferLog">TransferLog</a></li>
<li><a href="#tabs_Service_Catalog">Service Catalog</a></li>
<li><a href="#tabs_Service_Schedule">Service Schedule</a></li>
<li><a href="#tabs_Agent_Details">Agent Details</a></li>
</ul>

<div id="tabs_TransferLog">
<form id="FTE_form" method="get" action="">
<fieldset>
<legend>TransferLog</legend>

@using (Html.BeginForm("FTEPartial", "FTE", FormMethod.Post))
{
<div>
<table class="table-no-borders">
<tr>
<td>
@Html.LabelFor(FTE => FTE.selCountry)
</td>
<td>

@Html.DropDownListFor(FTE => FTE.selCountry, Enumerable.Empty<SelectListItem>())
</td>
</tr>
<tr>
<td>
@Html.LabelFor(FTE => FTE.selServiceName)
</td>
<td>
@Html.TextBoxFor(FTE => FTE.selServiceName)
</td>
</tr>
<tr>
<td>@Html.LabelFor(FTE => FTE.isAudit)</td>
<td>
@Html.RadioButtonFor(FTE => FTE.isAudit, true, new { @id = "radAudit" })
<label for="radioAudit">Audit</label>
&nbsp; &nbsp;

@Html.RadioButtonFor(FTE => FTE.isAudit, false, new { @id = "radException" })
<label for="radioException">Exception</label>
</td>
</tr>
<tr>
<td>
@Html.LabelFor(FTE => FTE.selStartDateTime)
</td>

<td>
@Html.EditorFor(FTE => Model, "propStartFullDateTime")
</td>
</tr>
<tr>
<td>
@Html.LabelFor(FTE => FTE.selEndDateTime)
</td>
<td>

@Html.EditorFor(FTE => Model, "propEndFullDateTime")
</td>
</tr>
<tr>
<td>
@Html.LabelFor(FTE => FTE.selResultsPerPage)
</td>
<td>
@Html.DropDownListFor(FTE => FTE.selResultsPerPage, Model.commonProp.resultsPerPage)
</td>
</tr>
</table>
<input type="button" id="search_Transfer_Log_result" value="Submit" />
</div>
}

</fieldset>

<div id="FTE_Content_Demo">


</div>
</form>

</div>


@*region tabs-Service Catlog remote tab *@
<div id="tabs_Service_Catalog">
<form id="ServiceCatalog_form" method="get" action="">
<fieldset>
<legend>Service Catalog</legend>
<div>
<table class="table-no-borders">

<tr>
<td>

@Html.LabelFor(FTE => FTE.Service_CataLog_selections.selServiceName)
</td>
<td>
@Html.TextBoxFor(FTE => FTE.Service_CataLog_selections.selServiceName)
</td>
</tr>
<tr>
<td>
@Html.LabelFor(FTE => FTE.Service_CataLog_selections.selSourceAgent)
</td>
<td>

@Html.DropDownListFor(FTE => FTE.Service_CataLog_selections.selSourceAgent, Enumerable.Empty<SelectListItem>(), "Please select")
</td>
</tr>
<tr>
<td>
@Html.LabelFor(FTE => FTE.Service_CataLog_selections.selTargetAgent)
</td>
<td>
@Html.DropDownListFor(FTE => FTE.Service_CataLog_selections.selTargetAgent, Enumerable.Empty<SelectListItem>())
</td>
</tr>
<tr>
<td>
@Html.LabelFor(FTE => FTE.Service_CataLog_selections.selSourceSystem)
</td>
<td>
@Html.DropDownListFor(FTE => FTE.Service_CataLog_selections.selSourceSystem, Enumerable.Empty<SelectListItem>())
</td>
</tr>
<tr>
<td>
@Html.LabelFor(FTE => FTE.Service_CataLog_selections.selTargetSystem)
</td>
<td>
@Html.DropDownListFor(FTE => FTE.Service_CataLog_selections.selTargetSystem, Enumerable.Empty<SelectListItem>())
</td>
</tr>

</table>
<input type="button" id="search_Audit_Exception_result1" value="Submit" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false"/>
</div>

</fieldset>

<br />
<div id="result_FTE_grid"></div>

</form>
@*endregion tabs-Service Catalog remote*@
</div> 

 

 

 

for binding data in first tab i wrote like this

 

<script type="text/javascript">
$(document).ready(function () {
var panelCounter = 0;

initializeFormValidation('#FTE_form');
$("#tabs").tabs();

//#region tabs_Details TransferLog
$(function () {
var gmtTime = '@DateTime.UtcNow';
var isAdmin = '@HttpContext.Current.User.IsInRole(System_Hierarchy_Information_Portal.Classes.SystemConstants.eaiAdminGroup)';


$("label[for='selStartDateTime']").attr('title', 'Time is in GMT time, here is the current GMT datetime: ' + gmtTime);
$("label[for='selStartDateTime']").attr('class', 'generalTooltip');
$("label[for='selEndDateTime']").attr('title', 'Time is in GMT time, here is the current GMT datetime: ' + gmtTime);
$("label[for='selEndDateTime']").attr('class', 'generalTooltip');
$("label[for='selServiceName']").attr('title', 'Autofill enabled, start typing and select the appropriate result');
$("label[for='selServiceName']").attr('class', 'generalTooltip');
$(document).tooltip();

$("#selCountry").hide();
$("label[for='selCountry']").hide();
$("#selServiceName").hide();
$("label[for='selServiceName']").hide();

$("#FTE_form").validate();
addNotDefaultCommonValidtion();
initializeFormValidation("#FTE_form");
$.validator.addClassRules({
required: true
})
$("#selCountry").rules("add", {
notDefault: true
});
$("#selServiceName").rules("add", {
required: true
});
$("#search_Transfer_Log_result").button();
$("#radAudit").attr('checked', 'checked');


$('#search_Transfer_Log_result').click(function () {

var jsonObj = {
selCountry: ifNoValReturnEmptyString('selCountry'),
selServiceName: ifNoValReturnEmptyString('selServiceName'),
isAudit: $("#radAudit").is(':checked'),
selResultsPerPage: ifNoValReturnEmptyString('selResultsPerPage')

};

$.ajax({
url: '@Url.Action("FTEPartial", "FTE")',
type: 'GET',
data: jsonObj,
dataType: 'html',
cache: false,
success: function (data) {
$('#FTE_Content_Demo').replaceWith("<div id=\"FTE_Content_Demo\"><div id=\"results_FTE_div\"></div></div>");
$('#results_FTE_div').replaceWith(data);

}
});

});



$("#selCountry").cascadingDDL('clear');
$("#selCountry").cascadingDDL({
isRoot: true,
url: '@Url.Action("GetTLCountry", "FTE")',
childSelector: '#selServiceName'
});
$("#selServiceName").cascadingDDL({
url: '@Url.Action("GetTLServiceNames", "FTE")',
filter: { "cntry": "#selCountry" }
});
});

//# region TransferLog

 

 

 

please guide me how to bind the data in second tab?

 

Thanks to every who  read my  question