ASP.NET MVC 使用Jquery Ajax实现登录

视图[Views]  --   Login.cshtml 页面

<!DOCTYPE html>

<html>
<head>
    <title>Ajax Login</title>
    <link href="~/Content/Css/Style.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <form id="login-form" action="#" method="POST">
            @*生成防伪标记*@
            @Html.AntiForgeryToken()
            <div class="controls">
                <label for="userName">用户名:</label>
                <input type="text" name="userName" id="userName" placeholder="用户名" value="@ViewBag.UserName" />
            </div>
            <div class="controls">
                <label for="password">密 码:</label>
                <input type="password" name="password" id="password" placeholder="密码" />
            </div>
            <div class="controls">
                <input type="checkbox" name="rememberMe" id="rememberMe" />
                <label for="rememberMe">记住我?</label>
            </div>
            <input type="submit" value="登录" class="btn" />
        </form>
    </div>
    <script src="~/Content/Scripts/Lib/jquery-1.10.2.min.js"></script>
    <script src="~/Content/Scripts/Lib/jquery.validate.min.js"></script>
    <script src="~/Content/Scripts/Lib/jquery.validate.messages_cn.js"></script>
    <script src="~/Content/Scripts/Lib/jquery.serializeObject.js"></
  • 2
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
普通方法: 1. 创建一个搜索表单,包含一个文本输入框和一个提交按钮。 2. 创建一个控制器,用于处理搜索请求。可以在控制器的 Index 方法中处理搜索逻辑。 3. 在 Index 视图中,显示搜索表单和搜索结果。搜索结果可以使用 ViewBag 或 ViewData 传递到视图中。 4. 在控制器中通过查询字符串获取搜索参数,并使用 LINQ 查询数据库或其他数据源。 5. 将查询结果传递到视图中,并在视图中显示结果。 使用 Ajax: 1. 创建一个搜索表单,包含一个文本输入框和一个按钮。 2. 在 JavaScript 中,使用 jQuery 或其他库监听表单提交事件。 3. 在表单提交事件中,使用 Ajax 发送搜索请求。 4. 在控制器中,使用 JsonResult 返回搜索结果。 5. 在 JavaScript 中,接收 JsonResult 并将结果显示在页面上。 6. 可以使用 jQuery 的 append、html 等方法将搜索结果插入到页面中。 示例代码: 普通方法: 控制器: ```csharp public class HomeController : Controller { private readonly ApplicationDbContext _context; public HomeController(ApplicationDbContext context) { _context = context; } public IActionResult Index(string searchString) { var movies = from m in _context.Movie select m; if (!string.IsNullOrEmpty(searchString)) { movies = movies.Where(s => s.Title.Contains(searchString)); } return View(movies.ToList()); } } ``` Index 视图: ```html @model IEnumerable<Movie> <form asp-controller="Home" asp-action="Index" method="get"> <p> <input type="text" name="searchString" placeholder="Search..."> <input type="submit" value="Search"> </p> </form> <table class="table"> <thead> <tr> <th>Title</th> <th>Release Date</th> <th>Genre</th> <th>Price</th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr> <td>@item.Title</td> <td>@item.ReleaseDate.ToShortDateString()</td> <td>@item.Genre</td> <td>@item.Price.ToString("C")</td> </tr> } </tbody> </table> ``` 使用 Ajax: Index 视图: ```html <form id="searchForm" method="get"> <p> <input type="text" id="searchString" placeholder="Search..."> <input type="submit" value="Search"> </p> </form> <div id="searchResult"></div> @section Scripts { <script> $(function () { $('#searchForm').submit(function (e) { e.preventDefault(); var searchString = $('#searchString').val(); $.ajax({ url: '/Home/Search', type: 'get', dataType: 'json', data: { searchString: searchString }, success: function (data) { $('#searchResult').html(''); $.each(data, function (index, item) { $('#searchResult').append('<p>' + item.title + '</p>'); }); } }); }); }); </script> } ``` 控制器: ```csharp public class HomeController : Controller { private readonly ApplicationDbContext _context; public HomeController(ApplicationDbContext context) { _context = context; } public IActionResult Index() { return View(); } public JsonResult Search(string searchString) { var movies = from m in _context.Movie select new { title = m.Title }; if (!string.IsNullOrEmpty(searchString)) { movies = movies.Where(s => s.title.Contains(searchString)); } return Json(movies); } } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值