ajax动态获取数据加载下拉列表

版权声明:转载请备注加链接原文,重写请修改加备注链接,谢谢 https://blog.csdn.net/weixin_43972758/article/details/86505063

直接上代码

View

使用 bootstrap 框架和 JQuery相关的包

<div class="form-group">
      <label for="slt-radioList">游戏列表</label>
      <select class="form-control" id="slt-radioList">                
      </select>
</div>

JS

var demo1="";
var demo2="";
$(function() {
    $.ajax({
        url: "/文件名/控制器名/action方法名",//处理逻辑的后台路径
        type: "Post",
        data: {
        		demo1:demo1,
        		demo2:demo2
        	  },//传递的参数,用,隔开;action方法名的参数要与“:”前的名字一致
        success: function(data) {
            if (data.code === 0) {
                var html = '<option selected="selected" value="0">--请选择--</option>';
                $('#slt-radioList').empty();//加载列表前先清掉子项,防止重复累计叠加
                for (var i = 0; i < data.rt.length; i++) {
                    html += '<option value = "' + data.rt[i].Value + '">' + data.rt[i].Text + '</option>';
                }
                $('#slt-radioList').append(html);
            } else {
                alert("单选列表获取失败");
            }
        }
    });
});

返回的 data 数据为一列表集合,如:返回类型为 List< Model>的结果;Model的属性字段为 Value和 Text,必须与上例 js的两个名字同步,若要修改,必须同步修改

Controllers

//要引用
using Newtonsoft.Json;

public ActionResult GetRadioList(string demo1,string demo2)
{
      RadioListBLL bll=new RadioListBLL();//实例化业务逻辑层
      var getData2 = bll.GetRadioList(demo1,demo2);//获取结果集
      if (getData2 != null)
      {
           return Json(Status.SuccessMsg(getData2));//返回结果
      }
      return Json(JsonConvert.SerializeObject(new { status = "error", message = "获取数据失败" }));
}

RadioListBLL

public List<Model> GetRadioList(string demo1,string demo2)
{
	 List<Model> list=new List<Model>();
     try
     {
          string sql = string.Format("select * from Id as Value,Name as Text where demo1={0},demo2={1}",demo1,demo2);
          /*
          *每个框架不同,处理方法也不同
          *
          *省略。。。
          *
          */
          return list;  
      }
      catch (Exception ex)
      { 
           return null;
      }
}

Model

public class Model
{
	public string Value{get;set};
	public string Text{get;set};
}

C#将Excel表格内容导入数据库–ASP.NET MVC

JQuery ajax 实现关闭弹窗,刷新列表

ASP.NET MVC的 Action跳转方法归纳部分

jQuery实现checkbox多选,单选与数据库交互传值,赋值整理

C# String字符串方法的使用归纳(直观,粗暴)

猜你喜欢

转载自blog.csdn.net/weixin_43972758/article/details/86505063