MVC 4，选择自动完成值时如何填充 3 个文本框？

Question

我有这个表单，它有一个文本框，我已经附加了自动完成功能，但是我不知道如何在选择值时触发 ActionResult（它返回 json）并获取 json 结果并将其放入文本框. 除了在同一个表单中我有一个下拉列表之外，我希望当我选择一个值时填充下拉列表以及其他 3 个文本框？

这是选择下拉列表时返回的 JSON 结果：

[{"Price":112,"Discount":0,"ProductTypeList":[{"ProductTypeId":3,"ProductId":1,"UserId":2,"Type":"1 Kg", "FLEX_FLD1":null,"FLEX_FLD2":null,"FLEX_FLD3":null,"FLEX_FLD4":null,"FLEX_FLD5":null}],"Disounttype":"百分比"}]

ProductTypeList 项目是我想要放入第二个 dropdownlist 和价格、折扣和百分比到 3 textboxes 的项目。

感谢您的帮助。

编辑：

 <div class="editor-label">
    @Html.LabelFor(model => model.CustomerNo)
</div>
<div class="editor-field">
    @Html.TextBoxFor(model => model.CustomerNo, new { @data_cdp_autocomplete = @Url.Action("Autocomplete") })
    @Html.ActionLink("Add New A Customer", "CreateCustomer", "Customer")
    @Html.ValidationMessageFor(model => model.CustomerNo)
</div>
<div id="ShopList">          
    <div class="editor-label">
        @Html.LabelFor(model => model.CustomerName)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.CustomerName)
        @Html.ValidationMessageFor(model => model.CustomerName)
    </div>
    <div class="editor-label">
        @Html.LabelFor(model => model.CustomerAddress)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.CustomerAddress)
        @Html.ValidationMessageFor(model => model.CustomerAddress)
    </div>
    <div class="editor-label">
        @Html.LabelFor(model => model.CustomerPAACI)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.CustomerPAACI)
        @Html.ValidationMessageFor(model => model.CustomerPAACI)
    </div>
</div>
<div class="editor-label">
@Html.LabelFor(model => model.ItemName)
</div>

<div class="editor-field">
<select name="SelectProduct" class="SelectProduct">
    <option value="0">SELECT PRODUCT</option>
    @*Iterating Category ViewModel *@
    @foreach (var item in Model)
    {         
        <option value="@item.ProductId">@item.ItemName
        </option>                               
    }
    <option value="00">Other</option>
    </select>
   </div>
    <div class="editor-label">
        @Html.Label("Item Size")
    </div>

    <div class="editor-field">
        <select name="SelectSize" class="SelectSize">
            <option value="0">SELECT SIZE</option>
            <option value="00">Other</option>
        </select>
    </div>
    <div class="editor-label">
        @Html.LabelFor(model => model.Quantity)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Quantity)
        @Html.ValidationMessageFor(model => model.Quantity)
    </div>
    <div class="editor-label">
        @Html.LabelFor(model => model.Price)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Price)
        @Html.ValidationMessageFor(model => model.Price)
    </div>

  var submitAutocompleteForm = function (event, ui) {

    var $input = $(this);
    $input.val(ui.item.label);

    var $form = $input.parents("form:first");
    $form.submit();
};

var createAutocomplete = function () {
    var $input = $(this);

    var options = {
        source: $input.attr("data-cdp-autocomplete"),
        select: submitAutocompleteForm
    };

    $input.autocomplete(options);
};

$("form[data-cdp-ajax='true']").submit(ajaxFormSubmit);
$("input[data-cdp-autocomplete]").each(createAutocomplete);

这个位于js文件中，在提交第一个表单后刷新页面，这不是一个好主意。

我是 jquery 的新手。你能告诉我一些解决方案 jquery 来适应这种情况吗？

Answer 1

我认为，当您的视图中发生某些事件时，您想填充三个文本框：

你可以像这样简单地做到这一点，

<div class="three-textbox">
            <fieldset>
                <div class="editor-label">
                price
                </div>
                <div class="editor-field">
                <input type="text" id="price" name="price" />
                </div>
                 <div class="editor-label">
                discount
                </div>
                <div class="editor-field">
                <input type="text" id="discount" name="discount" />
                </div>
                 <div class="editor-label">
                percentage
                </div>
                <div class="editor-field">
                <input type="text" id="percentage" name="percentage" />
                </div>
                </fieldset>
            </div> 

Jquery 代码是这样的：

$(document).ready(function(){
   $(".three-textbox").hide();
});

$('.dropone').change(function() {  //event changed function   
  $(".three-textbox").slideDown(); **OR** $(".three-textbox").show();
});