你的位置:首页 > ASP.net教程

[ASP.net教程]Repeater的高级使用


下面看一个简单的例子学习使用repeater实现新增多条记录的功能

前台代码

 

<style type="text/css">  #tbList{  background-color:white;  border:1px solid #0094ff;  margin:150px auto;  width:350px;  border-collapse:collapse;   }  #tbList td,th{   background-color:white;   border:2px solid #0094ff;   padding:5px;  }</style>

 

<asp:ScriptManager runat="server" ID="SM" EnablePartialRendering="true">  </asp:ScriptManager> 这个是为了实现新增多条记录时实现无刷新!  <table id="tbList">      <tr>        <td>          设施设备        </td>        <td colspan="7">        <asp:UpdatePanel ID="updatePanel1" runat="server">         <ContentTemplate>          <asp:Button ID="addEquipmentBtn" runat="server" Text="新增" OnClick="AddEquipment_Click"/>          <asp:Repeater ID="rptInstallationEquipment" runat="server" OnItemCommand="rptInstallationEquipment_ItemCommand" OnItemDataBound="rptInstallationEquipment_ItemDataBound">              <HeaderTemplate>              <table id="tblInstallationEquipment" width="100%">                <tr>                  <th>                    序号                  </th>                  <th>                    专业                  </th>                  <th>                    日期时间                  </th>                  <th>                    详细内容                  </th>                  <th>                    故障号                  </th>                  <th>                    处理结果                  </th>                  <th>                    操作                  </th>                </tr>              </HeaderTemplate>              <ItemTemplate>                <tr>                  <td class="bg nowidth">                    <asp:Label runat="server" ID="EquipmentSortOrder" Text='<%#Container.ItemIndex + 1%>'></asp:Label>                  </td>                  <td class="bg nowidth">                    <asp:DropDownList runat="server" ID="EquipmentType" >                        <asp:ListItem Value="lanwhy">lanwhy</asp:ListItem>                        <asp:ListItem Value="8023">8023</asp:ListItem>                     </asp:DropDownList>                  </td>                  <td class="bg nowidth">                  <asp:TextBox ID="FaultDateTime" Text='<%#Eval("FaultDateTime") %>' isAddRedStar="false" runat="server" validator="required,pattern[date]">                  </asp:TextBox>                   </td>                  <td class="bg nowidth">                    <asp:TextBox runat="server" ID="DetailContent" Text='<%#Eval("DetailContent") %>'                      MaxLength="1000" TextMode="MultiLine" validator="length[1,1000]"></asp:TextBox>                  </td>                  <td class="bg nowidth">                    <asp:TextBox runat="server" ID="FaultSortOrder" Text='<%#Eval("FaultSortOrder") %>' ></asp:TextBox>                  </td>                  <td class="bg nowidth">                      <asp:TextBox runat="server" ID="Result" Text='<%#Eval("Result") %>' MaxLength="1000" TextMode="MultiLine" validator="length[1,1000]"></asp:TextBox>                  </td>                  <td class="bg nowidth">                    <asp:Button ID="btnDelete" runat="server" Text="删除" CommandName="EquipmentDeleteInfo"                      CommandArgument='<%#Container.ItemIndex + 1%>' />                      <asp:HiddenField runat="server" ID="hidInstallationEquipmentID" Value='<%#Eval("InstallationEquipmentID") %>' />                  </td>                </tr>              </ItemTemplate>            <FooterTemplate>                  </table>            </FooterTemplate>      </asp:Repeater>         </ContentTemplate>        </asp:UpdatePanel>       </td>       </tr>  </table>

 

 

后台代码

添加设施设备 也就是新增按钮的点击事件protected void AddEquipment_Click(object sender, EventArgs e)    {      DataTable dt = this.CopyFormDetailData();      DataRow dr = dt.NewRow();      dt.Rows.Add(dr);      ViewState.Add("EquipmentData", dt);      DetailDataBinds();    }protected DataTable CopyFormDetailData()    {      if ((ViewState["EquipmentData"] as DataTable) == null)      {        DataTable dtView = new DataTable();        dtView.Columns.Add("InstallationEquipmentID", typeof(string));        dtView.Columns.Add("EquipmentCode", typeof(string));        dtView.Columns.Add("EquipmentName", typeof(string));        dtView.Columns.Add("FaultDateTime", typeof(string));        dtView.Columns.Add("DetailContent", typeof(string));        dtView.Columns.Add("FaultSortOrder", typeof(string));        dtView.Columns.Add("Result", typeof(string));        dtView.Rows.Add(dtView.NewRow());        ViewState.Add("EquipmentData", dtView);      }      DataTable dt = (ViewState["EquipmentData"] as DataTable).Clone();      foreach (RepeaterItem ri in this.rptInstallationEquipment.Items)      {        DataRow dr = dt.NewRow();        dr["InstallationEquipmentID"] = (ri.FindControl("hidInstallationEquipmentID") as HiddenField).Value;        dr["EquipmentCode"] = (ri.FindControl("EquipmentType") as DropDownList).SelectedValue;        dr["EquipmentName"] = (ri.FindControl("EquipmentType") as DropDownList).SelectedItem.Text;        dr["FaultDateTime"] = (ri.FindControl("FaultDateTime") as TextBox).Text;        dr["DetailContent"] = (ri.FindControl("DetailContent") as TextBox).Text;        dr["FaultSortOrder"] = (ri.FindControl("FaultSortOrder") as TextBox).Text;        dr["Result"] = (ri.FindControl("Result") as TextBox).Text;        dt.Rows.Add(dr);      }      return dt;    }     protected void DetailDataBinds()    {      DataTable dt = ViewState["EquipmentData"] as DataTable;      rptInstallationEquipment.DataSource = dt;      rptInstallationEquipment.DataBind();    }删除设施设备数据protected void rptInstallationEquipment_ItemCommand(object sender, RepeaterCommandEventArgs e)    {      if (e.CommandName == "EquipmentDeleteInfo")      {        DataTable dt = new DataTable();        dt = this.CopyFormDetailData();         dt.Rows.RemoveAt(e.Item.ItemIndex);        this.rptInstallationEquipment.DataSource = dt;        this.rptInstallationEquipment.DataBind();        int cnt = this.rptInstallationEquipment.Items.Count;        if (cnt > 0)        {          ((Button)this.rptInstallationEquipment.Items[cnt - 1].FindControl("btnDelete")).Focus();        }        else        {          this.addEquipmentBtn.Focus();        }      }    }绑定设施设备数据protected void rptInstallationEquipment_ItemDataBound(object sender, RepeaterItemEventArgs e)   { //因为专业和处理结果每次新增新行时都会有默认值,不做处理的话会把上一行的数据覆盖      TextBox txtResult = (TextBox)e.Item.FindControl("Result");      if (txtResult != null)      {        txtResult.Text = "未修复";        DataRowView drv = (DataRowView)e.Item.DataItem;        if (!string.IsNullOrWhiteSpace(drv["Result"].ToString()))        {          txtResult.Text = drv["Result"].ToString();        }      }       DropDownList dropEquipmentType = (DropDownList)e.Item.FindControl("EquipmentType");      if (dropEquipmentType != null)      {        dropEquipmentType.DataBind();        DataRowView drv = (DataRowView)e.Item.DataItem;        //保持下拉框选择的项        if (!string.IsNullOrWhiteSpace(drv["EquipmentName"].ToString()))        {          dropEquipmentType.Items.FindByText(drv["EquipmentName"].ToString()).Selected = true;        }      }    }

 

 

可以看出,第一次点击新增时,增加了序号为1的行,输入数据后,再次点击新增按钮,发现序号1的行的数据还是会保持!

之前没接触这种用法时,可以用JavaScript或者JQuery实现这种新增多行的需求,当进行项目开发时,学会了这种,可以很容易实现这种需求,快捷完成增删改查!

点击删除按钮可以删除整行

 

 

 

下面简单介绍下使用JQuery的方式实现增加多条记录

<table>    <tr>      <th class="thTitle" colspan="10" style="text-align: left">          近期工作安排        <input type="button" onclick="addSecurity()" value="增加" />      </th>    </tr>    <tr>      <td colspan="10">        <table width="100%" class="formitem" id="tabSecurity">          <tr>            <th style="text-align: center; width: 40px">              序号            </th>            <th style="text-align: center; width: 40%;">              事件情况            </th>            <th style="text-align: center; width: 30%;">              处理意见            </th>            <th style="text-align: center; width: 20%;">              责任单位            </th>            <th style="text-align: center; width: 55px">              操作            </th>          </tr>        </table>      </td>    </tr>  </table>

 

 

//增加近期工作安排  function addSecurity() {    var trNum = $("#tabSecurity tr").length;    var html = '<tr>';    html += '<td>' + trNum + '</td>';    html += '<td><textarea validator="required,length[1,2000]" ></textarea></td>';    html += '<td><textarea validator="required,length[1,2000]" ></textarea></td>';    html += '<td><input type="hidden" /><textarea validator="required" ></textarea></td>';    html += '<td><input type="button" onclick="deleteSecurity(this)" value="删除" /></td>';    html += '</tr>';    $("#tabSecurity").append(html);    //tabSecurity.ResetHeight();  }   function deleteSecurity(_this) {    $(_this).parent().parent().remove();    $("#tabSecurity tr").each(function (index, element) {      if (index > 0) {        $(this).find('td').eq(0).html(index);      }    });  }   function getItemDetail() {    var resultArray = [];    $("#tabSecurity tr").each(function (index, element) {      if (index > 0) {        var entity = {};        entity.ORDER = $(this).children().eq(0).html();        entity.EVENTNOTE = $(this).children().eq(1).children().eq(0).val();        entity.DealProposal = $(this).children().eq(2).children().eq(0).val();        entity.RESORGIDS = $(this).children().eq(3).children().eq(0).val();        resultArray.push(entity);      }    });    return resultArray;  }

 

 

 

如何获取repeater中多行数据?List<InstallationEquipmentInfo> listInstallationEquipmentInfo = new List<InstallationEquipmentInfo>();      foreach (Control record in this.rptInstallationEquipment.Items)      {        InstallationEquipmentInfo installationEquipmentInfo = new InstallationEquipmentInfo();        installationEquipmentInfo.EquipmentCode = ((DropDownList)record.FindControl("EquipmentType")).SelectedValue;        installationEquipmentInfo.EquipmentName = ((DropDownList)record.FindControl("EquipmentType")).SelectedItem.Text;        installationEquipmentInfo.EquipmentSortOrder = ((Label)record.FindControl("EquipmentSortOrder")).Text;        installationEquipmentInfo.DetailContent = ((TextBox)record.FindControl("DetailContent")).Text;        installationEquipmentInfo.FaultDateTime = ((TextBox)record.FindControl("FaultDateTime")).Text.ToString();        installationEquipmentInfo.FaultSortOrder = ((TextBox)record.FindControl("FaultSortOrder")).Text;        installationEquipmentInfo.Result = ((TextBox)record.FindControl("Result")).Text;        listInstallationEquipmentInfo.Add(installationEquipmentInfo);      }