Asp.net MVC使用knockoutjs登录并记录用户的内外网IP和城市(推荐)

序

前面的第一篇文章打开了第一篇，现在想从登录开始先写，但是感觉前面还有很多应该写的东西，比如

1.MVC和Web API的路由配置，以及Web API的路由配置如何支持命名空间

2.如何配置过滤器(实现安全验证、错误处理等。)

3.定制过滤器、HttpRouteConstraint、ModelBinder、HttpParameterBinding等

这些问题在我的发展过程中都遇到过，但我觉得每一点都要讲太多。如果有必要，回来写。

要求

像往常一样，我们必须首先了解我们想要登录实现什么：

1.登录页面(用户名、密码、记住我、登录按钮、重置按钮)

2.消息显示(例如，如果有错误，则显示您登录时正在登录，登录成功时正在跳转等。)

3.登录处理(验证、登录、登录时禁用表单、更新用户登录次数和时间、添加登录历史，其中应包括用户的内网IP、外网IP、城市等业务处理)

4.成功跳转

达到效果

在实现之前，让我们看一下实现效果的截图

登录页面

跳转页面

登录简历

需求分析和实施

要求基本上很容易实现，只需要在登录简历中记录内外网的IP和所在城市。在asp.NET获取客户端内外网的IP比较麻烦，但是获取城市几乎是不可能的，所以要考虑使用第三方api来实现。

1.内网IP直接在后台拍摄

2.外网的IP可以通过新浪API http://counter.sina.com.cn/ip.获得，也可以返回城市。后台不知道是什么原因，只能回到IP

3.城市是在http://api.map.baidu.com/location/ip?通过百度API Ak=ip=我拿到了，但是这一个不回外部ip，所以就两个一起用了，很痛苦。

在客户端访问对应的API还有另一个跨域问题。通过调研发现，百度API支持JSONP，可以很好地解决跨域问题。新浪API没有，但它返回一个变量。我们可以直接在页面srcipt中编写新浪API来获取对应的变量。

技术应该没问题，开始写吧。

具体实现

步骤1:在MVC中创建新的LoginController，并添加以下代码

使用系统；使用系统。Web . Mvc使用Newtonsoft。Json使用Newtonsoft。Json . Linq利用泽法。核心；利用泽法。模型；利用泽法。web . areas . MMS.common；命名空间西风。controller {[允许匿名]公共类登录controller : controller { public action result index(){ viewpag . cn name='建筑材料管理系统'；视图包。EnName='工程材料锰系统'；返回视图()；}}}类应该用AllowAnonymous属性修饰，以确保无需登录即可访问。

第二步：添加对应的View和~/View ~/View/log in/index . cshtml代码如下

@{ ViewBag .Title='登录系统；布局=null}！title@ViewBag.Title/title链接href=' ~/Content/CSS/page/log in。CSS ' rel='样式表type=' text/CSS '/script src=' http : ~/Content/js/jquery/jquery-1。8 .1 .量滴js '/script script src=' http : ~/Content/js/core/js 2。js/script src=' http 3360 ~/Content/js/coreCnName/div class=' title-en ' style='@ViewBag.EnNameStyle'@ViewBag.EnName/div div class=' message ' data-bind=' html : message '/div表格边框=' 0 ' style=' width :300 pxtr TD style=' padding-bottom : 5px；宽度：55 px'用户名：/td td colspan='2 '输入类型='text' class='login '数据-bind=' value :表单。用户代码'/TD/tr tr TD class=' label ' style='字母-间距： 0 0.5 em垂直对齐： 中间密码：/td td colspan='2 '输入类型=' password ' class=' log in ' data-bind=' value :表单。密码'/TD/tr TD/TD TD栏=' 2 '输入类型=' checkbox '数据绑定='选中：表单。记住/span系统记住我/span/TD/tr TD tr col span=' 3 ' style=' text-align : center '输入类型='submit '值='登录class=' log in _ button '/input type=' button ' value='重置class=' reset _ botton ' data-bind=' click : reset click '//TD/tr/table/form/div/body/html 1，脚本的最后一个即添加新浪应用程序接口获取外网互联网协议(互联网协议)信息，它返回的数据格式为

var ILData=新数组(' 117.30.94.103 ','保留地址', '', '', '');if (typeof(ILData_callback)！=' undefined '){ ILData _ callback()；}它其实也有一个回收函数，和JSONP类似，但函数名是固定的，并且没有传递数据。我们可以直接访问ILData[0]取得外网知识产权。

2、上面超文本标记语言中的数据绑定=" "写法为knouckoutjs的写法，用于绑定到视图模型的属性

第三步：创建视图模型

var viewModel=function(){ var self=this；这个。表单={用户代码： ko。observatory()，password: ko.observable()，记住： ko。天文台(假)，ip: null，城市3360 null }；这个。消息=ko。天文台()；这个。登录点击=函数(表单){ $ .ajax({ type: 'POST '，URL : '/log in/DOaAction '，data: ko.toJSON(self.form)，dataType: 'json '，内容类型： ' application/JSON '，success : function(d){ if(d . status=' success '){ self。消息('登陆成功正在跳转，请稍候.');窗户。位置。href='/'；} else { self。信息(d .信息)；} }，错误：函数{自我。消息(e . response text)；}，beforeSend:函数(){ $(表单).查找('输入')。attr('disabled '，true)；self.message('正在登陆处理，请稍候.');}，complete: function () { $(form).查找('输入')。attr('disabled '，false)；} });};这个。resetclick=function(){ self。形式。用户代码(')；自我。形式。密码(')；自我。形式。记忆(假)；};这个。init=function(){ self。形式。IP=ILData[0]；$.getJSON(' http://API。地图。百度。com/location/IP？AK=f454 F8 a5e F5 e 577997931 cc 01 de 3974 callback=？',函数{自我。形式。城市=d .内容。地址；});if (top！=窗口)顶部。窗户。位置=窗口。位置；};这个。init()；};$(function(){ ko。applybindings(new viewModel())；});定义视图模型，其属性包括从表单信息，消息提示信息，登录点击登陆，重置单击重置。其中的初始化部分其实可以不放到视图模型中。

1、$.getJSON即为JSONP的访问，其中加上了参数回调=?jQuery会自动处理成当前的回调函数，即跨域成功后会自动回调当前函数并传入数据。我们用视图模型中的表单。城市接收请求的数据中的城市信息。

2、最后一句ko.applyBindings(新视图模型())即实现了页面和视图模型的绑定，至此，前台全部完成。接下来写登陆处理行动，还是放在逻辑控制器中，访问地址为/log in/DOa操作。

第四步：在逻辑控制器中添加行动的方法返回JSON数据。代码如下：

公共JsonResult DoAction(Jobject请求){ var message=new sys_userService().登录（请求);返回Json(消息，JsonRequestBehavior .DenyGet)；}然后在服务层中处理

使用系统；使用系统。集合。通用；利用泽法。核心；使用系统。动态；使用牛顿英尺.Json。Linq使用牛顿英尺.Json利用泽法Utils .利用泽法网络。区域。彩信。常见；命名空间泽法。模型{公共类sys _ user服务： ServiCeBaseSys _ user {公共对象登录(Jobject请求){ var用户代码=请求.值字符串('用户代码')；var密码=请求值字符串('密码');//用户名密码检查如果(字符串IsNullOrEmpty(用户代码)| | String .IsNullOrEmpty(密码))返回新的{状态='错误，消息='用户名或密码不能为空!'};//用户名密码验证定义变量结果=这个GetModel(ParamQuery .实例()。和这里('用户代码，用户代码)。和这里("密码",密码)。AndWhere('IsEnable '，true))；如果(结果==空||字符串.IsNullOrEmpty(结果用户代码)返回新的{状态='错误，消息='用户名或密码不正确!'};//调用框架中的登陆机制var loginer=新的loginer base { UserCode=result .用户代码，用户名=结果。用户名};表格.登录（登录者UserCode，loginer，60 * 8)；//登陆后处理这个更新用户登录日期(用户代码);//更新用户登陆次数及时间这个附录历史(请求);//添加登陆履历MmsService .LoginHandler(请求);//彩信系统的其它的业务处理//返回登陆成功返回新的{状态='成功，消息='登陆成功!'};} //更新用户登陆次数及时间public void updateuserloginuntanddate(字符串用户代码){ db .SQL(@ ' update sys _ userset登录计数=为null(登录计数，0) 1，LastLoginDate=getdate()(其中用户代码=@0 '，用户代码).execute()；} //添加登陆履历public void AppendLoginHistory(Jobject请求){ var lanIP=ZHttp .ClientIPvar hostName=ZHttp .尼斯兰尼？ZHttp .客户机主机名：字符串。空的；//如果是内网就获取，否则出错获取不到，且影响效率var用户代码=请求值字符串('用户代码')；var UserName=MmsHelper .GetUserName()；var IP=请求值字符串(' IP ')；var City=请求值字符串(' city ')；如果(IP！=lanIP) IP=字符串。格式(“{0}/{1}”，IP，lanIP).修剪('/')。替换(' :1 '，' localhost ')；var item=new sys _ loginHistory()；项目。用户代码=用户代码；项目。用户名=用户名；项目。主机名=主机名；项目主机IP=IP项目。逻辑性=城市；项目登录日期=日期时间.现在；db .插入sys _ loginHistory(' sys _ loginHistory '，项)。自动地图execute()；} }}接收参数定义为作业对象对象比较方便取得请求数据，数据服务中的GetModel是服务基类中已有的方法，这当中用到了两个函数，一个为更新用户登录日期为更新用户登陆次数及时间的处理，另一个附录历史添加登陆履历。至此已大功告成！

以上所述是小编给大家介绍的Asp.net最有价值球员利用击倒对手实现登陆并记录用户的内外网互联网协议(互联网协议)及所在城市（推荐),希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！