MVC利用ajax验证登陆问题

pgyangel 2014-10-05 10:48:52
MVC在控制器中可以用ModelState.AddModelError("", "提供的用户名或密码不正确。");这种方式赋值错误提示,前端用@Html.ValidationSummary()方法显示。但是这有个问题,@Html.ValidationSummary()方法最终显示是带ul标签显示。
如果页面排版不适合在页面新增内容,而是用alert弹窗来显示错误信息更合适。这要怎么弄?现在不知道思路如何走。我只知道是用js里的ajax来实现。但是遇到很多奇怪问题:
Controllers代码:
public ActionResult Index()
{
return View();
}

[HttpPost]
public ActionResult Index(Operation.Model.userInfo ui)
{
if (ModelState.IsValid)
{
try
{
Operation.BLL.userInfo uiBLL = new Operation.BLL.userInfo();
ui.pwd = System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(ui.pwd, "MD5").ToUpper();
if (uiBLL.Exists(ui))
{
return RedirectToAction("Index", "UserInfo");
}
else
{
return Content("用户名密码错误!");
}
}
catch
{
return View();
}
}
else
{
return View();
}
}


JS代码:
$(document).ready(function () {
/*登陆按钮*/
$('#loginBtn').click(function () {
$.ajax({
url: '/Login/Index',
data: 'string',
type: 'post',
success: function (data) {
alert(data);
}
});
});
/**登陆按钮 END**/
});


View代码:
@model Operation.Model.userInfo

@using (Html.BeginForm("LoginAction", "Login", null, FormMethod.Post, new { id = "myform", name = "myform" }))
{
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="2">
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
</td>
</tr>
<tr>
<td>
用户名:
</td>
<td>
@Html.TextBoxFor(model => model.userName)
</td>
</tr>
<tr>
<td>
<pre>密 码:</pre>
</td>
<td>
@Html.PasswordFor(model => model.pwd)
</td>
</tr>
<tr>
<td></td>
<td>
<input type="image" src="~/Images/loginBtn.gif" id="loginBtn"/>
</td>
</tr>
</table>
}


我的控制器Index方法在else中要如何返回字符串或者json让JS的点击事件可以成功读取到信息,这个JS代码读取的Index是一开始return View那个方法,弹出来的是页面源码,另外写一个方法输出striing或者json是可以成功接收并弹出的,但是登陆按钮是button,不是submit。求大神给点思路。
我想的思路应该是按钮先submit表单内容给后台,然后后台进行判断用户名密码是否正确,不通过返回一个错误字符串或json格式数据给前端,前端用ajax接收数据利用alert弹出错误提示。

如果说只是单纯获取JsonResult方法或者string方法那很简单,不需要提交表单,但是这个登陆验证肯定是要先提交表单,在后台验证后再获取验证信息然后进行页面跳转或提示错误。这个就没有头绪了,求大神支招
...全文
198 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
wangweimutou 2014-10-06
  • 打赏
  • 举报
回复
你既然是form表单提交,为什么不使用submit呢 还有如果你使用按钮提交,那就要把你需要的参数全部提交到后台,进行判断后,再用json把验证后的提示消息返回到前台,弹出消息应该没什么问题
pgyangel 2014-10-06
  • 打赏
  • 举报
回复
引用 1 楼 devmiao 的回复:
http://www.2cto.com/kf/201212/172739.html
这个js修改后读取的信息是@Html.ValidationSummary()里面的信息? 这个js没有接触过,我只会jquery和原生的js
pgyangel 2014-10-06
  • 打赏
  • 举报
回复
上面的效果是直接返回了字符串,把原有页面完全替代了,url地址并没有改变。因为方法是ActionResult类型。
pgyangel 2014-10-06
  • 打赏
  • 举报
回复
引用
你既然是form表单提交,为什么不使用submit呢 还有如果你使用按钮提交,那就要把你需要的参数全部提交到后台,进行判断后,再用json把验证后的提示消息返回到前台,弹出消息应该没什么问题


input里面image按钮默认就是有submit提交表单的功能。
现在问题是我在控制器else代码改成return Json("用户名密码错误");但是页面出现的是下面这种情况


我的js代码根本不走click事件。
devmiao 2014-10-05
  • 打赏
  • 举报
回复
http://www.2cto.com/kf/201212/172739.html
An outstanding author team presents the ultimate Wrox guide to ASP.NET MVC 4 Microsoft insiders join giants of the software development community to offer this in-depth guide to ASP.NET MVC, an essential web development technology. Experienced .NET and ASP.NET developers will find all the important information they need to build dynamic, data-driven websites with ASP.NET and the newest release of Microsoft's Model-View-Controller technology. Featuring step-by-step guidance and lots of code samples, this guide gets you started and moves all the way to advanced topics, using plenty of examples. Designed to give experienced .NET and ASP.NET programmers everything needed to work with the newest version of MVC technology Expert author team includes Microsoft ASP.NET MVC insiders as well as leaders of the programming community Covers controllers, views, models, forms and HTML helpers, data annotation and validation, membership, authorization, security, and routing Includes essential topics such as Ajax and jQuery, NuGet, dependency injection, unit testing, extending MVC, and Razor Includes additional real-world coverage requested by readers of the previous edition as well as a new case study example chapter 下面是上一版书的中文介绍 《ASP.NET MVC 3 高级编程》主要内容是描述视图的概念,探讨Razor语法、NuGet、单元测试等,解释控制器在MVC框架中的作用,以及模型在绑定和数据访问策略中发挥的作用,演示如何显示和处理表单,涵盖添加到April 2011 Tools Update中的新特性,如基架和HTML5项目模板,展示在客户端和服务器端验证模型的过程给出利用成员资格、援权和安全特性的忠告,讲解将TDD应用于ASP.NET MVC的方法。

110,499

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术 C#
社区管理员
  • C#
  • Web++
  • by_封爱
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

让您成为最强悍的C#开发者

试试用AI创作助手写篇文章吧