• 在asp.net 1.1 中使用Ajax


    最近和一个朋友一起作一个网站,有些地方需要用到无刷新获取,但是他在本机上应用MajicAjax、Ajax.Net 都没有问题,传到服务器上面却不支持,没有办法,就只能自己写了。

    之前做Asp的时候也会应用到一些无刷新(比如鼠标移到某一行然后就出现一个div显示这行记录的详细信息、备注等内容,或者是注册时候无刷新提交到服务器端并返回该用户名是否已经注册)。当时还没有出现Ajax这个名词, 比如在CSDN提问都是讲 xmlhttp无刷新。当时我的做法多数是让服务器端.asp页面返回一段xml,然后客户端js直接建立microsfot.xmldom这个对象去解析 服务器端 asp返回的xml就可以了。或者也可以通过xmlhttp去获取responseXML ,然后建立xmldom对象去解析xml最终得到想要的部分,或者就是直接获取responseText然后再通过js操作来达到目的。

    网上搜索了一下在.net中应用ajax,比较有帮助的是小山的这篇blog  XmlHttp实现无刷新三联动下拉框。看得差不多了,那就比着葫芦画瓢开工吧。

    下面就用 发布日志时无刷新添加新的日志分类 这个页面及相应服务器端代码 作为示例演示一下俺的ajax:)

    客户端页面部分代码AddNewBlog.aspx : 发布日志,选择日志分类时可添加新分类并即时更新
    JS代码部分,结合使用Prototype.js

    <script language="javascript" src="../../Js/prototype.js"></script>
    <script language="javascript">
    //add ans save new rizhi class
    function addRzClass() {  
      
    var str='';
      str 
    += '<input type="text" size="20" maxlength="20" name="newRzClass" id="newRzClass" class="text">';
      str 
    += '&nbsp;&nbsp;<input type="button" onClick="javascript:saveRzClass()" value="保存">';
      str 
    += '&nbsp;&nbsp;<input type="button" onClick="javascript:cancelAddRzClass()" value="取消">';
      
      $('showRzClassInput').innerHTML 
    = str; 
    }


    function cancelAddRzClass() {
      $('showRzClassInput').innerHTML 
    = '<a href="javascript:addRzClass()">添加类别</a>'; 
    }


    function setTougao() {
      $('trConCategory').style.display
    =($('trConCategory').style.display=='none'?'':'none');
    }


    function saveRzClass() {  
      
    var slt = $('ddlRzClass');
      
    var newClassName = $F('newRzClass');
      
      
    var url = "RzClass.aspx";
      
    var pars = "cn="+ newClassName;
      
    var ajax = new Ajax.Request(
        url,
        
    {
        method : 'get',
        parameters: pars,
        onComplete : completeAddClass
        }

      );
    }


    function completeAddClass(request) {
      
    var slt = $('ddlRzClass');
      
    var newClassName = $F('newRzClass');
      
    var v = request.responseText;
      
    if(v.toString() =="0"{alert('该类别名称已存在,请选择其他名称');return false;}
        
      slt.options[slt.options.length]
    = new Option(newClassName, v);
      slt.options[slt.options.length
    -1].selected = true;
      $('hidNewClassId').value 
    = v;
      cancelAddRzClass();
    }


    function changeRzClass(e) {  
      $('hidNewClassId').value 
    = e.options[e.selectedIndex].value;
    }

    </script>
    添加分类的html部分
    <tr>                    
     
    <td width="9%">&nbsp;&nbsp;&nbsp;别:</td>
     
    <td width="91%">    
      
    <asp:dropdownlist id="ddlRzClass" runat="server" onchange="changeRzClass(this)"></asp:dropdownlist>&nbsp;&nbsp;
      
    <span id="showRzClassInput"><href="javascript:addRzClass()">添加类别</A></span>
      
    </td>
    </tr>

    相应服务器端.cs部分代码 (RzClass.aspx.cs)
        private const string KEY_CLASSNAME = "cn";
        
    private readonly Nineng.Blog.BLL.blog_rzClass rzClass=new Nineng.Blog.BLL.blog_rzClass();
      
        
    private void Page_Load(object sender, System.EventArgs e) {
          
    // 在此处放置用户代码以初始化页面
          
    //init
          if(!IsPostBack) {
            InitData();
          }


          
    if(className != ""{
            SaveClassAndReturnNewClassID(className);
          }

        }


        
    void SaveClassAndReturnNewClassID(string className) {
          
    string s = "0";
          
    if(! rzClass.Exists(this.loginUserBlogID, className)) {
            Nineng.Blog.Model.rzClass rzClassInfo
    =new Nineng.Blog.Model.rzClass();
            rzClassInfo.blogId
    =this.loginUserBlogID;
            rzClassInfo.className
    =Nineng.Utility.CommonFun.GetFormText(className);
            rzClassInfo.rzCount
    =0;
            
    //add class         
            s = rzClass.Add(rzClassInfo).ToString();
          }

          
    this.Response.Write(s);
          
    this.Response.End();
        }


        
    property for ajax


    以上代码算是ajax在.net1.1中的简单应用,.net 2.0中适用大同小异。通过以上的代码我觉得主要有下面几个要点:
    1. 服务器端.cs中使用property 在page_load 之前取获得 客户端js发送的request请求
    2. 输出需要获取的返回值后用response.end中止页面继续执行
    其余的实现主要是 客户端js的操作了。

    btw : 我觉得cnblog.com也可以在发布日志时增加通过Ajax无刷新添加新的分类这样一个功能,这样用户使用起来会更加方便一些。
  • 相关阅读:
    mysql查看每张表的空间使用情况
    下一步开发的技术点
    技术体系需要继续探索的东西
    架构体系需要进一步研究探索的V2路线图
    串行写队列的MYSQL大文本参数
    Node.js 数据存储方式的选择
    Node.js npm 详解
    Node入门
    Node.js知识点学习
    为什么应使用 Node.js
  • 原文地址:https://www.cnblogs.com/s1ihome/p/690161.html
Copyright © 2020-2023  润新知