需求:MVC4下我想實現彈出對話框的效果,是模態的效果。在彈出對話框里不僅僅實現填充編輯框的效果。而是分頁效果。這個功能我差不多花了一個星期的時間。其實我沒有CSHARP開發過代碼,而且對最新的技術都不了解了。因為沒有基礎的知識點支撐,沒有好好的處理基礎知識,所以繞了這么大的圈子。
英文水平有限,翻譯可能不准確。非常好的一篇文章,支撐我的項目:http://www.codeproject.com/Articles/565513/How-to-series-about-MVC-jQuery-JSON-paging-mapRout《"How to series" about MVC, jQuery, JSON, paging, mapRoute》---當然這篇文章並沒有實現在對話框下分頁功能,但是里面豐富的知識點足以舉一反三。
介紹:因為系統大量的數據,客戶端工作非常重要,在ASP.NET典型的后置代碼下,很自然的方法將很多的工作用ASP.NET組件放在后置代碼中,然而,通過ASP.NET組件和可視降低性能。通過MVC可以知道以前的設計結果模式。在ASP.NET之前很流行。高執行性能。JQUERY和JSON。
背景:在想讀懂或實現這些功能,需要了解的知識點:
- MVC for beginners : http://www.w3schools.com/aspnet/mvc_intro.asp
- jQuery for beginners : http://www.w3schools.com/jquery/default.asp
- jSon for beginners : http://www.w3schools.com/json/default.asp
那篇文章提出知識點和實現效果,我這里就不贅述了。我原來實現的思路是想用 UPDATAPENL+AJAXTOOLKIT來實現的。確實我在ASP普通網站實現了彈出對話框分頁的可能,而MVC下完全沒有實現,所有的動作被控制器收了。就是不更新。
學習了jquery+AJAX,很快愛上了。不知道為什么,國內國外網站上面對彈出的對話框分頁效果實現都沒有案例,難道不需要,還是太簡單的。對於我這個跳躍的學習的人來講,完全沒有必要。我不能理解。
別人的代碼拿過來我們也是不說可以直接用的:
自己手動創建MVC4項目,我們需要如何移植代碼呢?
1、MVC4里的_LAYOUT頁面里,需要加入保證我們運行的JS。需要把別人的JS拷貝響應目錄下
jquery-1.5.1.min.js
jquery-ui-1.8.11.min.js
moderizr-1.7.min.js
jquery.unobtrusive-ajax.js
jquery.validate.min.js
myjs.js
jquery.validate.unobtrusive.min.js
2、VIEW里找到需要增加彈出窗口的頁面,可以選擇HOME控制器里面Index頁面,增加如下代碼:
@Html.ActionLink("New","New",new{DataModuleId=0},new{@class="newLink"})
這個是彈出對話框的代碼。
New:代表鏈接的文字。
New:控制器的動作。(我們的就在HOME的控制器里加一個就可以了)
DataModuleId:因為我做的是新建和編輯功能,他們可以共用一個窗體。所以我們用它傳遞0和1,0就是新建,1是編輯。
newlink:是下文JQUERY使用的類名。
3、下面我們增加JQuery代碼,在Index里面加。可能新學的同學不知道在哪里加加什么,就需要了解MVC的相關知識。
<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>
4、創建控制器,控制器當然也是Home,在HOME里增加New動作。-這里的模型不一定是你要的模型
[HttpGet]
public ActionResult New(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);
}
到這里可以實現了彈出對話框了。代碼是加了,可是很多人會調不通,因為不懂基礎原理。JQUERT有一點不對,都有可能調不通。
但是對話框里的數據要如何處理保存,如何變化。需要下一篇文章來表達。
