MVC5中后台提供Json,前台处理Json,绑定给Dropdownlist的例子:

前端:

我们以前在前端定义了两个控件:

<div class="row">
<div class="col-md-1">国家</div>
<div class="col-md-11">
@Html.DropDownListFor(model => model.Director.HometownID, MvcEntitiyFrameWork.ViewModels.HometownViewModel.GetHometownSelectList(), htmlAttributes: new { @class = "form-control", @style = "width:120px;" }) </div>
</div> <div class="row" style="margin-bottom:2px">
<div class="col-md-1">导演</div>
<div class="col-md-11">
@Html.DropDownListFor(model => model.DirectorID, MvcEntitiyFrameWork.ViewModels.DirectorViewModel.GetDirectorSelectList(Model.Director.HometownID.ToString()), htmlAttributes: new { @class = "form-control", @style = "width:120px;" })
@Html.ValidationMessageFor(model => model.DirectorID, "", new { @class = "text-danger" })
</div>
</div>

然后我们在脚本中执行如下代码:

特别的一点,我们在上面代码中貌似没指定控件的ID,但是运行以后在页面是可以看到控件的ID的,从而,我从运行后的界面得到ID来使用。

<script type="text/javascript">
$("#Director_HometownID").change(
function ()
{
GetDirector($(this).val());
}
);
function GetDirector(message) {
var option = {
url: '/Movies/GetDirectorList',
type: 'get',
chche: false,
dataType: 'json',
data: { _htid: message }, //发送服务器数据
success: function (data) { //成功事件
$("#DirectorID").empty(); $.each(data, function (i, item) {
$("<option></option>").val(data[i].Value).text(data[i].Text).appendTo($("#DirectorID")); });
},
error: function (XMLHttpRequest, textStatus, errorThrown) { //发送失败事件
alert(textStatus );
}
};
//进行异步传输
$.ajax(option);
} </script>

我们的后台,controller中定义如下,返回ActionResult

 public ActionResult GetDirectorList(string _htid)
{
try
{
//方法一 Ok
//var selectList = db.Directors.Where(a => a.HometownID.ToString() == _htid).Select(a => new SelectListItem
//{ // Text = a.DirectorName, // Value = a.DirectorID.ToString() //}); //return Json(selectList, JsonRequestBehavior.AllowGet);
//方法二 也Ok
List<Director> list = db.Database.SqlQuery<Director>("select DirectorID,DirectorName,HometownID from Directors where HometownID='" + _htid + "'").ToList(); SelectList pList = new SelectList(list, "DirectorID", "DirectorName"); return Json(pList, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
return null;
} }

前端就可以得到返回值,对dropdownlistbox数据进行绑定了(这里是dropdownlistbox级联筛选数据的应用)

MVC5中后台提供Json,前台处理Json,绑定给Dropdownlist的例子的更多相关文章

  1. 值提供器 AND 模型绑定器

    本章介绍了值提供器的作用,ASP MVC自带的5中值提供器.以及模型绑定器的作用,自定义模型绑定器并使用自定义的模型绑定器(类型上加上[ModelBinder(typeof(xx))]或者在全局模型绑 ...

  2. struts2:JSON在struts中的应用(JSP页面中将对象转换为JSON字符串提交、JSP页面中获取后台Response返回的JSON对象)

    JSON主要创建如下两种数据对象: 由JSON格式字符串创建,转换成JavaScript的Object对象: 由JSON格式字符串创建,转换成JavaScript的List或数组链表对象. 更多关于J ...

  3. EF+LINQ事物处理 C# 使用NLog记录日志入门操作 ASP.NET MVC多语言 仿微软网站效果(转) 详解C#特性和反射(一) c# API接受图片文件以Base64格式上传图片 .NET读取json数据并绑定到对象

    EF+LINQ事物处理   在使用EF的情况下,怎么进行事务的处理,来减少数据操作时的失误,比如重复插入数据等等这些问题,这都是经常会遇到的一些问题 但是如果是我有多个站点,然后存在同类型的角色去操作 ...

  4. 2.Rest Server提供数据库的Json字符串

    Delphi最大的特点是数据库操作便捷.为了能够给App提供数据,这里采用Rest Server后台,然后在用Json文件发送到APP前台. 1.后台的dataset转换为json. 这里百度后就可以 ...

  5. @requestbody---接受前端传json对象并绑定javabean

    @requestbody---接受前端传json对象并绑定javabean----https://blog.csdn.net/ljxbbss/article/details/74452326 最近代码 ...

  6. ajax提交数据到java后台,并且返回json格式数据前台接收处理值

    1.前台html页面.有一段代码如下: 账  户:  <input type="text" name="userName" id="userN& ...

  7. 前台处理json字符串的几种方法(转)

    原文地址http://www.css88.com/archives/3919 比如我有两个变量,我要将a转换成字符串,将b转换成JSON对象: var a={"name":&quo ...

  8. 一个可以将 json 字符串 直接绑定到 view 上的Android库

    android-data-binding 这是一个可以将 json 字符串 直接绑定到 view 上的库, 不用先将 json 转换为 model 类. 传送门(https://github.com/ ...

  9. DotNetCore学习-1.读取Json配置并绑定到配置类实例

    DotNetCore的程序的配置不再完全局限于XML文件,增加更加通用的Json配置. 读取Json配置文件的类主要在Microsoft.Extensions.Configuration命名空间下,创 ...

随机推荐

  1. Lesson 8 The best and the worst

    Text Joe Sanders has the most beautiful garden in our town. Nearly everbody enters for 'The Nicest G ...

  2. 建站技能get(1)— Asp.net MVC快速集成ckplayer网页视频播放器

    故事背景大概是这样的,我厂两年前给山西晋城人民政府做了一个门户网站(地址:http://jccq.cn/),运行了一年多固若金汤,duang的有一天市场部门过来说,新闻管理模块带视频的内容播放不了了. ...

  3. 激活jws.mono的图像处理

    不得不说,jws.mono真的给我们带来了很大的便利,它免除了我们编译Linux.NET所带来的烦恼,节省了我们的时间.但是金无足赤人无完人,虽然jws.mono已经大致能够提供与我们自行编译相同的效 ...

  4. Hadoop 裡的 fsck 指令

    Hadoop 裡的 fsck 指令,可檢查 HDFS 裡的檔案 (file),是否有 corrupt (毀損) 或資料遺失,並產生 HDFS 檔案系統的整體健康報告.報告內容,包括:Total blo ...

  5. Module-Zero之版本管理

    返回<Module Zero学习目录> 概要介绍 版本实体 版本管理者 概要介绍 绝大多数的SaaS(多租户)应用都有多个具有不同特征的版本(包).因此,他们可以给租户(即客户)提供不同的 ...

  6. C语言 · 出现次数最多的数

    问题描述 编写一个程序,读入一组整数,这组整数是按照从小到大的顺序排列的,它们的个数N也是由用户输入的,最多不会超过20.然后程序将对这个数组进行统计,把出现次数最多的那个数组元素值打印出来.如果有两 ...

  7. 在JavaScript中,利用三元运算符生成当前日期yyyy-MM-dd

    <script type="text/javascript"> //得到当前时间yyyy-MM-dd var myDate = new Date(); var nowD ...

  8. 程序中保存状态的方式之Cookies

    程序中保存状态的方式之 Cookies,之前写过一篇关于ViewState的.现在继续总结Cookies方式的 新建的测试页面login <%@ Page Language="C#&q ...

  9. fir.im Weekly - 如何进行 Android App 性能优化

    关于 Android App 的优化,@anly-jun 用 3 个月完成了这一系列文章,从 性能分析工具 到 ANR .Layout .消除卡顿 到 内存优化.内存分析工具大概十五六篇,并对此做一个 ...

  10. 推荐两款简单好用的图片放大jquery插件

    一.zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件引入该插件的js:zoomfiy.js 或 min引入该插件的css:zoomfiy.css 或 min前后顺序都可j ...