Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > MVC + jQuery.Ajax implementiert asynchron das Hinzufügen, Löschen, Ändern, Abfragen und Paging_jquery

MVC + jQuery.Ajax implementiert asynchron das Hinzufügen, Löschen, Ändern, Abfragen und Paging_jquery

WBOY
Freigeben： 2016-05-16 09:00:25
Original
2856 Leute haben es durchsucht

Das Beispiel in diesem Artikel teilt Ihnen den spezifischen Code der asynchronen MVC+jQuery.Ajax-Implementierung zum Hinzufügen, Löschen, Ändern und Paging als Referenz mit. Der spezifische Inhalt ist wie folgt

1. Modellebenencode 

using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Collections.Generic;
using MvcExamples;
using System.Web.Mvc;

namespace MvcExamples.Web.Models
{
 public class StudentModels
 {
  /// <summary>
  /// 获取学生信息列表
  /// </summary>
  public List<MvcExamples.Model.Student> StudentList { get; set; }
  /// <summary>
  /// 获取教工信息列表
  /// </summary>
  public List<MvcExamples.Model.Teacher> TeacherList { get; set; }
  /// <summary>
  /// 获取学生信息列表(分页)
  /// </summary>
  public PagedList<MvcExamples.Model.Student> GetStudentList { get; set; }
 }
}
Nach dem Login kopieren

2. Ebenencode anzeigen 

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcExamples.Web.Models.StudentModels>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
 Index
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">

 <script src="http://www.cnblogs.com/Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
 <script src="http://www.cnblogs.com/Scripts/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
 <script src="http://www.cnblogs.com/Scripts/windwUi/jquery-ui-1.8.1.min.js" type="text/javascript"></script>
 <link href="http://www.cnblogs.com/Scripts/windwUi/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript">
 $(function(){
 
  //添加学生信息
  $('#a_add').click(function(){
   $('#window').dialog({ 
     title: "添加学生信息",
     width: 300,
     height: 200,
     modal: true,
     buttons: { 
      "取消": function() {
       $(this).dialog("close"); //当点击取消按钮时，关闭窗口
      }, 
      "添加": function() { 
       //当点击添加按钮时，获取各参数的值
       var sno=$('#sno').val();
       var sname=$('#sname').val();
       var ssex=$('#ssex').val();
       var sbirsthday=$('#sbirthday').val();
       var sclass=$('#sclass').val();
       $.ajax({
       type:'post',
       url:'/Student/AddStudent',//路径为添加方法
       data:'no='+sno+'&name='+sname+'&sex='+ssex+'&birsthday='+sbirsthday+'&sclass='+sclass,//参数的个数和名字要和方法的名字保持一致
       success:function(json)//返回的是Json类型的
        {
         $('#window').dialog("close"); 
         //判断是否成功
         if(json.result=="true")
         {
          $('#btn_close').click();
          alert('恭喜你，修改成功！'); 
         }else{
          alert('抱歉，修改失败！');
         }
        }
       });
      }
      } 
    });
  })
  
  //删除学生信息
  $('.a_delete').click(function(){
   //确认是否删除
   if(confirm("是否删除此条信息？"))
   {
    $.ajax({
     type:'post',
     url:'/Student/DeleteStudent',
     data:'no='+$(this).attr("sno"),//获取当前对象的属性(自定义属性)sno的值，用自定义属性保存相应需要的数据
     sucess:function(json)
      {
       if(json.result=="true")
       {
        alert("恭喜你，已成功删除！");
       }else
       {
        alert("抱歉，删除失败！");
       }
      }
    })
   }
  })
 
  //修改学生信息
  $('.a_update').click(function(){
   var student=$(this);
   $("#sno").attr("value",student.attr("sno"));
   $("#sname").attr("value",student.attr("sname"));
   $("#ssex").attr("value",student.attr("ssex"));
   $("#sbirthday").attr("value",student.attr("sbirthday"));
   $("#sclass").attr("value",student.attr("sclass"));
   
   $('#window').dialog({ 
    title: "修改学生信息",
    width: 300,
    height: 200,
    modal: true,
    buttons: { 
     "取消": function() {
      $(this).dialog("close"); 
     }, 
     "修改": function() { 
      var sno=$('#sno').val();
      var sname=$('#sname').val();
      var ssex=$('#ssex').val();
      var sbirsthday=$('#sbirthday').val();
      var sclass=$('#sclass').val();
      $.ajax({
      type:'post',
      url:'/Student/UpdateStudent',
      data:'no='+sno+'&name='+sname+'&sex='+ssex+'&birsthday='+sbirsthday+'&sclass='+sclass,
      success:function(json)
       {
        $('#window').dialog("close"); 
        if(json.result=="true")
        {
         $('#btn_close').click();
         alert('恭喜你，修改成功！'); 
        }else{
         alert('抱歉，修改失败！');
        }
       }
      });
     }
     } 
    });  
  });
  
 })
 </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
 <h2>
  MVC 演示</h2>
 <table>
  <thead>
   <tr>
    <td>
     学生表
    </td>
   </tr>
   <tr>
    <td>
     学号
    </td>
    <td>
     姓名
    </td>
    <td>
     性别
    </td>
    <td>
     生日
    </td>
    <td>
     班级
    </td>
    <td>
     操作
    </td>
   </tr>
  </thead>
  <tbody>
   <%foreach (MvcExamples.Model.Student student in Model.GetStudentList)
    {%>
   <tr>
    <td>
     <%=student.sno %>
    </td>
    <td>
     <%=student.sname %>
    </td>
    <td>
     <%=student.ssex %>
    </td>
    <td>
     <%=student.sbirthday %>
    </td>
    <td>
     <%=student.sclass %>
    </td>
    <td>
    <a href="javascript:void(0);" class="a_update" sno="<%=student.sno %>" sname="<%=student.sname %>" ssex="<%=student.ssex %>"
      sbirthday="<%=student.sbirthday %>" sclass="<%=student.sclass %>">修改</a>
      &nbsp
     <a href="javascript:void(0);" class="a_delete" sno="<%=student.sno %>">删除</a>
    </td>
   </tr>
   <% } %>
  </tbody>
  <tfoot>
   <tr>
    <td>
     全选
    </td>
    <td colspan="5" style="text-align: right;">
     <a href="javascript:void(0);" id="a_add">添加</a>
    </td>
   </tr>
  </tfoot>
 </table>
 <%=Html.MikePager(Model.GetStudentList)%>
 <br />
 <table>
  <thead>
   <tr>
    <td>
     学生表
    </td>
   </tr>
   <tr>
    <td>
     学号
    </td>
    <td>
     姓名
    </td>
    <td>
     性别
    </td>
    <td>
     生日
    </td>
    <td>
     班级
    </td>
   </tr>
  </thead>
  <tbody>
   <%foreach (MvcExamples.Model.Student student in Model.StudentList)
    {%>
   <tr>
    <td>
     <%=student.sno %>
    </td>
    <td>
     <%=student.sname %>
    </td>
    <td>
     <%=student.ssex %>
    </td>
    <td>
     <%=student.sbirthday %>
    </td>
    <td>
     <%=student.sclass %>
    </td>
   </tr>
   <% } %>
  </tbody>
 </table>
 <br />
 <table>
  <thead>
   <tr>
    <td>
     老师表
    </td>
   </tr>
   <tr>
    <td>
     编号
    </td>
    <td>
     姓名
    </td>
    <td>
     性别
    </td>
    <td>
     生日
    </td>
    <td>
     职称
    </td>
    <td>
     所在部门
    </td>
   </tr>
  </thead>
  <tbody>
   <%foreach (MvcExamples.Model.Teacher teacher in Model.TeacherList)
    {%>
   <tr>
    <td>
     <%=teacher.tno%>
    </td>
    <td>
     <%=teacher.tname%>
    </td>
    <td>
     <%=teacher.tsex%>
    </td>
    <td>
     <%=teacher.tbirthday%>
    </td>
    <td>
     <%=teacher.prof%>
    </td>
    <td>
     <%=teacher.depart%>
    </td>
   </tr>
   <% } %>
  </tbody>
 </table>
 
 <div id="window" style="display:none;">
 <input type="hidden" id="sno" name="sno" value="" />
 姓名：<input type="text" id="sname" name="sname" /><br />
 性别：<input type="text" id="ssex" name="ssex" /><br />
 生日：<input type="text" id="sbirthday" name="sbirthday" onClick = "WdatePicker()" /><br />
 班级：<input type="text" id="sclass" name="sclass" /><br />
 </div>
</asp:Content>
Nach dem Login kopieren

3. Controller-Layer-Code 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;

namespace MvcExamples.Web.Controllers
{
 public class StudentController : Controller
 {
  //
  // GET: /Student/

  MvcExamples.BLL.Student _Student = new MvcExamples.BLL.Student();
  MvcExamples.BLL.Teacher _Teacher = new MvcExamples.BLL.Teacher();
  /// <summary>
  /// 演示
  /// </summary>
  /// <param name="pi"></param>
  /// <param name="sclass"></param>
  /// <returns></returns>
  public ActionResult Index(int&#63; pi, string sclass)
  {
   int PageIndex = pi &#63;&#63; 1;
   int PageSize = 5;
   string sClass = sclass == null &#63; "95031" : sclass;
   MvcExamples.Web.Models.StudentModels _StudentModels = new MvcExamples.Web.Models.StudentModels();
   _StudentModels.StudentList = _Student.GetModelList("sclass=" + sClass);
   _StudentModels.TeacherList = _Teacher.GetModelList("tsex='男'");
   _StudentModels.GetStudentList = new PagedList<MvcExamples.Model.Student>(_Student.GetModelList("sclass=" + sClass).AsQueryable(), PageIndex, PageSize);
   return View(_StudentModels);//返回一个Model
  }
  /// <summary>
  /// 修改学生信息
  /// </summary>
  /// <param name="no"></param>
  /// <param name="name"></param>
  /// <param name="sex"></param>
  /// <param name="birsthday"></param>
  /// <param name="sclass"></param>
  /// <returns></returns>
  public ActionResult UpdateStudent(string no, string name, string sex, string birsthday, string sclass)
  {
   MvcExamples.Model.Student _student = new MvcExamples.Model.Student();
   _student.sno = no;
   _student.sname = name;
   _student.ssex = sex;
   _student.sbirthday = Convert.ToDateTime(birsthday);
   _student.sclass = sclass;

   _Student.Update(_student);   

   JsonResult json = new JsonResult();
   json.Data = new
   {
    result = "true"
   };
   return json;
  }
  /// <summary>
  /// 删除学生信息
  /// </summary>
  /// <param name="no"></param>
  /// <returns></returns>
  public ActionResult DeleteStudent(string no)
  {
   bool IsDelete= _Student.Delete(no);
   JsonResult json = new JsonResult();
   return json;
   if (IsDelete)
   {
    json.Data = new
    {
     result = "true"
    };
   }
   else
   {
    json.Data = new
    {
     result ="false"
    };
   }
   return json;
  }
  /// <summary>
  /// 添加学生信息
  /// </summary>
  /// <param name="no"></param>
  /// <param name="name"></param>
  /// <param name="sex"></param>
  /// <param name="birsthday"></param>
  /// <param name="sclass"></param>
  /// <returns></returns>
  public ActionResult AddStudent(string no, string name, string sex, string birsthday, string sclass)
  {
   MvcExamples.Model.Student _student = new MvcExamples.Model.Student();
   _student.sno = no;
   _student.sname = name;
   _student.ssex = sex;
   _student.sbirthday = Convert.ToDateTime(birsthday);
   _student.sclass = sclass;

   _Student.Add(_student);

   JsonResult json = new JsonResult();
   json.Data = new
   {
    result = "true"
   };
   return json;
  }

  /// <summary>
  /// 提供弹出窗口的数据
  /// </summary>
  /// <param name="id"></param>
  /// <returns></returns>
  public ActionResult WindowData(int id)
  {
   JsonResult json = new JsonResult();
   //这里给json数据(这里只是演示，下面数据是模拟的)
   json.Data = new
   {
    name = "张三",
    sex = "男"
   };
   return json;
  }

 }
}
Nach dem Login kopieren

4. Zwei Paging-Hilfsklassen PagedList und MikePagerHtmlExtensions

PagedList-Hilfsklasse 

using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Collections.Generic;
using System.Collections.Specialized;

namespace System.Web.Mvc
{
 public interface IPagedList
 {
  int TotalPage //总页数
  {
   get;
  }

  int TotalCount
  {
   get;
   set;
  }

  int PageIndex
  {
   get;
   set;
  }

  int PageSize
  {
   get;
   set;
  }

  bool IsPreviousPage
  {
   get;
  }

  bool IsNextPage
  {
   get;
  }
 }

 public class PagedList<T> : List<T>, IPagedList
 {
  public PagedList(IQueryable<T> source, int&#63; index, int&#63; pageSize)
  {
   if (index == null) { index = 1; }
   if (pageSize == null) { pageSize = 10; }
   this.TotalCount = source.Count();
   this.PageSize = pageSize.Value;
   this.PageIndex = index.Value;
   this.AddRange(source.Skip((index.Value - 1) * pageSize.Value).Take(pageSize.Value));
  }

  public int TotalPage
  {
   get { return (int)System.Math.Ceiling((double)TotalCount / PageSize); }
  }

  public int TotalCount
  {
   get;
   set;
  }
  /// <summary>
/// 
/// </summary>
  public int PageIndex
  {
   get;
   set;
  }

  public int PageSize
  {
   get;
   set;
  }

  public bool IsPreviousPage
  {
   get
   {
    return (PageIndex > 1);
   }
  }

  public bool IsNextPage
  {
   get
   {
    return ((PageIndex) * PageSize) < TotalCount;
   }
  }

 }

 public static class Pagination
 {
  public static PagedList<T> ToPagedList<T>(this IOrderedQueryable<T> source, int&#63; index, int&#63; pageSize)
  {
   return new PagedList<T>(source, index, pageSize);
  }

  public static PagedList<T> ToPagedList<T>(this IOrderedQueryable<T> source, int&#63; index)
  {
   return new PagedList<T>(source, index, 10);
  }

  public static PagedList<T> ToPagedList<T>(this IQueryable<T> source, int&#63; index, int&#63; pageSize)
  {
   return new PagedList<T>(source, index, pageSize);
  }

  public static PagedList<T> ToPagedList<T>(this IQueryable<T> source, int&#63; index)
  {
   return new PagedList<T>(source, index, 10);
  }
 }
}
Nach dem Login kopieren

MikePagerHtmlExtensions-Hilfsklasse 

using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Web.Mvc;
using System.Web.Routing;
using System.Text;

namespace System.Web.Mvc
{
 public static class MikePagerHtmlExtensions
 {
  
  #region MikePager 分页控件

  public static string MikePager<T>(this HtmlHelper html, PagedList<T> data)
  {
   string actioinName = html.ViewContext.RouteData.GetRequiredString("action");
   return MikePager<T>(html, data, actioinName);
  }

  public static string MikePager<T>(this HtmlHelper html, PagedList<T> data, object values)
  {
   string actioinName = html.ViewContext.RouteData.GetRequiredString("action");
   return MikePager<T>(html, data, actioinName, values);
  }

  public static string MikePager<T>(this HtmlHelper html, PagedList<T> data, string action)
  {
   return MikePager<T>(html, data, action, null);
  }

  public static string MikePager<T>(this HtmlHelper html, PagedList<T> data, string action, object values)
  {
   string controllerName = html.ViewContext.RouteData.GetRequiredString("controller");
   return MikePager<T>(html, data, action, controllerName, values);
  }

  public static string MikePager<T>(this HtmlHelper html, PagedList<T> data, string action, string controller, object values)
  {
   return MikePager<T>(html, data, action, controller, new RouteValueDictionary(values));
  }

  public static string MikePager<T>(this HtmlHelper html, PagedList<T> data, RouteValueDictionary values)
  {
   string actioinName = html.ViewContext.RouteData.GetRequiredString("action");
   return MikePager<T>(html, data, actioinName, values);
  }

  public static string MikePager<T>(this HtmlHelper html, PagedList<T> data, string action, RouteValueDictionary values)
  {
   string controllerName = html.ViewContext.RouteData.GetRequiredString("controller");
   return MikePager<T>(html, data, action, controllerName, values);
  }

  public static string MikePager<T>(this HtmlHelper html, PagedList<T> data, string action, string controller, RouteValueDictionary valuedic)
  {
   int start = (data.PageIndex - 5) >= 1 &#63; (data.PageIndex - 5) : 1;
   int end = (data.TotalPage - start) > 9 &#63; start + 9 : data.TotalPage;

   RouteValueDictionary vs = valuedic == null &#63; new RouteValueDictionary() : valuedic;

   var builder = new StringBuilder();
   builder.AppendFormat("<div class=\"mike_mvc_pager\">");

   if (data.IsPreviousPage)
   {
    vs["pi"] = 1;
    builder.Append(Html.LinkExtensions.ActionLink(html, "首页", action, controller, vs, null));
    builder.Append(" ");
    vs["pi"] = data.PageIndex - 1;
    builder.Append(Html.LinkExtensions.ActionLink(html, "上一页", action, controller, vs, null));
    builder.Append(" ");

   }

   for (int i = start; i <= end; i++) //前后各显示5个数字页码
   {
    vs["pi"] = i;
    if (i == data.PageIndex)
    {
     builder.Append("<font class='thispagethis'>" + i.ToString() + "</font> ");
    }
    else
    {
     builder.Append(" ");

     builder.Append(Html.LinkExtensions.ActionLink(html, i.ToString(), action, controller, vs, null));
    }
   }

   if (data.IsNextPage)
   {
    builder.Append(" ");

    vs["pi"] = data.PageIndex + 1;
    builder.Append(Html.LinkExtensions.ActionLink(html, "下一页", action, controller, vs, null));
    builder.Append(" ");


    vs["pi"] = data.TotalPage;
    builder.Append(Html.LinkExtensions.ActionLink(html, "末页", action, controller, vs, null));


   }
   builder.Append(" 每页" + data.PageSize + "条/共" + data.TotalCount + "条 第" + data.PageIndex + "页/共" + data.TotalPage + "页 </div>");
   return builder.ToString();
  }
  #endregion
 }
}
Nach dem Login kopieren
Rendering:

5. Laden Sie den Quellcode herunter:

jQuery.Ajax implementiert asynchron das Hinzufügen, Löschen, Ändern und Paging

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Verwandte Etiketten：
分页 增删改查 异步
Quelle：php.cn
Vorheriger Artikel：Ajax-Cross-Domain-Call-Webservice-Implementierungscode_Javascript-Kenntnisse Nächster Artikel：js-Prototypkette und Vererbungsanalyse (erste Erfahrung)_Javascript-Kenntnisse
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
Aus 2024-04-29 11:01:01
0
3
2055
So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
Aus 2024-04-23 00:22:19
0
11
2211
Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
Aus 2024-04-19 15:37:47
0
1
1865
Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
Aus 2024-04-18 23:52:34
0
1
1750
Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
Aus 2024-04-16 10:10:18
0
0
1776
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage