C# 在视图asp.net core中显示下拉列表中的数据

我有一个视图需要显示下拉列表，然后使用viewBag在同一视图中显示下拉列表中的数据

共有3个表：客户表、分配表、员工表。Assign和employee有关系，但客户不需要，因此ViewBag用于在另一个视图中显示数据，我如何使用ViewBag构建视图中显示的下拉列表，并在同一视图中显示customer表中选定的数据

需要在URL中的名称、任务和图像中显示数据的视图

@model HandyApp.Models.ViewModels.AsignVM

<div>
// drop down needed in this section
</div>
<div>
//  display data from selected drop down item needed in this section
</div>

<form method="post" asp-action="Create">
    <div class="container">
        <div class="form-row">
            <div class="col-md-12">
                <h1>Customer task</h1>
            </div>
        </div>
        <div class="form-row">
            <div class="col-md-12"><strong style="margin-right: 7px;">Name :</strong><span style="margin-top: 1px;">harry</span></div>
        </div>
    </div>
    <div class="container">
        <div class="form-row">
            <div class="col-md-12"><strong>Tasks :</strong><span style="margin-left: 12px;">paint shed</span></div>
        </div>
    </div>
    <div class="container">
        <div class="form-row">
            <div class="col-md-12"><strong>Telephone number :</strong><span style="margin-left: 12px;">000000000000</span></div>
        </div>
    </div>
    <div class="container">
        <div class="form-row">
            <div class="col"><strong>Address :&nbsp;</strong><span>123 Fake Street</span><span></span></div>
            <div class="col-md-12" style="margin-top: 31px;">
                <h3 style="margin-left: 0px;">Assign tasks</h3>
            </div>
        </div>

        <div class="form-row">
            <div class="col-md-3">
                <label style="margin-left: 47px;">Name of customer</label>
                <input asp-for="Asign.Name" class="form-control" type="text" value="customers name" style="margin-top: 2px;">
                <label style="margin-top: 8px;">Employee Assign&nbsp;</label>
                <select asp-for="Asign.EmployeeNameId" asp-items="@Model.TypeDropDown" class="form-control">
                    <option selected>-- Select option</option>
                </select>
                <label style="margin-top: 8px;">Employee Assign&nbsp;</label>
                <select asp-for="Asign.Status" class="form-control">
                    <option value="in progress" selected="">in progress</option>
                    <option value="completed">completed</option>
                </select>
            </div>
          
                <div class="col-md-3">
                    <label style="margin-left: 54px;">Tasks&nbsp;</label>
                    <input asp-for="Asign.Tasks" class="form-control" value="Enter tasks here" style="margin-top: 4px;">
                
                    <label style="margin-top: 8px;">Telephone</label>
                    <input asp-for="Asign.Telephone" value="Type telephone" class="form-control" type="text">
                    <label tyle="margin-top: 8px;">Address</label>
                    <input asp-for="Asign.Address" class="form-control" value="enter address" type="text"></div>
            </div>
            <button class="btn btn-primary" type="submit" style="margin-top: 35px;margin-left: 34px;">Submit</button>
        </div>
    
</form>

分配模型

public class Assign
{
    [Key]
    public int Id { get; set; }

    public string Name { get; set; }
    public string Tasks { get; set; }
    public string Telephone { get; set; }
    public string Address { get; set; }
    public string Status { get; set; }
    public string ImageUrl { get; set; }

    public int EmployeeNameId { get; set; }
    [ForeignKey("EmployeeNameId")]
    public virtual Employee Employee { get; set; }
}

员工模式

public class Employee
{
    [Key]
    public int Id { get; set; }
    public string Name { get; set; }
    public string Speciality { get; set; }
}

指定视图模型

public class AssignVM
{
    public Assign Assign { get; set; }

    public IEnumerable<SelectListItem> TypeDropDown { get; set; }
}

分配控制器

public class AssignController : Controller
{
    private readonly ApplicationDbContext _db;

    public AssignController(ApplicationDbContext db)
    {
        _db = db;
    }

    public IActionResult Index()
    {
        IEnumerable<Asign> objList = _db.Assigns;
        IEnumerable<Customer> custObj = _db.Customers;

        foreach (var obj in objList)
        {
            obj.Employee = _db.Employees.FirstOrDefault(u => u.Id == obj.EmployeeNameId);
        }

        ViewBag.Customer = custObj;

        return View(objList);
    }

    public IActionResult Create()
    {
        AssignVM assignVM = new AssignVM()
        {
            Assign = new Assign(),
            TypeDropDown = _db.Employees.Select(i => new SelectListItem
            {
                Text = i.Name,
                Value = i.Id.ToString()
            })
        };

        return View(assignVM);
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public IActionResult Create(AssignVM obj)
    {
        _db.Assigns.Add(obj.Assign);

        _db.SaveChanges();

        return RedirectToAction("Index");
    }

    public IActionResult Delete(int? id)
    {
        if (id == null || id == 0)
        {
            return NotFound();
        }

        var obj = _db.Assigns.Find(id);

        if (obj == null)
        {
            return NotFound();
        }

        return View(obj);
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public IActionResult DeletePost(int? id)
    {
        var obj = _db.Assigns.Find(id);

        if (obj == null)
        {
            return NotFound();
        }

        _db.Assigns.Remove(obj);
        _db.SaveChanges();

        return RedirectToAction("Index");
    }
}

---

使用jquery从controller获取数据将是最简单的方法，您可以查看我的演示：

该图像存储在我的演示中的wwwroot/Images/***中

控制器：

[HttpGet]
    public JsonResult GetCustomer(string Id)
    {
        var img = _db.Customers.Where(x => x.Id.ToString()==Id).ToList();
        return Json(img);
    }

视图：

结果:

---

最大预期客户数量是多少？20，由于有一个图像，我不希望它在屏幕上填满所有客户，只需选定的客户来显示他们的数据，而不是在一个列表中显示所有客户您有多个选项。其中之一：当用户选择客户时，使用javascript将url更新为/xx/customers/SELECTED-customer-ID。这将重新加载页面。现在，您可以在控制器操作中读取id，并在视图中显示正确的客户。有没有办法不使用javascript而只使用asp.net？您只需提交表单即可？但在这种情况下，我建议使用JavaScript——听起来更简单、更干净

[HttpGet]
    public JsonResult GetCustomer(string Id)
    {
        var img = _db.Customers.Where(x => x.Id.ToString()==Id).ToList();
        return Json(img);
    }

<div>
    <select class="form-control" id="select1" asp-items="@(new SelectList(ViewBag.customers,"Value", "Text"))">
    </select>
</div>
<div id="showhere">  
</div>
//........your other html

@section Scripts
{
    <script>
    $(document).ready(function () {
        $("#select1").change(function () {
            var Id = $("#select1 option:selected").val();
            $.ajax({
                type: 'Get',
                url: 'Assign/GetCustomer',
                data: { Id: Id },
                dataType: "json",
                success: function (data) {
                    document.getElementById("showhere").innerHTML = "";
                    document.getElementById("showhere").innerHTML +=
                        "<img src=" + data[0].imageUrl + " height="+50+" width="+50+">";
                }
            });
        });
    });
</script>
}