Question

我有这个表单有一个文本框，我已经附加了自动完成，但我不知道如何在选择值时触发ActionResult（它返回json）并获取json结果并将其放入文本框。除了相同的形式，我有一个下拉列表，我想在选择一个值时，填充下拉列表以及其他3个文本框？

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

[{＆＃34;价格＆＃34;：112，＆＃34;折扣＆＃34;：0，＆＃34; ProductTypeList＆＃34;：[{＆＃34; ProductTypeId＆＃34;：3，＆＃34; ProductId＆＃34;：1，＆＃34; UserId＆＃34;：2，＆＃34; Type＆＃34;：＆＃34; 1 Kg＆＃34;，＆＃34; FLEX_FLD1＆＃34;：null ＆＃34; FLEX_FLD2＆＃34;：空，＆＃34; FLEX_FLD3＆＃34;：空，＆＃34; FLEX_FLD4＆＃34;：空，＆＃34; FLEX_FLD5＆＃34;：空}]，＆＃34 ; Disounttype＆＃34;：＆＃34;百分比＆＃34;}]

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

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

1 个答案: