当另一个输入更改时,如何更新表单输入?

时间:2018-08-09 17:33:27

标签: c# asp.net-mvc razor asp.net-core

我有一个简单的表格,允许用户选择一个项目。选择该项目后,我想将SalePriceEach输入更新为他们选择的项目的默认价格。视图的ViewBag中提供了所有必需的数据(所有项目的集合)。我发现this的示例使用局部视图,但是对于简单的值更新而言似乎有点过分。验证选项(远程和客户端)似乎不是正确的工具。我可以用Javascript来管理它,但是感觉像它将破坏某些asp.net核心功能的目的。我的看法如下-任何帮助或建议将不胜感激。

@model My.Stuff.Server.Models.QuoteItem

@{
    ViewData["Title"] = "Add To Quote";
}

<h2>Add Item to Quote</h2>

<hr />
<div class="row">
    <div class="col-md-4">
        <dl class="dl-horizontal">
            <dt> @Html.DisplayNameFor(model => model.Quote.QuoteNumber)</dt>
            <dd> @Html.DisplayFor(model => model.Quote.QuoteNumber)    </dd>
            <dt> @Html.DisplayNameFor(model => model.Quote.QuoteId)   </dt>
            <dd> @Html.DisplayFor(model => model.Quote.QuoteId)       </dd>
        </dl>
        <form asp-action="Create">
            <input class="hidden" asp-for="QuoteId" />
            <div asp-validation-summary="ModelOnly" class="text-danger</div>
            <div class="form-group">

            </div>
            <div class="form-group">
                <label asp-for="Item.PartNumber" class="control-label"></label>
                <select asp-for="ItemId" class="form-control" asp-items="@(new SelectList(@ViewBag.ListofItems,"ItemId","PartNumber"))"></select>
                <span asp-validation-for="ItemId" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Quantity" class="control-label"></label>
                <input asp-for="Quantity" class="form-control" />
                <span asp-validation-for="Quantity" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="SalePriceEach" class="control-label"></label>
                <input asp-for="SalePriceEach" class="form-control" />
                <span asp-validation-for="SalePriceEach" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

更新:我已经用Java语言实现了一个解决方案,如下所示,但我觉得应该有一个asp.net实现。 Razor语法用于初始化数据数组listofItems。

<script>
    var listOfItems = [];     
    $(function () {
        function UpdatePrice(idString) {
            var $price = $("#SalePriceEach");
            var id = parseInt(idString, 10);
            var match = listOfItems.filter(function (element) {
                return element.id == id;
            });
            if (match.length > 0) $price.val(match[0].price);
            else $price.val("999,999");
        }

        listOfItems.push({ 'id':1, 'price':3.4 });                
        listOfItems.push({ 'id':2, 'price':2.456 });
        $("#ItemId").on('change', function (e) {
            UpdatePrice($(this).val())
        });
        UpdatePrice($("#ItemId").val());
    });
</script>
我确定的

解决方案是从模型控制器中的数据库(_context)中查询所有项目,然后将该查询发送到ViewBag,如​​下所示:

public IActionResult Create(long? id) 
{
    ItemChild q = new ItemChild() { ItemParentId = id ?? -1, Qty = 1};
    ViewBag.ListofItems = _context.Items.Where(x => x.ItemId != ItemParentId);
    return View(q);
}

然后在视图中显示带有以下内容的列表的选择控件:

<div class="form-group">
    <label asp-for="Item.PartNumber" class="control-label"></label>
    <select asp-for="ItemId" class="form-control" asp-items="@(new SelectList(@ViewBag.ListofItems,"ItemId","PartNumber"))"></select>
    <span asp-validation-for="ItemId" class="text-danger"></span>
</div>

1 个答案:

答案 0 :(得分:0)

是的,可以使用jQuery 为每种输入类型放置ID,以方便使用 像

     <input asp-for="Quantity" class="form-control" id="Quantity"/>
 <input asp-for="SalePriceEach" class="form-control" id="SalePriceEach"/>

使用Jquery文本更改功能

jQuery('#Quantity').on('input', function() {
//take value of Quantity input
var v1=$("#Quantity").val();
//then assigne this value to another input 
$("#SalePriceEach").val(v1)
   });