MVC, jQuery, JSON, səhifələmə, mapRoute haqqında təlimat seriyası
Mənbə kodunu yükləyin
Giriş
Verilənlər bazası sistemlərində böyük həcmli məlumatların olması səbəbindən müştəri tərəfindəki iş çox vacib oldu. Klassik ASP.NET code-behind yanaşmasında, ASP.NET komponentlərindən istifadə edərək code-behind fayllarında əksər işləri kodlaşdırmaq təbii bir yol idi. Əlavə olaraq, ASP.NET komponentlərinin renderingi və viewstate mexanizmi hazırda klassik ASP.NET-in zəif cəhətləri hesab olunur.
Buna görə də yeni bir paradiqma ortaya çıxdı. Bu yeni paradiqmaya görə, tərtibatçılar performansı aşağı salan viewstate olmadan, daha az renderinq ilə saf HTML və JavaScript ilə işləyə bilərlər.
MVC köhnə dizayn və ya arxitektura nümunəsi kimi tanınsa da, yuxarıda qeyd edilən klassik ASP.NET darboğazlarından sonra xüsusilə populyarlıq qazandı. jQuery və JSON-un səmərəli istifadə edildiyi MVC-də yüksək performanslı tətbiqlər inkişaf etdirmək mümkündür.
Ön Biliklər
Bu məqalə MVC, jQuery, JSON haqqında bəzi giriş səviyyəli məqalələri oxuduqdan sonra faydalı ola bilər. Aşağıdakı linklər yeni başlayanlar üçün faydalı ola bilər:
Kodun İstifadəsi
Bu məqalədə "Təlimat Seriyası" hədəflənir. Buna görə bütün skriptlər əlavə edilmiş mənbə kodundan təmin edilir. Əslində, hər "Təlimat" ayrı bir məqalə ola bilər. Hər halda, bütün mümkün cavablar bir nümunədə birləşdirilmişdir. Bu məqalədə nəzəri məlumatdan çox praktik yanaşma var. Məsələn, sadələşdirmək üçün verilənlər bazası əvəzinə bəzi statik siyahılar istifadə edilmişdir.
Aşağıdakı suallara cavab veriləcək:
- MVC-də yaxşı performansla CRUD necə həyata keçirilir?
- JavaScript confirm və ya alert əvəzinə jQuery dialoqu necə istifadə edilir?
- MVC siyahısında səhifələmə necə həyata keçirilir?
- jQuery istifadə edərək MVC-də "daha çox gör" linki necə yaradılır?
- Linkdə atribut necə istifadə edilir?
- jQuery-də AJAX çağırışı necə icra edilir?
- MVC-də Form kolleksiyası necə istifadə edilir?
- Eyni anda birdən çox qeyd necə silinir?
- MVC-də partial action necə istifadə edilir?
- MVC tətbiqində JSON formatı necə istifadə edilir?
- Master-detal combobox necə doldurulur?
- jQuery datepicker necə istifadə edilir?
- jQuery dialoqu istifadə edərək MVC-də şəkil necə yüklənir?
- Müştəri tərəfində cədvəl sətri necə yaradılır?
- Global.asax-da mapRoute necə fərdiləşdirilir?
- Cədvəlin bütün sətirləri checkALL və uncheckALL necə edilir?
- "Məlumat yüklənir" necə yaradılır?
- jQuery ilə master-detal grid necə yaradılır?
1) MVC-də yaxşı performansla CRUD necə həyata keçirilir?
Ümumi hesab etdikdə, bütün biznes həllərində Create-Read-Update-Delete (Yarat-Oxu-Yenilə-Sil) funksiyaları var. Mümkünsə, həm "insert" həm də "update" üçün eyni "saxlama forması"ndan istifadə etmək tərtıbatçı üçün səmərəli ola bilər. Eyni formadan istifadə action-a göndərilən parametrləri idarə etməklə mümkündür.
Tutaq ki, formada grid-ə bənzər siyahı (əslində HTML cədvəli) və ayrı bir "new" düyməsi var. Cədvəlin hər sətrində həmin sətirlə əlaqəli "edit" və "delete" düymələri var.
"New" basıldıqdan sonra yeni səhifəyə (burada view adlanır) yönləndirmək səmərəli üsul deyil. Çünki yönləndirilən səhifədə məlumat saxlandıqdan sonra, istifadəçi verilənlər bazasına əlavə edilən məlumatu görmək üçün "siyahını göstər" basımalıdır. Bu, siyahı view-a yönləndirmə və dəyişən seçim xərci ilə verilənlər bazasından məlumat seçmək deməkdir!
Yuxarıda qeyd edilən "new bas və yenidən siyahıla" ssenarisi əvəzinə daha yaxşı bir üsul tətbiq oluna bilər.
Create (Yaratma):
- Siyahı view-da "New" basıldıqdan sonra "jQuery saxlama dialoqu" göstərilir.
- create view jQuery dialoquna render edilir.
- create formunu doldurub "Save" basılır.
- Save düyməsi basıldıqda, məlumat AJAX post vasitəsilə müvafiq controller-ə göndərilə bilər.
- Ajax formasının
onSuccessJavaScript funksiyasi var. - "
onSuccess" JavaScript metodunda, əlavə edilən yeni sətir ("onSuccess"-ə parametr kimi gələn JSON) bütün siyahını yeniləmədən siyahının əvvəlinə əlavə edilir (prepend).
Read (Oxuma):
Bu siyahı əməliyyatıdır. Mümkünsə, siyahı formasında yalnız lazım olan məlumatlar göstərilməlidir. Aşağıdakı texnikalar istifadə oluna bilər:
- Combobox və ya rəqəmlərlə səhifələmə,
- "Daha çox gör" tətbiqi,
- Filtrasiyalı siyahı.
Update (Yeniləmə):
- Siyahı view-da, siyahının hər hansı sətrində "Edit" basıldıqdan sonra, seçilmiş sətrin məlumatları ilə eyni "jQuery saxlama dialoqu" göstərilə bilər.
- Bütün addımlar "Create" ilə eynidir, beləliklə yalnız "
onSuccess" metodu "update" əməliyyatına uyğun dəyişdirilir. - Bu halda, verilənlər bazası yeniləndikdən sonra, yalnız redaktə edilmiş sətrin məlumatları view-da yenilənir. Beləliklə, son redaktə edilən qeydi görmək üçün bütün siyahını yeniləməyə ehtiyac yoxdur.
Delete (Silmə):
- Gözəl görünüşlü jQuery dialoqunda təsdiqləndikdən sonra, verilənlər bazasından silindikdən sonra, yalnız seçilmiş sətir siyahıdan silinir. Yenidən, bütün siyahını yeniləməyə ehtiyac yoxdur.
Həm insert həm də edit üçün eyni dialoq istifadə olunur.
PersonList.cshtml view-un linkləri aşağıdakı kimidir:
HTML
@Html.ActionLink("New", "Save",
new { personNo = 0 }, new { @class = "newLink" })
...
@Html.ActionLink("Edit", "Save", new { personNo = item.PersonNo }, new { @class = "editLink" })
- New: Göstərilən mətn.
- Save: Controller-dəki action.
- personNo: "Save" action-a göndərilən parametr. 0 olarsa, dialoq boş açılır, 0-dan böyük olarsa həmin id-nin məlumatları dialoqunda göstərilir.
- newLink: Aşağıdakı jQuery-də istifadə edilən virtual className.
JavaScript
<div id="saveDialog" title="Person Information"></div>
<script type="text/javascript">
var linkObj;
//.....
$(document).ready(function () {
//...
$('#saveDialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
modal: true,
buttons: {
"Save": function () {
$("#update-message").html('');
$("#savePersonForm").submit();
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
//....
setLinks();
});
// ....
function setLinks()
{
$(".editLink, .newLink, uploadPicLink").unbind('click');
$(".editLink, .newLink").click
(
function ()
{
linkObj = $(this);
var dialogDiv = $('#saveDialog');
var viewUrl = linkObj.attr('href');
$.get(viewUrl, function (data)
{
dialogDiv.html(data);
//validation
var $form = $("#savePersonForm");
$form.unbind();
$form.data("validator", null);
$.validator.unobtrusive.parse(document);
$form.validate($form.data("unobtrusiveValidation").options);
dialogDiv.dialog('open');
});
return false;
}
);
//...
} //end setLinks
</script>
PersonController-in Save action-ı aşağıdakı kimidir:C#
// ...
[HttpGet]
public ActionResult Save(int personNo)
{
Person person= new Person();
person.BirthDate = DateTime.Today;
person.PersonNo = 0;
if (personNo > 0)
{
person = Repository.GetPersonList().Where(c => c.PersonNo == personNo).FirstOrDefault();
}
return PartialView(person);
}
// ...
[HttpPost]
public JsonResult Save(Person p)
{
//...
}
// ...
2) JavaScript confirm və ya alert əvəzinə jQuery dialoqu necə istifadə edilir?
Fərdiləşdirilmiş mesaj qutuları Windows tətbiqlərində mümkündür. Web-də üçüncü tərəf komponent kitabxanaları istifadə edildəkdə mümkündür. Aşağıdakı kimi JavaScript qutuları əvəzinə jQuery dialoqu istifadə etmək də mümkündür:
PersonList view-un Delete linki aşağıdakı kimidir:HTML
@Html.ActionLink("Delete", "DeletePerson", new { personNo =
item.PersonNo }, new { @class = "deleteLink", @pkNo = item.PersonNo })
HTML və jQuery kodu aşağıdakı kimidir:
JavaScript
<div id="confirmDialog" title="Warning"></div>
<script type="text/javascript">
//...
$(".deleteLink").live("click", function (e) {
e.preventDefault();
// ..
$("#confirmDialog").html('<br/><br/>sure?');
$("#confirmDialog").dialog({
resizable: false,
height: 200,
width: 300,
modal: true,
buttons: {
"Yes": function () {
// ..
}, // end of yes button
"No": function () {
$(this).dialog("close");
}
} //end buttons
}); //end modal
}); //end delete
//...
</script>
3) MVC siyahısında səhifələmə necə həyata keçirilir?
Səhifələmə, məlumat siyahısı və məlumat ötürülməsi xərcini minimuma endirmək üçün yaxşı yanaşmalardan biridir. Məlumatı göstərmək üçün bir çox üsul tətbiq oluna bilər. Bu "Təlimat"da səhifələmə üçün combobox istifadə olunur. Lakin, lazım olduqda səhifənin altında nömrələmə də mümkündür. Bu tətbiq və tərtıbatçıdan asılıdır. Combobox ilə səhifələmə aşağıdakı kimi inkişaf etdirilə bilər.
İlk öncə, səhifələmə metadatasının yerləşməsi aşağıdakı kimi hazırlanır:
HTML
@model AddressBook_mvc3_jQuery.Models.Paginginfo
...
<div id="paginginfo">
<hr />
<select id="PageSelect"></select>
<span class="pagingPersonNo" style="visibility:hidden">@Model.id</span>
<span class="pagingTotalCount" style="visibility:hidden">@Model.TotalCount</span>
<span class="pagingPageSize" style="visibility:hidden">@Model.PageSize</span>
<span class="pagingSummary">aaa</span>
<hr/>
</div>
<div id="content"></div>
...
Səhifə ilk dəfə yükləndikdə, "
paginginfo" id-li div doldurulur və aşağıdakı skriptlə qeydlərin ilk səhifəsi göstərilir.JavaScript
<script type="text/javascript">
//...
function initializePaging()
{
var PersonNo = $("#paginginfo .pagingPersonNo").text();
var TotalCount = $("#paginginfo .pagingTotalCount").text();
var PageSize = $("#paginginfo .pagingPageSize").text();
var PageSelect = $("#PageSelect");
if (TotalCount==0)
{
PageSelect.html("");
$("#paginginfo").hide();
}
else
{
PageSelect.html("");
var num = Math.ceil(TotalCount/PageSize);
for (var i = 1; i <= num; i++)
{
if (i==1)
PageSelect.append($("<option selected></option>").val(i).text(i));
else
PageSelect.append($("<option></option>").val(i).text(i));
}
}
fillData(PersonNo, 1);
}
//..
function fillData(parPersonNo, parPageNo)
{
if (parPageNo)
{
$.ajax({
type: "POST",
url: "@Url.Action("GetAddressList", "Address")",
data: { personNo: parPersonNo, pageNo: parPageNo },
cache: false,
dataType: "json",
success: function (data)
{
if (data.Html)
{
$("#content").html(data.Html);
buttonizeALL();
setLinkAbilites();
setPagingSummary(parPageNo);
}
else
{
alert('opps!');
}
},
error: function(exp)
{
alert('Error address : ' + exp.responseText);
}
}); //end ajax call
} // if (parPageNo)
}//fillData
//...
</script>
Controller-dəki action kodu aşağıdakı kimidir. Göründüyü kimi, nəticə siyahısı
RenderPartialView metodu istifadə edilərək qismən render edilir və JSON obyektinə yerləşdirilir.C#
public class AddressController : Controller
{
//..
public JsonResult GetAddressList(int personNo, int pageNo)
{
int pageSize = 5; //it could be parameter
int skipCnt = ((pageNo - 1) * pageSize);
List<Address> list = (from x in Repository.GetAddressList() where x.PersonNo ==
personNo orderby x.AddressNo descending select x).Skip(skipCnt).Take(pageSize).ToList();
JsonResult jr = Json(new
{
Html = this.RenderPartialView("AddressList", list),
Message = "OK"
}, JsonRequestBehavior.AllowGet);
return jr;
}
//..
}
"
PageSelect" id-li combobox-un selecteditem-i dəyişdikdə, aşağıdakı jQuery skripti işləyir.JavaScript
//..
$("#PageSelect").change(function ()
{
var $this = $(this);
var parPageNo = $this.val();
var parPersonNo = $("#paginginfo .pagingPersonNo").text();
fillData(parPersonNo,parPageNo);
});//PageSelect
//..
4) jQuery istifadə edərək MVC-də "daha çox gör" linki necə yaradılır?
Bu texnika bir çox populär veb saytlarda istifadə olunur. Böyük siyahılara tətbiq olunmalıdır. "Daha çox gör" aşağıdakı kimi həyata keçirilə bilər:
Siyahı view-da "more" linki var.
HTML
//
<table id="NoteTable"></table>
<br />
<a href="#" style="display:none" id="more">more</a>
<div id="saveDialog" title="Notes Information"></div>
<div id="confirmDialog" title="Warning"></div>
//
"more" klikləndikdə, aşağıdakı jQuery skripti işləyir.
JavaScript
//..
//load more results
$(function ()
{
$("#more").click(function (e)
{
e.preventDefault();
var lastNoteNo = $("#NoteTable tr:last .noteNo").text();
if (lastNoteNo)
{
var PersonNo = $("#paginginfo .pagingPersonNo").text();
fillData(PersonNo, lastNoteNo);
}
//--- scroll to bottom of page ---
var $target = $('html,body');
$target.animate({scrollTop: $target.height()}, "slow");
//--- /scroll to bottom of page ---
return false;
});
});
//..
function fillData(parPersonNo, parLastNoteNo)
{
if (parPersonNo)
{
$.ajax({
type: "POST",
url: "@Url.Action("GetNoteList", "Note")",
data: { personNo: parPersonNo, lastNoteNo: parLastNoteNo} ,
cache: false,
dataType: "json",
success: function (data)
{
if (data.Html)
{
$("#NoteTable").append(data.Html);
buttonizeALL();
setLinkAbilites();
if (data.HasMore)
$("#more").show();
else
$("#more").hide();
}
else
{
alert('opps!');
}
},
error: function(exp)
{
alert('Error address : ' + exp.responseText);
}
}); //end ajax call
} // if
}//func
// ..
Controller-dəki aşağıdakı action JSON nəticə qaytarir.
C#
public class NoteController : Controller
{
//...
public JsonResult GetNoteList(int personNo, int lastNoteNo)
{
int pageSize = 5; //it could be parameter
bool hasMore = false;
List<Note> list = null;
if (lastNoteNo == 0)
{
list = (from x in Repository.GetNoteList() where x.PersonNo == personNo
orderby x.NoteNo descending select x).Take(pageSize).ToList();
hasMore = (from x in Repository.GetNoteList() where x.PersonNo ==
personNo select x.NoteNo).Take(pageSize + 1).Count() - pageSize > 0;
}
else
{
list = (from x in Repository.GetNoteList() where x.NoteNo < lastNoteNo &&
x.PersonNo == personNo orderby x.NoteNo descending select x).Take(pageSize).ToList();
hasMore = (from x in Repository.GetNoteList() where x.NoteNo < lastNoteNo &&
x.PersonNo == personNo select x.NoteNo).Take(pageSize + 1).Count() - pageSize > 0;
}
JsonResult jr = Json(new
{
Html = this.RenderPartialView("_NoteList", list),
Message = "OK",
HasMore = hasMore
}, JsonRequestBehavior.AllowGet);
return jr;
}
// ...
}
5) Linkdə atribut necə istifadə edilir?
Bu xüsusilə redaktə, silmə, ətraflı göstəriş kimi düymələr üçün istifadə etmək üçün yaxşı bir funksiyardır.
Siyahı yaradıldıqda, müvafiq açar linkə atribut kimi əlavə olunur. Linkin klik hadisəsində həmin açar istifadə olunur və əməliyyat asanıqla həyata keçirilir.
Məsələn, siyahının hər sətrində silmə linki olduğunu tütsün. Sətrin silmə linki klikləndikdə, controller-dəki "delete action"ın parametri kimi açarı istifadə etmək mümkündür.
HTML
@Html.ActionLink("Delete", "DeletePerson", new { personNo = item.PersonNo },
new { @class = "deleteLink", @pkNo = item.PersonNo })
Müştəridə mənbəyi yoxladıqda, aşağıdakı sətir görünəcək.
HTML
<a role="button" class="deleteLink ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
href="/Person/DeletePerson/1" pkno="1"><span class="ui-button-text">Delete</span></a>
jQuery skriptində atribut aşağıdakı kimi istifadə olunur. Məsələn, pkno 1 ilə istifadə olunur.
JavaScript
$(".deleteLink").live("click", function (e)
{
e.preventDefault();
var pkNo = $(this).attr("pkNo");
//..
});
6) jQuery-də AJAX çağırışı necə icra edilir?
AJAX çağırışı tətbiqi daha sürətli etmək üçün çox yaxşı bir funksiyardır. Verilənlər bazasında böyük miqdarda məlumat olan bəzi tətbiqlərdə, tərtıbatçılar iki məlumat xətti ilə az miqdarda məlumat ötürülməsinə diqqət yetirməlidir. Birinci xətt verilənlər bazası və tətbiq arasında, ikincisi tətbiq və müştəri brauzer arasındadır. Belə tələblər üçün AJAX çağırışı çox əlverişlidir.
JavaScript
//..
$.ajax({
type: "POST",
url: "/Person/DeletePerson",
data: { personNo: pkNo },
cache: false,
dataType: "json",
success: function ()
{
//..
},
error: function (jqXHR, exception)
{
alert('Uncaught Error.\n' + jqXHR.responseText);
}
}); //end ajax call
//..
URL aşağıdakı kimi də istifadə oluna bilər.
JavaScript
//..
url: "@Url.Action("DeletePerson", "Person")",
// ..
7) MVC-də Form kolleksiyası necə istifadə edilir?
Forma post edildikdə, bütün forma elementləri controller-dəki müvafiq action-a kolleksiya kimi göndərilir. Controller-də hər açar və dəyər cütündən istifadə etmək olar. Aşağıdakı kimi saxlama forması olduğunu tütsün:
HTML
@model AddressBook_mvc3_jQuery.Models.Address
@{ViewBag.Title = "Address"; }
@using (Ajax.BeginForm("Save", "Address", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
OnSuccess = "saveSuccess"
}, new { @id = "saveForm" }))
{
@Html.ValidationSummary(true)
<input style="visibility:hidden" type="text" name="TBPersonNo"
id="idTBPersonNo" value="@Model.PersonNo"/>
<input style="visibility:hidden" type="text" name="TBAddressNo"
id="idTBAddressNo" value="@Model.AddressNo"/>
<br />
<fieldset>
<table>
<tr>
<td>Address Type</td>
<td>
<select name="CBAddressType" id="idCBAddressType" style="width:120px">
</select>
</td>
</tr>
<tr>
<td>Country</td>
<td>
<select name="CBcountry" id="idCBcountry" style="width:120px">
</select>
</td>
</tr>
<tr>
<td>City</td>
<td>
<select name="CBcity" id="idCBcity" style="width:120px">
</select>
</td>
</tr>
<tr>
<td>AddressText</td>
<td>
<textarea rows="4" cols="25" name="TBAddressText"
id="idTBAddressText">@Model.AddressText</textarea>
</td>
</tr>
</table>
</fieldset>
}
View-un məlumatı, aşağıda göstərildiyi kimi model obyekti və ya FormCollection kimi controller-dəki action-a göndərilə bilər:
C#
//..
[HttpPost]
public JsonResult Save(FormCollection fc)
{
object obj = null;
Address addrTmp = new Address();
addrTmp.AddressNo = Convert.ToInt32(fc["TBAddressNo"].ToString());
addrTmp.AddressTypeNo = Convert.ToInt32(fc["CBAddressType"].ToString());
addrTmp.AddressText = fc["TBAddressText"].ToString();
addrTmp.CityNo = Convert.ToInt32(fc["CBcity"].ToString()); ;
addrTmp.PersonNo = Convert.ToInt32(fc["TBPersonNo"].ToString());
if (ModelState.IsValid)
{
if (addrTmp.AddressNo == 0)
{
//find last person
//if it is database system no need to this line. Probably the AddressNo would be autoincrement
addrTmp.AddressNo = Data.Repository.GetAddressList().OrderBy(x => x.AddressNo).Last().AddressNo + 1;
Data.Repository.GetAddressList().Add(addrTmp);
obj = new { Success = true,
Message = "Added successfully",
Object = addrTmp,
operationType = "INSERT",
Html = this.RenderPartialView("_addressLine", addrTmp )
};
}
else
{
Address addr = Repository.GetAddressList().Where(c => c.AddressNo == addrTmp.AddressNo).FirstOrDefault();
addr.AddressTypeNo = addrTmp.AddressTypeNo;
addr.AddressText = addrTmp.AddressText;
addr.CityNo = addrTmp.CityNo;
addr.PersonNo = addrTmp.PersonNo;
obj = new { Success = true,
Message = "Updated successfully",
Object = addr,
operationType = "UPDATE",
Html = this.RenderPartialView("_addressLine", addr )
};
}
}
else
{
obj = new { Success = false, Message = "Please check form" };
}
return Json(obj, JsonRequestBehavior.DenyGet);
}
//..
8) Eyni anda birdən çox qeyd necə silinir?
Bəzi səhifələrdə eyni anda çox sayda qeydi silmək işi asanlaşdıra bilər. Birdən çox qeydi silmək seçilmiş bütün qeydlərin açarlarını toplamaqla mümkündür. Bütün açarlar controller-ə göndərildikdən sonra, silmə aşağıdakı kimi icra oluna bilər.
Əvvəlcə "deleteALL" id-li "Delete Selected" düyməsi kliklənir. Yes basıldıqdan sonra, aşağıdakı jQuery skripti istifadə oluna bilər. Əlbəttə, alternativ skriptlər də inkişaf etdirilə bilər.
JavaScript
//..
$("#deleteALL").live("click", function (e)
{
e.preventDefault();
var len = $("#NoteTable tr").length;
$("#confirmDialog").html('<br/><br/>deleting all selecteds.. sure?');
$("#confirmDialog").dialog({
resizable: false,
height: 200,
width: 300,
modal: true,
buttons:
{
"Yes": function ()
{
$(this).dialog("close");
var strSelecteds = '';
var rows = $("#NoteTable tr");
for(var i=0; i< rows.length; i++)
{
var row = $(rows).eq(i);
var span = row.find('span#cboxSpan');
var cb = row.find('span#cboxSpan').find('input.cboxDELclass');
var checked=(cb.is(':checked'));
var pkno = cb.attr("pkno");
if (checked)
{
strSelecteds = strSelecteds + pkno + ',';
}
}//
if (strSelecteds.length>0)
{
strSelecteds = strSelecteds.substring(0,strSelecteds.length-1);
}
if (strSelecteds.length>0)
{
$.ajax({
type: "POST",
url: "/Note/DeleteALL",
data: { noteNOs: strSelecteds },
cache: false,
dataType: "json",
success: function (data)
{
var strSelectedsArr = strSelecteds.split(',');
for (var i = 0; i < strSelectedsArr.length; i++)
{
var rowNo = '#row-' + strSelectedsArr[i];
$(rowNo).remove();
//alert(strSelectedsArr[i]);
}//for
$('#saveDialog').dialog('close');
$('#Message').html(data.Message);
$('#Message').delay(300).slideDown(300).delay(1000).slideUp(300);
},
error: function(jqXHR, exception)
{
alert('Uncaught Error.\n' + jqXHR.responseText);
}
}); //end ajax call
}
else
alert('No row selected');
}, // end of yes button
"No": function ()
{
$(this).dialog("close");
}
} //end buttons
}); //end modal
}); //end deleteALL
//...
上記のように、複数レコードの削除は「Note」controller内の「DeleteALL」actionへのajax呼び出しで行われます。
9) MVCでPartial Actionを使用する方法は？
一部の状況では、多くのフォームで使用する必要があるコンポーネントが必要です。例えば、以下に示すようないくつかの別々のフォームで「人物情報ボックス」が必要な場合があります。
_personinfoビューは以下のようになります。
HTML
@model AddressBook_mvc3_jQuery.Models.Person
@{ ViewBag.Title = "_personinfo"; }
<fieldset>
<legend>Person info</legend>
<table>
<tr><td><b><span> @Model.FirstName @Model.LastName </span></b>(@String.Format("{0:dd.MM.yyyy}",
Model.BirthDate))</td><td>(@Model.CategoryName)</td></tr>
</table>
</fieldset>
任意のビューでpartial actionを使用するには、以下のコード行を使用できます。
HTML
//..
<h2>Address List</h2>
<div>
@Html.Action("_personinfo", "Common")
</div>
//..
10) MVCアプリケーションでJSON形式を使用する方法は？
JSON形式は、controller内のactionにパラメータを送信するときと、actionから結果を取得するときに使用できます。以下に示すように、Note controller内のDeleteNote actionにはnoteNoパラメータがあります。ここで、pkNoは値で呼び出されるパラメータです。
JavaScript
$(".deleteLink").live("click", function (e)
{
e.preventDefault();
var pkNo = $(this).attr("pkNo");
//..
$.ajax({
type: "POST",
url: "/Note/DeleteNote",
data: { noteNo: pkNo },
cache: false,
dataType: "json",
success: function ()
{
$(rowNo).remove();
},
error: function(jqXHR, exception)
{
alert('Uncaught Error.\n' + jqXHR.responseText);
}
}); //end ajax call
//..
}); //end delete
controller内のactionからJSON結果を取得することが可能です。以下のスクリプトは結果をjsonオブジェクトとして返します。
C#
//..
[HttpPost]
public JsonResult DeleteNote(int noteNo)
{
string message = string.Empty;
try
{
Note n = Data.Repository.GetNoteList().Where(c => c.NoteNo == noteNo).FirstOrDefault();
if (n != null)
{
Data.Repository.GetNoteList().Remove(n);
message = "Deleted";
}
else
{
message = "Note not found!";
}
}
catch (Exception ex)
{
message = ex.Message;
}
return Json(new { Message = message }, JsonRequestBehavior.AllowGet);
}
//..
11) Master-detal combobox necə doldurulur?
Aşağıdakı skriptdə, ölkə combobox-unun dəyişən elementi şəhər combobox-unu təsirləyir.
Aşağıdakı ajax çağırışında ölkəNr parametri ötürülür. Şəhərlər siyahısı doldurulur. Bu üsulda, bütün ölkələrin şəhərlərini bir dəfəyə bütün verilənlər bazasından seçmək əvəzinə, yalnız seçilmiş ölkənin şəhərləri seçilir.
HTML
@model AddressBook_mvc3_jQuery.Models.Address
@{ViewBag.Title = "Address"; }
@using (Ajax.BeginForm("Save", "Address", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
OnSuccess = "saveSuccess"
}, new { @id = "saveForm" }))
{
@Html.ValidationSummary(true)
<input style="visibility:hidden" type="text" name="TBPersonNo"
id="idTBPersonNo" value="@Model.PersonNo"/>
<input style="visibility:hidden" type="text" name="TBAddressNo"
id="idTBAddressNo" value="@Model.AddressNo"/>
<br />
<fieldset>
<table>
<tr>
<td>Address Type</td>
<td>
<select name="CBAddressType" id="idCBAddressType" style="width:120px">
</select>
</td>
</tr>
<tr>
<td>Country</td>
<td>
<select name="CBcountry" id="idCBcountry" style="width:120px">
</select>
</td>
</tr>
<tr>
<td>City</td>
<td>
<select name="CBcity" id="idCBcity" style="width:120px">
</select>
</td>
</tr>
<tr>
<td>AddressText</td>
<td>
<textarea rows="4" cols="25" name="TBAddressText"
id="idTBAddressText">@Model.AddressText</textarea>
</td>
</tr>
</table>
</fieldset>
}
最初の読み込みでは、Address controller内の「GetCountryList」actionを使用してidCBCountryコンボボックスが入力されます。その後、国コンボボックスが変更されると、以下のように都市コンボボックスが入力されます。
JavaScript
<script type="text/javascript">
$(document).ready(function () {
//...
//-----------------------------------------------------
$.ajax({
type: "POST",
url: "@Url.Action("GetCountryList", "Address")",
data: {},
cache: false,
dataType: "json",
success: function (data)
{
var idCBcountry = $("#idCBcountry");
idCBcountry.html("");
if (@Model.AddressNo>0)
{
for (var i = 0; i < data.List.length; i++)
{
var item = data.List[i];
if (item.CountryNo == @Model.CountryNo)
{
idCBcountry.append($("<option selected></option>").val(item.CountryNo).text(item.CountryName));
fillCity(item.CountryNo);
}
else
{
idCBcountry.append($("<option />").val(item.CountryNo).text(item.CountryName));
}
} //for
}
else
{
for (var i = 0; i < data.List.length; i++)
{
var item = data.List[i];
if (i==0)
{
idCBcountry.append($("<option selected></option>").val(item.CountryNo).text(item.CountryName));
fillCity(item.CountryNo);
}
else
{
idCBcountry.append($("<option />").val(item.CountryNo).text(item.CountryName));
}
} //for
}//else
},
error: function(exp)
{
alert('ErrorCountry : ' + exp.responseText);
}
});
//-----------------------------------------------------
$("#idCBcountry").change(function () {
var $this = $(this);
var CountryNo = $this.val();
if (CountryNo)
{
fillCity(CountryNo);
}//if
});
//-----------------------------------------------------
});//end of function
function fillCity(parCountryNo)
{
$.ajax({
type: "POST",
url: "@Url.Action("GetCityList", "Address")",
data: {CountryNo: parCountryNo},
cache: false,
dataType: "json",
success: function (data)
{
var idCBcity = $("#idCBcity");
idCBcity.html("");
for (var i = 0; i < data.List.length; i++)
{
var item = data.List[i];
if (item.CityNo == @Model.CityNo)
{
idCBcity.append($("<option selected></option>").val(item.CityNo).text(item.CityName));
}
else
{
idCBcity.append($("<option />").val(item.CityNo).text(item.CityName));
}
}
},
error: function(exp)
{
alert('ErrorCity : ' + exp.responseText);
}
});
}//fillCity
</script>
Aşağıdakı action-da şəhərlər qaytarılır:
C#
public class AddressController : Controller
{
//..
public JsonResult GetCountryList()
{
object obj = null;
List<Country> list = Repository.GetCountryList();
obj = new { Success = true, Message = "OK", List = list };
return Json(obj, JsonRequestBehavior.AllowGet);
}
public JsonResult GetCityList(int CountryNo)
{
object obj = null;
List<City> list = Repository.GetCityList().Where(c => c.CountryNo == CountryNo).ToList(); ;
obj = new { Success = true, Message = "OK", List = list };
return Json(obj, JsonRequestBehavior.AllowGet);
}
//..
}
Bu texnika view formasındakı istənilən html elementi üçün istifadə oluna bilər.
12) jQuery datepicker necə istifadə edilir?
Tarix tipi demək olar ki, bütün biznes tətbiqlərində istifadə olunur. Mədəniyyət fərqləri səbəbindən bu tipi istifadə etmək tərtıbatçılar üçün problem ola bilər. Lakin jQuery datepicker tarix tipinin istifadəsini asanlaşdırır.
Siyahıda istənilən formatda tarixi göstərmək üçün aşağıdakı sətirdən istifadə oluna bilər.
HTML
<span class="BirthDate"> @String.Format("{0:dd.MM.yyyy}", item.BirthDate) </span>
Saxlama formasında aşağıdakı html skripti istifadə olunur.
HTML
...
<div class="editor-label">
@Html.LabelFor(model => model.BirthDate)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.BirthDate,
new { @class = "BirthDateSave",
@id = "TBBirthDate",
@Value = Model.BirthDate.ToString("dd.MM.yyyy")
})
</div>
...
jQuery Datepicker, eyni səhifədə aşağıdakı skriptlə @Html.TextboxFor ilə əlaqələndirilə bilər.
JavaScript
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$(".BirthDateSave").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd.mm.yy',
showOn: 'both'
});
});
</script>
Müvafiq .cshtml-in başına aşağıdakı sətirləri daxil etmək lazımdır.
HTML
..
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
..
13) jQuery dialoqu istifadə edərək MVC-də şəkil necə yüklənir?
Şəkil ayrı bir view-da asanıqla yüklənə bilər. Lakin şəkil yükləmək üçün ayrı bir view-a yönləndirmək və sonra siyahı view-a yönləndirmək xərc baxımından səmərəsiz ola bilər. Əvvəlcə, siyahı view-da hər sətrin yükləmə linkini klikləyərək jQuery dialoqu açıla, şəkil gözdən keçirilə və yüklənə bilər.
"Upload Pic" klikləndikdə, aşağıdakı skript işləyir.
JavaScript
//..
$(".uploadPicLink").click
(
function ()
{
linkObj = $(this);
var dialogDiv = $('#savePicDialog');
var viewUrl = linkObj.attr('href');
$.get(viewUrl, function (data) {
dialogDiv.html(data);
//validation
var $form = $("#savePersonPicForm");
$form.unbind();
$form.data("validator", null);
$.validator.unobtrusive.parse(document);
$form.validate($form.data("unobtrusiveValidation").options);
dialogDiv.dialog('open');
});
return false;
}
);
//..
jQuery dialoquna yüklənən SavePersonPic forması aşağıdakı kimidir. jQuery dialoqunda fayl yükləmək üçün iframe istifadə olunur.
HTML
@model AddressBook_mvc3_jQuery.Models.Person
@{ViewBag.Title = "Save image";}
@using (Html.BeginForm("SavePersonPic", "Person", FormMethod.Post,
new
{
enctype = "multipart/form-data",
id = "savePersonPicForm",
name = "savePersonPicForm",
target = "UploadTarget"
}))
{
@Html.ValidationSummary(true)
<div id="update-message" class="error invisible"></div>
<fieldset>
<legend>Person Picture</legend>
<div class="editor-label">
<label for="file">Upload Image:</label>
</div>
<div class="editor-field">
<input type="file" name="file" id="file"/>
</div>
</fieldset>
}
<iframe id="UploadTarget"
name="UploadTarget" onload="UploadImage_Complete();"
style="position: absolute; left: -999em; top: -999em;">
</iframe>
controller-dəki fayl yükləmə action-ı aşağıdakı kimidir:
C#
public class PersonController : Controller
{
//..
//-------------- image -----
[HttpGet]
public ActionResult SavePersonPic(int personNo)
{
Person person = new Person();
if (personNo > 0)
{
person = Repository.GetPersonList().Where(c => c.PersonNo == personNo).FirstOrDefault();
}
return PartialView(person);
}
[HttpPost]
public JsonResult SavePersonPic(HttpPostedFileBase file, int personNo)
{
string message = string.Empty;
bool success = false;
string imgPath = "";
string fileName = "";
try
{
string path = System.IO.Path.Combine(Server.MapPath("~/Content/images"),
System.IO.Path.GetFileName(file.FileName));
file.SaveAs(path);
Person p = Data.Repository.GetPersonList().Where(r => r.PersonNo == personNo).FirstOrDefault();
p.imgFileName = file.FileName;
ViewBag.Message = "File uploaded successfully";
message = ViewBag.Message;
fileName = file.FileName;
imgPath = Url.Content(String.Format("~/Content/images/{0}", fileName));
success = true;
}
catch (Exception ex)
{
message = ex.Message;
success = true;
imgPath = "";
fileName = "";
}
return Json(
new { Success = success,
Message = message,
PersonNo=personNo,
ImagePath = imgPath,
FileName = fileName
},
JsonRequestBehavior.AllowGet
);
}
//------------- /image --------
// ..
}
iframe-in JavaScript "onload" funksiyası aşağıdakı kimidir. Yüklənən şəkil sətri yeniləmədən siyahının müvafiq sətrində göstərilir.
JavaScript
//..
function UploadImage_Complete()
{
//Check first load of the iFrame
if (isFirstLoad == true)
{
isFirstLoad = false;
return;
}
try
{
//Reset the image form
document.getElementById("savePersonPicForm").reset();
var jsonTxt = ($('#UploadTarget').contents()).text();
var jsonObj = JSON.parse(jsonTxt);
var rowid = '#row-' + jsonObj.PersonNo;
var row = $('#personTable ' + rowid);
var imgid = "#img-" + jsonObj.PersonNo;
var img = row.find(imgid);
$(img).attr("src", jsonObj.ImagePath);
$('#Message').html(jsonObj.Message);
$('#Message').delay(300).slideDown(300).delay(1000).slideUp(300)
$('#savePicDialog').dialog('close');
}
catch (err)
{
alert(err.get_Message());
}
}
//..
14) Müştəri tərəfində cədvəl sətri necə yaradılır?
Verilənlər bazasına əlavə edilən qeydlər müştəri tərəfindəki siyahıda göstərilməlidir. Bu bir çox üsulla həyata keçirilə bilər. Qeyd əlavə edildikdən sonra siyahı verilənlər bazasından tamən yenilənə bilər, lakin bu ağır bir əməliyyat olur. Lakin javascript və ya jquery istifadə etdikdə, view-dakkı bütün elementləri yeniləmədən view-a yeni sətir əlavə etmək mümkündür. Burada iki üsul haqqında danışılacaq.
İlk öncə, aşağıdakı kimi sətir və sətrin hücrələri javascript ilə bir-bir yaradılır. Aşağıdakı skriptdə göstərildiyi kimi, bu formanın submit-indən sonra saveSuccess JavaScript funksiyası belə ssenari üçün istifadə olunur.
HTML
..
@model AddressBook_mvc3_jQuery.Models.Person
@{ ViewBag.Title = "Save Person"; }
..
@using (Ajax.BeginForm("Save", "Person", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
OnSuccess = "saveSuccess"
}, new { @id = "savePersonForm" }))
{
@Html.ValidationSummary(true)
..
}
..
saveSuccess javascript metodu aşağıdakı kimidir. action əməliyyat tipini əhatə edən json nəticə qaytarır. Əməliyyata görə, yəni INSERT və ya UPDATE-ə görə view-dakı cədvəl dəyişdirilir. Verilənlər bazasına yeni qeyd əlavə edildikdə, cədvələ yeni sətir əlavə olunur (prepend). Verilənlər bazasındakı mövcud qeyd yeniləndikdə, yalnız cədvəldəki müvafiq sətir dəyişdirilir.
JavaScript
function saveSuccess(data)
{
if (data.Success == true)
{
if (data.operationType == 'UPDATE')
{
//we update the table's row info
var parent = linkObj.closest("tr");
$(parent).animate({ opacity: 0.3 }, 200, function ()
{;});
parent.find(".FirstName").html(data.Object.FirstName);
parent.find(".LastName").html(data.Object.LastName);
parent.find(".CategoryName").html(data.Object.CategoryName);
var date = new Date(parseInt(data.Object.BirthDate.substr(6)));
var dateStr = FormatDate(date);
parent.find(".BirthDate").html(dateStr);
$(parent).animate({ opacity: 1.0 }, 200, function () {
;
});
}
else
{ //INSERT
//we add the new row to table
//we do not refresh all records on screen
try
{
var personTable = document.getElementById("personTable");
var row = personTable.insertRow(1); //row 0 is header
row.setAttribute("id", 'row-' + data.Object.PersonNo.toString());
var buttonsLinks =
'<a role="button" class="editLink ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover ui-state-focus" href="/Person/Save/' + data.Object.PersonNo.toString() + '"><span class="ui-button-text">Edit</span></a> ' +
'<a role="button" class="adressLink ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" href="/Address/Index/' + data.Object.PersonNo.toString() + '"><span class="ui-button-text">Addresses</span></a> ' +
'<a role="button" class="noteLink ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" href="/Note/Index/' + data.Object.PersonNo.toString() + '"><span class="ui-button-text">Notes</span></a> ' +
'<a role="button" class="deleteLink ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" href="/Person/Delete/' + data.Object.PersonNo.toString() + '" pkno="' + data.Object.PersonNo.toString() + '"><span class="ui-button-text">Delete</span></a>';
var cellButtons = row.insertCell(0);
cellButtons.innerHTML = buttonsLinks;
var cellPersonNo = row.insertCell(1);
cellPersonNo.innerHTML = "<span class=\"PersonNo\">" + data.Object.PersonNo + "</span>";
var cellCategoryName = row.insertCell(2);
cellCategoryName.innerHTML = "<span class=\"CategoryName\">" + data.Object.CategoryName + "</span>";
var cellFN = row.insertCell(3);
cellFN.innerHTML = "<span class=\"FirstName\">" + data.Object.FirstName + "</span>";
var cellLN= row.insertCell(4);
cellLN.innerHTML = "<span class=\"LastName\">" + data.Object.LastName + "</span>";
var cellBirthDate = row.insertCell(5);
var date = new Date(parseInt(data.Object.BirthDate.substr(6)));
var dateStr = FormatDate(date);
cellBirthDate.innerHTML = "<span class=\"BirthDate\">" + dateStr + "</span>";
var cellimgFileName = row.insertCell(6);
cellimgFileName.innerHTML =
"<img id=\"img-" + data.Object.PersonNo.toString() + "\" alt=\"" + data.Object.ImgFileName + "\" src=\"/content/images/" + "noimg.jpg" + "\" height=\"35px\" width=\"50px\"><br><a class=\"uploadPicLink\" href=\"/Person/SavePersonPic/" + data.Object.PersonNo.toString() + "\" pkno=\"" + data.Object.PersonNo.toString() + "\" style=\"font-size:9px;\">Upload Pic</a>";
setLinks();
}
catch (err) {
alert(err.Message);
}
}
$('#saveDialog').dialog('close');
$('#Message').html(data.Message);
$('#Message').delay(300).slideDown(300).delay(1000).slideUp(300);
}
else {
$("#update-message").html(data.ErrorMessage);
$("#update-message").show();
}
}
上記で述べた最初の方法は古いアプローチのように見えるかもしれません。そのため、以下の2番目の方法がより適用しやすいかもしれません。この方法では、レンダリングされたhtmlを使用してテーブルに行を追加または更新します。以下のようなテーブルがあると仮定します。
HTML
@model IEnumerable<AddressBook_mvc3_jQuery.Models.Address>
<table id="AddressTable">
<tr>
<th></th>
<th>
#
</th>
<th>
AddressType
</th>
<th>
City/Country
</th>
<th>
Address Text
</th>
</tr>
@foreach (var item in Model)
{
<tr id="row-@item.AddressNo">
<td>
@Html.ActionLink("Edit", "Save",
new { addressNo = item.AddressNo, personNo = item.PersonNo }, new { @class = "editLink" })
@Html.ActionLink("Delete", "DeleteAddress",
new { addressNo = item.AddressNo }, new { @class = "deleteLink", @pkNo = item.AddressNo })
</td>
<td>
<span class="AddressNo">@item.AddressNo</span>
</td>
<td>
<span class="AddressTypeName">@item.AddressTypeName</span>
</td>
<td>
<span class="CityName">@item.CityName/@item.CountryName</span>
</td>
<td>
<span class="AddressText">@item.AddressText</span>
</td>
</tr>
}
</table>
"new" klikləndikdə, aşağıdakı skript jQuery dialoquna yüklənir.
HTML
@model AddressBook_mvc3_jQuery.Models.Address
@{ViewBag.Title = "Address"; }
@using (Ajax.BeginForm("Save", "Address", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
OnSuccess = "saveSuccess"
}, new { @id = "saveForm" }))
{
@Html.ValidationSummary(true)
<input style="visibility:hidden" type="text"
name="TBPersonNo" id="idTBPersonNo" value="@Model.PersonNo"/>
<input style="visibility:hidden" type="text"
name="TBAddressNo" id="idTBAddressNo" value="@Model.AddressNo"/>
<br />
<fieldset>
<table>
<tr>
<td>Address Type</td>
<td>
<select name="CBAddressType" id="idCBAddressType" style="width:120px">
</select>
</td>
</tr>
<tr>
<td>Country</td>
<td>
<select name="CBcountry" id="idCBcountry" style="width:120px">
</select>
</td>
</tr>
<tr>
<td>City</td>
<td>
<select name="CBcity" id="idCBcity" style="width:120px">
</select>
</td>
</tr>
<tr>
<td>AddressText</td>
<td>
<textarea rows="4" cols="25" name="TBAddressText"
id="idTBAddressText">@Model.AddressText</textarea>
</td>
</tr>
</table>
</fieldset>
}
Forma göndərildikdə, controller-dəki aşağıdakı action işləyir.
C#
public class AddressController : Controller
{
//..
[HttpPost]
public JsonResult Save(FormCollection fc)
{
object obj = null;
Address addrTmp = new Address();
addrTmp.AddressNo = Convert.ToInt32(fc["TBAddressNo"].ToString());
addrTmp.AddressTypeNo = Convert.ToInt32(fc["CBAddressType"].ToString());
addrTmp.AddressText = fc["TBAddressText"].ToString();
addrTmp.CityNo = Convert.ToInt32(fc["CBcity"].ToString()); ;
addrTmp.PersonNo = Convert.ToInt32(fc["TBPersonNo"].ToString());
if (ModelState.IsValid)
{
if (addrTmp.AddressNo == 0)
{
//find last person
//if it is database system no need to this line. Probably the AddressNo would be autoincrement
addrTmp.AddressNo = Data.Repository.GetAddressList().OrderBy(x => x.AddressNo).Last().AddressNo + 1;
Data.Repository.GetAddressList().Add(addrTmp);
obj = new { Success = true,
Message = "Added successfully",
Object = addrTmp,
operationType = "INSERT",
Html = this.RenderPartialView("_addressLine", addrTmp )
};
}
else
{
Address addr = Repository.GetAddressList().Where(c => c.AddressNo == addrTmp.AddressNo).FirstOrDefault();
addr.AddressTypeNo = addrTmp.AddressTypeNo;
addr.AddressText = addrTmp.AddressText;
addr.CityNo = addrTmp.CityNo;
addr.PersonNo = addrTmp.PersonNo;
obj = new { Success = true,
Message = "Updated successfully",
Object = addr,
operationType = "UPDATE",
Html = this.RenderPartialView("_addressLine", addr )
};
}
}
else
{
obj = new { Success = false, Message = "Please check form" };
}
return Json(obj, JsonRequestBehavior.DenyGet);
}
// ..
}
Tələb edilən html skriptini almaq üçün RenderPartialView metodu istifadə olunur.
C#
//..
public static string RenderPartialView(this Controller controller, string viewName, object model)
{
if (string.IsNullOrEmpty(viewName))
viewName = controller.ControllerContext.RouteData.GetRequiredString("action");
controller.ViewData.Model = model;
using (var sw = new StringWriter())
{
ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(controller.ControllerContext, viewName);
var viewContext = new ViewContext(controller.ControllerContext,
viewResult.View, controller.ViewData, controller.TempData, sw);
viewResult.View.Render(viewContext, sw);
return sw.GetStringBuilder().ToString();
}
}
//..
saveAddress formasının ajax post-unun saveSuccess funksiyası aşağıdakı kimidir:
JavaScript
<script type="text/javascript">
//...
function saveSuccess(data)
{
if (data.Success == true)
{
$("#paginginfo").show();
if (data.operationType == 'UPDATE')
{
var row = linkObj.closest("tr");
// the following line can also be used to get related row
//$('#AddressTable #row-' + data.Object.AddressNo);
row.replaceWith(data.Html);
//..
}
else
{ //INSERT
try
{
$("#AddressTable tr:first").after(data.Html);
//..
}
catch (err)
{
alert(err.Message);
}
}
//..
}
else
{
//..
}
}
//..
</script>
Yuxarıda izah edilən iki texnikadan hər hansı birindən istifadə oluna bilər.
15) Global.asax-da mapRoute necə fərdiləşdirilir?
Klassik asp.net tətbiqlərində, urlRewrite əməliyyatı bazı üçüncü tərəf assembly-lərlə asanıqla həyata keçirilirdi. MVC tətbiqlərində, Global.asax istifadə edərək mapRoute-u fərdiləşdirmək mümkündür.
Aşağıdakı mapRoute Global.asax-ın defoltıdır:
C#
public class MvcApplication : System.Web.HttpApplication
{
//..
public static void RegisterRoutes(RouteCollection routes)
{
// all new customized maproute rules can be put here
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
);
}
// ..
}
Aşağıdakı skriptə görə,
**/Save/{addressNo}/{personNo}** link kimi istifadə olunur.HTML
@Html.ActionLink("Edit", "Save",
new { addressNo = item.AddressNo, personNo = item.PersonNo }, new { @class = "editLink" })
Yuxarıdakı linkin ekran görüntüsü aşağıdakı kimidir.
Buna görə də, Global.asax-a aşağıdakı kimi fərdiləşdirilmiş mapRoute qaydası əlavə etmək mümkündür.
C#
//..
routes.MapRoute(
"AddressSave",
"Address/Save/{addressNo}/{personNo}",
new { controller = "Address", action = "Save",
addressNo = UrlParameter.Optional, personNo = UrlParameter.Optional }
);
//..
Yuxarıda izah edilən iki texnikadan hər hansı birindən istifadə oluna bilər.
16) Cədvəlin bütün sətirləri checkALL və uncheckALL necə edilir?
Bir çox tətbiqlərdə, cədvəldəki bütün işarələri bir dəfəyə işarələmək və ya işarəni silmək lazım ola bilər.
Belə funksiya üçün aşağıdakı skriptdən istifadə oluna bilər.
HTML
..
<br />
| <a href="#" class="checkALLRecords" id="checkALL">Check ALL</a> | <a href="#" class="unCheckALLRecords" id="unCheckALL">Uncheck ALL</a> |
<br />
..
<table id="NoteTable"></table>
..
JavaScript
//..
//check ALL records
$("#checkALL").live("click", function (e)
{
e.preventDefault();
CheckALL(true);
});
//uncheck ALL records
$("#unCheckALL").live("click", function (e)
{
e.preventDefault();
CheckALL(false);
});
//..
function CheckALL(state)
{
var rows = $("#NoteTable tr");
for(var i=0; i< rows.length; i++)
{
var row = $(rows).eq(i);
var span = row.find('span#cboxSpan');
var cb = row.find('span#cboxSpan').find('input.cboxDELclass');
if (state==true)
cb.attr('checked',true);
else
cb.attr('checked',false);
}
}
//..
17) "Məlumat yüklənir" necə yaradılır?
Birdən çox məlumat sətri yükləyərkən, istifadəçiyə "Məlumat yüklənir" mesajı göstərilməlidir.
Aşağıdakı div lazım olan mesaja görə fərdiləşdirilə bilər.
HTML
..
<div id="loadMessage"></div>
..
div sahasını fərdiləşdirmək üçün aşağıdakı javascript funksiyasından istifadə oluna bilər.
JavaScript
..
function showLoader(root, txt) {
$("#loadMessage").html("");
$("#loadMessage").show();
var loader = '<img src="' + root + '/ajax-loader.gif" align="absmiddle">&nbsp;<span><br/>' + txt + '...</span>';
$("#loadMessage").fadeIn(100).html(loader);
}
function hideLoader() {
$("#loadMessage").hide();
}
..
18) jQuery ilə master-detal grid necə yaradılır?
Master sətir klikləndikdə, detal sətirlər aşağıda göstərildiyi kimi master grid-in altında göstərilir.
Grid kimi aşağıdakı cədvəllərdən istifadə olunur.
HTML
..
<table id="CountryTable" class="hovertable2"></table>
<br />
<br />
<table id="CityTable" class="hovertable"></table>
..
Master-detal yanaşmasını simulyasiya etmək üçün aşağıdakı javascript funksiyasından istifadə olunur.
JavaScript
..
function setTableRowClick()
{
$("#CountryTable tr td.clickable").unbind('click');
$('#CountryTable tr td.clickable').click(function ()
{
var row = $(this).parent();
setRow(row);
});
//-------------
}//func
function setRow(row)
{
var rowid = row.attr('id'); //current
var higlightedCountryTableRowid = $("#pageinfo .higlightedCountryTableRowid").text();
$("#pageinfo .higlightedCountryTableRowid").html(rowid.toString());
if ((rowid==0) || (rowid!=higlightedCountryTableRowid))
{
//------
row.siblings().removeClass('diffColor');
row.addClass("diffColor");
//-------
fillCityData(rowid);
}
}
..
function fillCountryData()
{
$.ajax({
type: "POST",
url: "@Url.Action("GetCountryList", "Country")",
data: {},
cache: false,
dataType: "json",
success: function (data)
{
if (data.Html)
{
$("#CountryTable").html(data.Html);
buttonizeALL();
setLinkAbilitesCountry();
setLinkAbilitesCity();
setTableRowClick();
}
else
{
alert('opps-- country list error!');
}
},
error: function(exp)
{
alert('Error address : ' + exp.responseText);
}
}); //end ajax call
}//func
function fillCityData(parCountryNo)
{
$.ajax({
type: "POST",
url: "@Url.Action("GetCityList", "Country")",
data: { countryNo: parCountryNo},
cache: false,
dataType: "json",
success: function (data)
{
if (data.Html)
{
$("#CityTable").html(data.Html);
buttonizeALL();
setLinkAbilitesCity();
setTableRowClick();
}
else
{
alert('opps-- city list error!');
}
},
error: function(exp)
{
alert('Error address : ' + exp.responseText);
}
}); //end ajax call
}//func
..
Nəticə
Ümid edirəm ki, bu məqalə sizə faydalı oldu.
Bulud Hesablama Xidmətləri
AWS, Azure, Google Cloud platformalarında infrastruktur dizaynı, miqrasiyası, idarəedilməsi və optimallaşdırılması xidmətləri təqdim edirik.
Xidmətləri görBizimlə Əlaqə
AWS və bulud hesablama həlləri haqqında ətraflı məlumat almaq üçün komandamızla əlaqə saxlayın.
Əlaqə