Asp.Net 前后台交互小结

时间：2023-03-09 13:04:44
Asp.Net 前后台交互小结

转自：http://blog.****.net/wlccomeon/article/details/17270427

一、前台调用后台

        前台调用后台的方法一共可分为两大类：使用Html控件和使用Asp控件。

1、Asp控件

      非常方便，方便到让你吃惊！比如前台放上一个LinkButton，直接双击就可以进入到后台，然后轻松编写自己需要的代码！
    例如在前台添加一个服务器控件Button
  1. <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
双击，进入后台，可添加自己的代码，这里举一个简单的：
  1. protected void Button1_Click(object sender, EventArgs e)
  2. {
  3. Response.Write("服务器控件！");
  4. }

2、html控件

        但是，Asp控件属于服务器控件，比较耗费资源，同时它的灵活性和兼容性相对于Html控件来说却又有所不及。所以，在所做的项目中大量的使用了Html控件，而html控件除了添加runat="server"的方法（见控件的显示隐藏方法：http://blog.****.net/wlccomeon/article/details/16995481）能够实现与后台的打交道的方式之外，还有两种间接的方法：使用Ajax和提交表单，这里就都需要用到JavaScript的相关知识了，下面一一举例：

①提交表单

首先在表单中添加一个html控件或者仅仅一个a标签：
  1. <form id="login">
  2. <a href="#" id="strLogin" name="strLogin" onclick="checkInfo()">登录</a>
  3. </form>
  4. 然后，添加Js函数来提交表单：
  5. //登陆，提交表单
  6. function Login() {
  7. var form = document.forms["login"];    //获取要提交的表单的id
  8. form.action = "default.aspx";                 //刷新的目标页面
  9. form.method = "post";                           //form.method的默认数据提交方法是get,适用于服务器控件
  10. form.submit();                                         //提交
  11. }
运行之后，点击“登陆”a标签，即可对default进行刷新，从而运行后台代码。需要注意的是，这种方法想要触发的后台代码必须写在Page_Load里。

②使用Ajax

首先添加一个a标签：

  1. <a href="#" onclick="loginQuit()">退出</a>

编写JS代码

  1. //退出登录
  2. function loginQuit() {
  3. $.ajax({
  4. type: "Post",
  5. url: "Exit.ashx",               //退出的一般处理程序
  6. onSubmit: function () {
  7. },
  8. //判断结果是否正确
  9. success: function (result) {
  10. if (result == "T") {
  11. //隐藏登陆后，显示登陆前
  12. document.getElementById("loginAfter").style.display = "none";//隐藏
  13. document.getElementById("loginBefore").style.display = "block";//显示
  14. ////清空用户输入记录
  15. document.getElementById("UserName").value = "";
  16. document.getElementById("txtCode").value = "";
  17. document.getElementById("Password").value = "";
  18. }
  19. else {
  20. alert('退出失败!')
  21. }
  22. }
  23. });
  24. }

新建一个一般处理程序Exit.ashx，添加代码：

  1. public void ProcessRequest(HttpContext context)
  2. {
  3. context.Session["UserName"]=null;
  4. context.Session["UserID"] = null;
  5. context.Response.ContentType = "text/plain";
  6. context.Response.Write("T");
  7. }

后台代码就可以根据Session是否存在来进行自己的相关操作了。

二、后台调用前台

后台调用前台的方法有则有很多，目前我用到的大致有两种：

1、使用Response.Write方法

      该方法只能调用js内部自带的函数：
  1. Response.Write("<script type='text/javascript'>alert('成功!');</script>");

如果在后台经常需要用到这个JS函数的话，可以抽象出为一个类（本例为 jumpFrame），在类中添加方法：

  1. public static void AlertBox(string errMsg)
  2. {
  3. StringBuilder sb = new StringBuilder();
  4. sb.Append("<script language=\"javascript\"> \n");
  5. sb.Append("alert(\"" + errMsg.Trim() + "\"); \n");
  6. //sb.Append("window.location='test.aspx';\n");
  7. sb.Append("</script>");
  8. System.Web.HttpContext.Current.Response.Write(sb.ToString());
  9. }

调用：

  1. protected void Button1_Click(object sender, EventArgs e)
  2. {
  3. jumpFrame.AlertBox("成功!");
  4. }

2、用ClientScript类动态添加脚本

这个方法可以使用JS自定义函数，用法如下：在想调用某个Javascript脚本函数的地方添加代码，注意要保证MyFun已经在脚本文件中定义过了。

  1. ClientScript.RegisterStartupScript(ClientScript.GetType(), "myscript", "<script>MyFun();</script>");

这些个方法从探索到实践到解决其中出现的各种问题到最后能够成功运用于所在的项目，费了很大很大的精力。在这次历练中对于没有接触到的知识能够简单的运用是一个非常好的学习过程，而对于已经看过相关的视频如新闻发布系统和北大青鸟课程则是一个很好的回顾的过程。学而不用，久而久之就会生疏甚至遗忘；而用中学则比单纯的看视频跟着敲代码掌握的更牢、体会的更深。最后，如果大家有更好的方法或者我在上面的运用有什么不妥的地方还请各位不吝指教！

相关文章