在视图 asp.net 内核中从下拉列表中显示数据

Question

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

有3个表客户，分配，员工。 分配和员工有关系，但客户没有也不需要，因此 ViewBag 被用于在另一个视图中显示数据，我如何使用 viewBag 构建一个显示在视图中的下拉列表并显示来自客户的选定数据在同一视图中的表？

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>

客户 model

public class Customer
{
    [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 ImageUrl { get; set; }
}

分配 model

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; }
}

员工 model

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

分配 ViewModel

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

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

分配 controller

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");
    }
}

Answer 1

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

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

Controller：

[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>
}

结果：