看了mvc几天了。因为界面需要更加人性化,看下jquery的内容。mvc中javascript采用了REST模式,看的时候一起搞懂。
how jquery works http://learn.jquery.com/about-jquery/how-jquery-works/ 这个是jquery的官方入门。
jquery的代码,一般用document.ready(function(){code here})包裹。ready事件在DOM加载后发生,我理解是html代码加载完成,
load则需要等html链接的所有外部文件都加载完成才发生。
jquery 首页上对jquery.com上对jquery的功能描述最清楚了。
1.操作DOM更方便 $().property即可。
2.事件处理$().on("event",function(event)){},应该可以写成$().event(function(){}))
3.ajax很简单。看如下代码
$.ajax({
url: "/api/getWeather",
data: {
zipcode: 97201
},
success: function( data ) {
$( "#weather-temp" ).html( "<strong>" + data + "</strong> degrees" );
}
});
用一个ajax,指定url,data,成功后的操作即可。 这里的data是json格式。
下面的一些函数比较有用
event.preventDefault();阻止默认事件
.addclass .removeclass .css .html 操作css或者html。里面直接用css或html的语法即可。
callback,比如&get("url",func)可以让页面url获取后再执行func,而不需要同步等待。
更多细节在实践中再慢慢添加吧。以上这些已经很够用了。
在mvc5中写javascript ,代码一般添加在body最后,或者layout里定义了对应的section如,@rendersection("script",required=false)
则在内容页中可以放在@section scripts{}里
看了几个例子,总结下,应该把js代码放在scripts目录下,然后在app-start/bundleconfig中注册,然后考虑在layout文件中render,或者在内容页中render
默认就做成在layout里render,这样采用这个layout的所有页面都不用再去load了,小控件牺牲的加载速度可以忽略,
尽量不要在自动生成的代码中,添加自己的script,因为自动生成的代码,可能会频繁改动。
bootstrap datepicker 的online demo,非常好。
为type=date的input添加bootstrap datepicker 很方便。用到的选择器是$("input[type='date']".datepicker({}),默认的日期格式和mvc默认的不一样,要改下
DataFormatString="{0:yyyy/mm/dd} 这样好像不行,mm没法显示,会显示为00 ,查了下mm应该大写MM
//load next,can't without ajax? put date into a list ?
$.getJSON("/page/getnextpage", {sectionId:$("#nextInModal").attr("sectionID"),currentNumber: $("#nextInModal").attr("currentNumber") })
setPreviewModal(json);
alert("error:" + error);
})
})
function setPreviewModal(json)
{
if (json.length == 1) {
var pageType = json[0].pageType;
var content = json[0].content
if (pageType == 1)//txt
$("#dynamicContent").html(content);
if (pageType == 2)//jpg
{
var img = "<img src='/" + content + "' class='img-responsive'/>";
$("#dynamicContent").html(img);
}
if (pageType == 3)//mp4
{
var video = "<video id='videoInModal' src='/" + content + "' controls/>";
$("#dynamicContent").html(video);
}
$("#nextInModal").attr("sectionID", json[0].SectionID);
$("#nextInModal").attr("currentNumber", json[0].number);
}
else {
$("#dynamicContent").html("本节已学完");
}
}
public JsonResult GetNextPage(int sectionId,int currentNumber)
{
var page = db.Pages.Where(c => c.SectionID == sectionId && c.number > currentNumber)
.Select(c => new { Id = c.Id, SectionID = c.SectionID, number = c.number, pageType = c.pageType, content = c.content })
.OrderBy(c => c.number)
.Take(1)
.ToList();
return Json(page,JsonRequestBehavior.AllowGet);
}
//get:/page/GetPageContent
public JsonResult GetPageContent(int pageId)
{
var page = db.Pages.Where(c => c.Id == pageId)
.Select(c => new { Id=c.Id,SectionID=c.SectionID,number=c.number,pageType=c.pageType,content=c.content})
.ToList();
return Json(page,JsonRequestBehavior.AllowGet);
}
Could not create constraint. See previous errors.