在MVC应用程序中基本搭建的CRUD上的级联下拉列表

时间:2017-08-02 07:10:35

标签: c# ajax asp.net-mvc entity-framework cascadingdropdown

一些背景:

您好,我是几周前开始编程并且只通过教程学习ASP.net MVC的,我设法根据我的模型获得了基于控制器和视图的脚手架,实体与其他实体有关系通过外键,所以不是那么远哈哈。到目前为止,我严重依赖Visual Studio 2017提供给我的自动进程,例如我的Create Form自动生成一个由另一个表中的数据填充的Dropdownlist。

问题:

但是,我现在正在根据我从其他下拉列表中选择的内容过滤此下拉列表的想法,我了解到我正在寻找的解决方案围绕层叠下拉列表。我的情况很像通常的Country-State示例,其中State下拉列表由我从Country下拉列表中选择的内容填充。我已经接受了我必须使用jquery / ajax之类的其他语言才能做到这一点,但我所使用的所有解决方案看起来与我正在做的事情或者对我来说太先进了。我非常努力地学习这个,但我担心我最终会失败,因为我只使用内置的脚手架来设置我的路线,连接和数据库。我已经看完了所有努力寻找与我有相同背景的解决方案,但我似乎无法找到一个。

应用程序

重现我的代码并不太难,因为就像我说的那样,我只遵循制作MVC应用程序的基本指令,而且几乎所有这些都是搭建的。所以一般的设置是这样的:

模型

地区实体(如国家/地区)

using System.Collections.Generic;

namespace SMOSystemv2.Models
{
    public class Region
    {
        public int ID { get; set; }
        public string RegionName { get; set; }
        public virtual ICollection<Province> Provinces { get; set; }
    }
}

省实体(如国家/地区)

using System.Collections.Generic;

namespace SMOSystemv2.Models
{

    public class Province
    {
        public int ID { get; set; }

        public int RegionID { get; set; }

        public virtual Region Region { get; set; }

        public string ProvinceName { get; set; }

        public virtual ICollection<Institution> Institutions { get; set; }
     }
}

机构实体(我将为学校,地区和学校所在省等机构保存数据对我来说非常重要)

using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

namespace SMOSystemv2.Models
{

    public class Institution
    {

        public int ID { get; set; }

        public int ProvinceID { get; set; }

        public string InstitutionName { get; set; }

        public virtual Province Province { get; set; }

    }
}

控制器

我对这些实体的控制器基本上是脚手架从一开始就给你的,除了在INSTITController 中有一些变化(参见Create,GetRegionList和GetProvinceList方法)我开始实施我搜索过Cascading Dropdownlists的解决方案

InstitutionsController

using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web.Mvc;
using SMOSystemv2.Models;

namespace SMOSystemv2.Controllers
{
    public class InstitutionsController : Controller
    {
        private SMOSystemv2Context db = new SMOSystemv2Context();

        // GET: Institutions
        public ActionResult Index()
        {
            var institutions = db.Institutions.Include(i => i.Province);
            return View(institutions.ToList());
        }

        // GET: Institutions/Create
        public ActionResult Create()
        {

            ViewBag.RegionList = new SelectList(GetRegionList(), "ID", "RegionName");

            return View();
        }

        public List<Region> GetRegionList()
        {
            List<Region> regions = db.Regions.ToList();
            return regions;
        }

        public ActionResult GetProvinceList(int RegionID)
        {
            List<Province> provinceList = db.Provinces.Where(x => x.RegionID == RegionID).ToList();

            ViewBag.ProvinceOptions = new SelectList(provinceList, "ProvinceID", "ProvinceName");
            return PartialView("ProvinceOptionPartial");
        }


        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }
    }
}

浏览

和以前一样,除了添加区域下拉列表,部分视图以及我从此YouTube视频https://www.youtube.com/watch?v=mNfoQe7XLkM观看的脚本外,我还没有改变脚手架的大部分内容,如图所示下面,

机构/创建

@model SMOSystemv2.Models.Institution

@{
    ViewBag.Title = "Create";
}

<h2>Add</h2>


@using (Html.BeginForm())
{

    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Institution</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="form-group">
            @Html.LabelFor(model => model.Province.RegionID, "RegionID", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">

    @if (ViewBag.RegionList != null)
    {

                @Html.DropDownListFor(m => m.Province.RegionID, ViewBag.RegionList as SelectList, "--Select Region--", new { @class = "form-control", @id = "RegionDDL"})
    }

            @Html.ValidationMessageFor(model => model.Province.RegionID, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.ProvinceID, "ProvinceID", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">

    @Html.DropDownListFor(m => m.ProvinceID, new SelectList(""), "--Select Province--", new { @class = "form-control"})

                @Html.ValidationMessageFor(model => model.ProvinceID, "", new { @class = "text-danger" })
        </div>
    </div>


        <div class="form-group">
            @Html.LabelFor(model => model.InstitutionName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.InstitutionName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.InstitutionName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>



@section Scripts {

    @Scripts.Render("~/bundles/jqueryval")

<script>
        $(document).ready(function () {

            $("#RegionDDL").change(function () {

                var regionID = $(this).val();
                debugger
                $.ajax({

                    type: "POST",
                    url: "/Institutions/Create/GetProvinceList?RegionID=" + regionID,
                    contentType: "html",

                    success: function (response) {
                        debugger
                        $("#ProvinceID").empty();
                        $("#ProvinceID").append(response);

                    }
                })
            })
        })
</script>
}

共享/ ProvinceOptionPartial.cshtml

<option value="">--Select Province--</option>

@if(ViewBag.ProvinceeOptions != null)
{
    foreach (var item in ViewBag.ProvinceOptions )
    {
        <option value="@item.Value">@item.Text</option>

    }
}

结果

After Selecting a Region and Pressing F10

问题

根据我的理解,我的ajax调用中的脚本中的语句由于某种原因被忽略。说实话,我不知道网址是做什么的,但是我模仿它和我根据自己的结构观看的视频一样。我已经玩过我的Dropdownlists的ID了。任何形式的帮助或建议将不胜感激。老实说,如果我现在看起来像个白痴,我真的不会介意,因为我已经太绝望了!救命啊!

0 个答案:

没有答案