Sveiki šajpusē!
Sen neesmu neko rakstījis (slinkoju), bet nupat esmu nonācis līdz atklājumam, ar kuru vēlējos padalīties.
Nesen sanāca darboties ar ASP.NET MVC lapu, kurā vajadzēja kādu sarakstu pārvērst par divlīmeņu, t.i. lai uzklikšķinot uz kāda no ierakstiem, zem tā atvērtos vēl viens saraksts ar saistītiem ierakstiem.
Sākotnēji likās, ka jqGrid varētu būt problēmas risinājums, vēl jo vairāk tādēļ, ka tas jau “no kastītes” atbalsta daudzlīmeņu sarakstus un asinhronu datu ielādi izmantojot AJAX. Tomēr šim risinājumam pietrūka apakšbloka pielāgošanas un noformēšanas iespēju.
Nedaudz papētot problēmu izrādījās, ka šādu funkcionalitāti ir ļoti ērti panākt izmantojot partial views + jQuery .ajax() izsaukumus.
Lai nodemonstrētu šo paņēmienu darbībā, izveidošu nelielu web lapu, kas parāda reizināšanas tabulu. Galvenā skata kods ir pavisam vienkāršs – uzzīmēt 10x2 tabulu ar skaitļiem no 1 līdz 10:
<table>
<%for (int i = 1; i <= 10; i++)
{%>
<tr>
<td><%:i%></td>
<td></td>
</tr>
<%}%>
</table>
Nākošais sols ir izveidot partial view, kurš zīmēs reizinājumu tabulu:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<int>" %>
<ul>
<%for (int i = 1; i <= 10; i++)
{%>
<li> <%:Model%> x <%:i%> = <%:Model * i%></li>
<%
}%>
</ul>
Lai apskatītos, ka reizināšana strādā, varam papildināt sākotnējo tabulas skatu:
<table>
<%for (int i = 1; i <= 10; i++)
{%>
<tr>
<td><%:i%></td>
<td><% Html.RenderPartial("Table", i); %></td>
</tr>
<%
}%>
</table>
Un papriecāties par rezultātu:
Tālāk ir pienācis laiks melnajai maģijai. Lai uztaisītu smuku, dinamisku kādas daļas parādīšanos/slēpšanu (ar datu saņemšanu izmantojot AJAX, jo mūsu sistēmās būs milzīgi saraksti un mēs gribam ātru sākotnējo lapas ielādi) var izmantot jQuery ajax() funkcijas spēju izmantot datu avotu, kurš atgriež HTML formatētus datus. Savukārt par HTML formāta sagatavošanai var izmantot kontroliera prasmi ģenerēt partial view rezultātu.
Tātad, kontroliera darbība, kura atbildēs par paneļa ģenerēšanu:
public ActionResult GetTable(int i)
{
return PartialView("Table", i);
}
Kā redzams, šeit nav nekā sarežģīta. Nākošais solis ir šīs darbības izsaukšana no javascript. Šeit būs nedaudz jāpaburas, jo metodei ir jāspēj veikt vairāki uzdevumi:
- Pieprasīt un saņemt HTML formatētus datus no kontroliera
- Ielādēt saņemtos HTML datus panelī
- Parādīt/paslēpt paneli
Datu pieprasīšana izmantojot $.ajax() metodi ir sarežģītākā uzdevuma daļa
$.ajax({
type: "GET",
url: actionUrl,
data: {i: number},
dataType: "html",
success: function (result) {
var domElement = $(result);
$("#" + containerId).val(domElement);
},
error: function (request, error, exception) {
alert(request.status + " " + error + " " + exception);
}
});
Parametru detaļās neiedziļināšos, jo par to var izlasīt $.ajax() dokumentācijā, vienīgais ir jāatceras, ka obligāti jānorāda , ka saņemto datu tips ir HTML.
Datu ielāde panelī un paneļa slēpšanu/parādāšanu ļoti atvieglo jQuery metodes val() un toggle()
$("#" + containerId).val(domElement);
$('#' + containerId).toggle();
Pēdējais punkts – salikt visu kopā un papriecāties par to, kā tas darbojas.
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>Reizes rēķins</h2>
<table>
<%for (int i = 1; i <= 10; i++)
{%>
<tr><td
onclick="toggleTable(<%:i%>, 'div<%:i%>', '<%:ResolveUrl("/Home/GetTable") %>')">
<%:i%></td>
<td><div id="div<%:i%>"></div></td>
</tr>
<%
}%>
</table>
<script type="text/javascript">
function toggleTable(number, containerId, actionUrl) {
$('#' + containerId).toggle();
$.ajax({
type: "GET",
url: actionUrl,
data: {i: number},
dataType: "html",
success: function (result) {
var domElement = $(result);
$("#" + containerId).val(domElement);
},
error: function (request, error, exception) {
alert(request.status + " " + error + " " + exception);
}
});
}
</script>
</asp:Content>
Ticu, ka manis rakstītais kods nav pats optimālākais, bet ceru, ka ideju var saprast.