c# - 在通过级联加载的 selectchange 上将项目添加到 c# 列表
问题描述
我有多个 attr 的 selectList,通过级联填充(在选择一家公司时,我只显示选定的公司模型)现在我想允许用户选择多个模型,以便在选择时,项目应添加到 c# 列表中并显示在页面中,然后允许用户选择更多任何其他公司。附图片以下是我的代码。 订单视图模型
public class OrderViewModel
{
[Display(Name ="Order ID")]
public int order_id { get; set; }
[Required]
public string cus_name { get; set; }
public string cus_phone { get; set; }
public System.DateTime Date { get; set; }
[DataType(DataType.Date)]
public System.DateTime Date { get; set; }
public int Amount { get; set; }
public List<Products> Products { get; set; }
}
我想在 OrderViewModel 的“产品”列表中绑定选定的项目,这些项目将通过更多字段发送到服务器。 产品
public class Products
{
public int id { get; set; }
public int modelId { get; set; }
public int Phoneid { get; set; }
public int Quantity { get; set; }
public double price { get; set; }
public bool isSelected { get; set; }
public int order_id { get; set; }
}
剃刀视图
<div class="form-group row">
<label class="control-label col-6">Company Name</label>
<div class="col-12">
<select id="CompanyId" class="custom-select mr-sm-2"
asp-items="@(new SelectList( @ViewBag.Companies,"Phoneid","Com_name"))">
<option value="">Please Select</option>
</select>
</div>
<span class="text-danger"></span>
</div>
<div class="form-group row">
<label class="control-label col-6"></label>
<div class="col-12">
<select id="modelId" multiple class="custom-select mr-sm-2"
asp-items="@(new SelectList(string.Empty,"modelId","model_name","--Select--"))">
<option value="">Please Select</option>
</select>
</div>
<span class="text-danger"></span>
</div>
我还没有尝试在列表中添加项目
<script>
$("#modelId").change(function () {
var list = @(Model.Products);
let item = $(this).children("option:selected").val();
list.forEach(x => {
if (x.modelId != item) {
@{
Products products = new Products()
{
isSelected=true,
modelId= item,
};
Model.Products.Add(products);
}
}
});
})
@for (int i = 0; i < Model.Products.Count; i++)
{
}
</script>
我现在通过部分视图显示所有选定的产品我只想将这些选定的产品连同每个产品的数量和价格发送到服务器
解决方案
这是一个工作演示,如下所示:
模型:
public class Model
{
[Key]
public int modelId { get; set; }
[Display(Name = "Model Name")]
public string model_name { get; set; }
public int Phoneid { get; set; }
public IList<Products> Products { get; set; }
}
public class Company
{
[Key]
public int Phoneid { get; set; }
[Display(Name = "Company Name")]
public string Com_name { get; set; }
}
public class Products
{
public int id { get; set; }
public int modelId { get; set; }
public int Phoneid { get; set; }
public int Quantity { get; set; }
public double price { get; set; }
public bool isSelected { get; set; }
public int order_id { get; set; }
}
查看(索引.cshtml):
@model Products
<div>
<div style="float:left;width:40%">
<form id="form">
<div class="form-group row">
<label>Company Name</label>
<div class="col-12">
<select id="CompanyId" asp-for="Phoneid" class="custom-select mr-sm-2"
asp-items="@(new SelectList( @ViewBag.Companies,"Phoneid","Com_name"))">
<option value="">Please Select</option>
</select>
</div>
</div>
<div class="form-group row">
<label>Model Name</label>
<div class="col-12">
<select id="modelId" multiple class="custom-select mr-sm-2" name="modelId"
asp-items="@(new SelectList(string.Empty,"modelId","model_name","--Select--"))">
<option value="">Please Select</option>
</select>
</div>
</div>
<div>
<input type="button" id="saveBtn" value="Save" />
</div>
</form>
</div>
<div style="float:right;width:60%">
<h5>Products</h5>
<div id="products"></div>
</div>
</div>
@section Scripts
{
<script>
$(function () {
$('#CompanyId').change(function () {
var data = $("#CompanyId").val();
console.log(data);
$.ajax({
url: '/Home/GetModel?Phoneid=' + $("#CompanyId").val(),
type: 'Get',
success: function (data) {
var items = "<option value='0'>Select</option>";
$.each(data, function (i, item) {
items += "<option value='" + item.value + "'>" + item.text + "</option>";
});
$('#modelId').html(items);
}
})
});
$('#saveBtn').click(function () {
$.ajax({
url: '/Home/GetProduct?Phoneid=' + $("#CompanyId").val() + "&modelId=" + $('#modelId').val(),
type: 'Post',
success: function (data) {
$('#products').html(data);
}
})
})
})
</script>
}
部分视图(_Partial.cshtml):
@model IEnumerable<Products>
<table class="table">
<tbody>
@foreach (var item in Model)
{
<tr>
<td>check</td>
<td>
<input asp-for="@item.isSelected" />
</td>
<td>Product Id</td>
<td>
@Html.DisplayFor(modelItem => item.id)
</td>
</tr>
<tr>
<td>Quantity</td>
<td>
@Html.DisplayFor(modelItem => item.Quantity)
</td>
<td>Price</td>
<td>
@Html.DisplayFor(modelItem => item.price)
</td>
</tr>
}
</tbody>
</table>
控制器:
public class HomeController : Controller
{
private readonly MvcProj3Context _context;
public HomeController(MvcProj3Context context)
{
_context = context;
}
public IActionResult Index()
{
ViewBag.Companies = _context.Company.ToList();
return View();
}
public JsonResult GetModel(int Phoneid)
{
List<Model> model = new List<Model>();
model = (from m in _context.Model
where m.Phoneid == Phoneid
select m).ToList();
return Json(new SelectList(model, "modelId", "model_name"));
}
[HttpPost]
public IActionResult GetProduct(int Phoneid, string[] modelId)
{
var data = new List<Products>();
var ids = modelId[0].Split(',');
foreach(var item in ids)
{
var id = int.Parse(item);
//guess the modelA in CompanyA contains several products
var product = (from p in _context.Products
where p.Phoneid == Phoneid && p.modelId == id
select p).ToList();
foreach (var pro in product)
{
data.Add(pro);
}
}
return PartialView("_Partial", data);
}
}
推荐阅读
- php - 两个嵌套的 foreach
- java - Android - 资源未链接
- c# - Linq查找字符串列表2中存在的字符串列表1的所有元素
- i2c - STM32F030F4 在 Bare Metal 中无法正确启动 I2C1
- javascript - 带有复选框的 Javascript localStorage 联系人
- javascript - Javascript 项目出现空错误。(空==0?!)
- javascript - 为什么这个 Javascript 函数没有打印到我的 HTML 文档中?
- c++ - invoke_result_t<> 没有将 lambda 与引用参数匹配
- python - 使用 PyGaze 时没有名为“psychopy”的模块
- google-app-engine - 如何使用删除方法从谷歌数据存储以及我的 html 页面中删除元素?