分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

Ajax异步表单简单实现收索功能

发布时间:2023-09-06 02:25责任编辑:傅花花关键词:Ajax

异步收索的作用简单来说就是:在不更新整个网页的情况下更新你想改变的网页某个部分。


下面是实现:

1.准备工作

  在mvc5 中要用Ajax,首先要添加jQuery的Ajax文件。方法:右击项目--管理NuGet程序包--查找jQuery--找到关于Ajax的,然后安装。

2。 Index.页面

   

@model IEnumerable<ajax异步.Models.ajax>@{ ???Layout = "~/Views/Shared/_Layout.cshtml";}<script src="~/Scripts/jquery-3.3.1.js"></script> ???<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> ???<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>@using (Ajax.BeginForm("Indec","Home", ??//方法和控制器 ?????new AjaxOptions ????//怎么实现Ajax功能 ?????{ ?????????InsertionMode = InsertionMode.Replace, ?//覆盖 ?????????HttpMethod = "Get", ?????????UpdateTargetId = "serch", ?//目标:id为search的元素 ?????})){ ???<input type="text" name="idd" /> ???<input type="submit" name="submit" value="Find" />}@*将要刷新的页面弄成partial页面,否则会将整个页面又放在这个地方*@@Html.Partial("Index1",Model) ?

3.控制器

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using ajax异步.Models;namespace ajax异步.Controllers{ ???public class HomeController : Controller ???{ ???????// GET: Home ???????private dbcontext db = new dbcontext(); ???????public ActionResult Index( string idd) ???????{ ???????????????if (Request.IsAjaxRequest()) //如果是Ajax请求,也就是点了查询,那么返回查询的数据 ???????????????{ ???????????????var people = from m in db.ajax ????????????????????????????where m.id.ToString() == idd ????????????????????????????select m; ???????????????return PartialView("Index1", people);//返回要更新的partial页面 ???????????????} ???????????????else//第一次不是Ajax请求,返回数据库的全部数据 ???????????????{ ???????????????????return View(db.ajax.ToList()); ???????????????} ???????????} ???????} ???}

4,partial页面

@model IEnumerable<ajax异步.Models.ajax><div id="serch"> ???<table border="1" class="tab-content"> ???????<tr> ???????????<td>id </td> ???????????<td>name </td> ???????</tr> ???????@foreach (var item in Model) ???????{ ???????????<tr> ???????????????<td>@Html.DisplayFor(c => item.id)</td> ???????????????<td>@Html.DisplayFor(c => item.name)</td> ???????????</tr> ???????} ???</table></div>

实现的方式很简单  主要就是Ajax辅助方法   然后安装要用的jQuery文件   最后把要更新的部分设置为partial页面

Ajax异步表单简单实现收索功能

原文地址:https://www.cnblogs.com/zhangyuhao/p/10088851.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved