[原创]@Html.DropDownListFor获取用户选中的数据并传到后台

简介: [原创]@Html.DropDownListFor获取用户选中的数据并传到后台

情况:


一张Movie表,一张Level表

当添加Movie信息的时候,属性Movie.level从Level表获取,并以DropDown的形式显示,用户填写好信息之后获取用户选中的值提交到后台,保存到数据库。

获取数据

** 后台MovieController **

public ActionResult Create()
        {
            MovieDBContext dbContext = new MovieDBContext();
            ViewBag.level = new SelectList(dbContext.Levels, "LevelName", "LevelName");
           //将数据库Level表的数据填充到SelectList并通过ViewBag传到前端
            return View();
        }


** 前端 展示数据**

<div class="form-group">
            <div class="control-label col-md-2">
                <b>电影等级</b>
            </div>
            <div class="col-md-10">
                @Html.DropDownListFor(Model => Model.level.LevelName,(IEnumerable<SelectListItem>)ViewBag.level)
              //因为Movie.level 保存的其实是一个Level类型的对象,但是Dropdown选中的值是一个string值,所以我们将选中的值赋给Movie.level.LevelName
            </div>
        </div>

** 后台处理数并添加到数据库  **

[HttpPost]
        public ActionResult Create(Movie movie)
        {
            MovieDBContext dbContext = new MovieDBContext();
            Level l = dbContext.Levels.FirstOrDefault(u => u.LevelName == movie.level.LevelName);
            //通过在前端得到的LevelName属性反过来查到这个对象,并且赋给movie.level 
            movie.level = l;
            dbContext.Movies.Add(movie);
            dbContext.SaveChanges();
            return RedirectToAction("ListTemplete");
        }


** List展示数据的时候 **

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Title)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ReleaseTime)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Genre)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.level.LevelName) 
             //item.level.LevelName
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
            @Html.ActionLink("Details", "Details", new { id=item.ID }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.ID })
        </td>
    </tr>


相关文章
|
1月前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
本文介绍了Twaver HTML5中数据的批量加载方法,通过使用`box.startBatch()`可以在大量数据加载时提高性能。文章通过示例代码展示了如何在React组件中使用批量加载功能,以减少界面重绘次数并提升效率。
47 1
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
|
1月前
|
XML 存储 JSON
Twaver-HTML5基础学习(19)数据容器(2)_数据序列化_XML、Json
本文介绍了Twaver HTML5中的数据序列化,包括XML和JSON格式的序列化与反序列化方法。文章通过示例代码展示了如何将DataBox中的数据序列化为XML和JSON字符串,以及如何从这些字符串中反序列化数据,重建DataBox中的对象。此外,还提到了用户自定义属性的序列化注册方法。
39 1
|
1月前
|
XML 移动开发 JSON
Twaver-HTML5基础学习(18)数据容器(1)_增删查改、遍历数据容器、包含网元判断
本文介绍了Twaver HTML5中的数据容器(DataBox),包括如何进行增删查改操作、遍历数据容器以及判断网元是否存在于数据容器中。DataBox用于管理所有的网元对象,如ElementBox、LayerBox、AlarmBox等,并通过示例代码展示了其常用方法的使用。
42 1
Twaver-HTML5基础学习(18)数据容器(1)_增删查改、遍历数据容器、包含网元判断
|
1月前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(2)基本数据元素(Data)
本文介绍了Twaver HTML5中的基本数据元素,包括Data、Element、Alarm和Layer等,它们分别用来描述拓扑的网元、告警和图层。文章详细解释了Data类的基本属性和方法,并提供了如何在React组件中使用Twaver创建节点和连线的示例代码。
35 1
Twaver-HTML5基础学习(2)基本数据元素(Data)
|
1月前
|
数据采集 存储 JavaScript
如何使用Cheerio与jsdom解析复杂的HTML结构进行数据提取
在现代网页开发中,复杂的HTML结构给爬虫技术带来挑战。传统的解析库难以应对,而Cheerio和jsdom在Node.js环境下提供了强大工具。本文探讨如何在复杂HTML结构中精确提取数据,结合代理IP、cookie、user-agent设置及多线程技术,提升数据采集的效率和准确性。通过具体示例代码,展示如何使用Cheerio和jsdom解析HTML,并进行数据归类和统计。这种方法适用于处理大量分类数据的爬虫任务,帮助开发者轻松实现高效的数据提取。
如何使用Cheerio与jsdom解析复杂的HTML结构进行数据提取
|
1月前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(3)基本数据元素(Data)其他功能函数以及组Group
本文介绍了Twaver HTML5中Data类的其他功能函数,如获取和操作子网元的方法,以及组(Group)的概念和使用。文章通过示例代码展示了如何在React组件中创建组、添加图元到组中,并通过toChildren函数获取满足特定条件的图元。
32 0
Twaver-HTML5基础学习(3)基本数据元素(Data)其他功能函数以及组Group
|
14天前
|
XML Web App开发 数据格式
HTML 页面显示 XML 数据
10月更文挑战第2天
|
15天前
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
17 0
|
2月前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
60 0
|
2月前
|
移动开发 前端开发 JavaScript
前端表单验证的完美攻略:HTML5属性与JavaScript方法的无缝对接,让你的Web应用数据输入既安全又优雅
【8月更文挑战第31天】本文介绍前端表单验证的重要性及其实现方法,利用HTML5的内置属性如`required`、`pattern`和`minlength`进行基本验证,并借助JavaScript处理复杂逻辑,如密码确认。通过示例代码详细展示了如何结合两者实现高效且友好的表单验证,同时使用CSS增强用户体验。此方法简化开发流程并提升验证效果。
65 0