jquery 和REST模式

最新推荐文章于 2022-05-06 23:04:31 发布

吕刚

最新推荐文章于 2022-05-06 23:04:31 发布

阅读量4.3k

点赞数

分类专栏：编程语言

本文链接：https://blog.csdn.net/txdb/article/details/37811065

版权

编程语言专栏收录该内容

76 篇文章 0 订阅

订阅专栏

看了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，非常好。

http://eternicode.github.io/bootstrap-datepicker/?markup=input&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&todayBtn=false&language=zh-CN&orientation=auto&multidate=&multidateSeparator=&keyboardNavigation=on&forceParse=on#sandbox

为type=date的input添加bootstrap datepicker 很方便。用到的选择器是$("input[type='date']".datepicker({}),默认的日期格式和mvc默认的不一样，要改下

DataFormatString="{0:yyyy/mm/dd} 这样好像不行，mm没法显示，会显示为00 ，查了下mm应该大写MM

修改控件的内容。用函数html（），参数是要修改的内容。

相对地址前加/代表根目录，

bootstrap中的img-responsive 可以让图像能响应窗口大小，不错。

判断选择器的结果是否为空，用length属性。

用jquery做了一个ajax。使用的是getjson方法。服务器端通过return json（db）返回数据。结果getjson出现internal server error。怀疑是返回记录为空导致的。

改了后，能返回数据了。不过还是内部服务器错误。在浏览器里直接调用这个方法，可以看到到底是什么错误，改正后就可以了。是linq代码写的有问题。

具体的代码如下：

$("#nextInModal").click(function () {
//load next,can't without ajax? put date into a list ?
$.getJSON("/page/getnextpage", {sectionId:$("#nextInModal").attr("sectionID"),currentNumber: $("#nextInModal").attr("currentNumber") })

.done(function (json) {
setPreviewModal(json);

})

    .fail(function (jqxhr, textStatus, error) {
        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("本节已学完");
    }

}

controller中的代码如下：

//get:/page/GetNextPage
        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);
        }

现在的问题是多个外键和多个导航属性，造成错误，用update-database更新的时候提示

Introducing FOREIGN KEY constraint 'FK_dbo.Tests_dbo.Chapters_ChapterID' on table 'Tests' may cause cycles or multiple cascade paths. Specify ON DELETE NO ACTION or ON UPDATE NO ACTION, or modify other FOREIGN KEY constraints.
Could not create constraint. See previous errors.