ASP.NET MVC：根据下拉列表中的选定值填充表单字段 [英] ASP.NET MVC: Populating form fields based on selected value in drop down list

问题描述

您好b $ b

我是MVC新手。我写了非常基本的MVC应用程序。目前所做的只是从表单到控制器获取值并将它们保存在数据库中。 [插入应用程序的操作]。



我正在尝试创建更新操作。



任务

我显示了一个下拉列表，其中填写了产品名称[显示文本]和产品ID [值]。在同一页面上是字段productCode [文本框]。

当用户从下拉列表中选择一个值时，我想填充代码值[根据productID从db中检索]



查看

Hi
I am new to MVC. I have written very basic MVC Application. All it does at the moment is get the values from form through controller and save them in database. [Insert Operation of application].

I am trying to create Update Operation.

TASK
I have displayed a dropdown list populated with product name [display text] and product ID[value]. On the same page is the field productCode [text box].
When a user selects a value from dropdown, I want to populate code value [retrieving it from db based on productID]

VIEW

<script type="text/javascript">
    $(document).ready(function () {
        $("#ProductList").click(function () {
            $.ajax({
                url: '@Url.Action("GetProductData", "Home")',
                type: 'POST',
                dataType: 'json',
                data: { clientID: $("#ProductList").val() },
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    if (data.success) {
                        // fill the product code
                        $("#ProductCode").val(data.ProductCode);
                    }
                    else {
                        // show a message in a alert or div
                        alert('This Product ID is not valid. Try again!');
                    }
                }
            });
        });
    });

    
</script>

@{
    ViewBag.Title = "Update Product";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@using (Html.BeginForm("UpdateExistingProduct", "Home", FormMethod.Post))
{
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js">

    </script>
    <table>
        <caption style="text-align:left"><h3>@ViewBag.Message</h3></caption>
        <tr>
            <td>Please select Product</td>
            <td>@Html.DropDownList("ProductList", null, new {id="ProductList"})</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>@Html.Label("Code")</td>
            <td>@Html.TextArea("ProductCode", null, new {@readOnly = "readonly"})</td>
        </tr>
    </table>
}

CONTROLLER

CONTROLLER

[HttpPost]
public ActionResult GetProductData(string productID)
{
    Product prd = Product.GetProduct(Convert.ToInt32(productID));
    if (prd != null)
    {
        return Json(new { success = true, productCode = prd.ProductCode});
    }
    return Json(new { success = false });

}

注意：我在网站上找到了Jquery代码并且在那里提到了代码正在运行。在我的情况下没有任何反应。

任何人都可以帮助我吗？



问候

NOTE: I Found Jquery Code on website and there it was mentioned that code is working. In my case nothing happens.
Can anyone please help me?

Regards

推荐答案

（ document ）。ready（ function （）{

(document).ready(function () {

（ ＃ProductList）。点击（ function （）{

.ajax（{
url：' @ Url.Action（GetProductData，Home）'，
类型：' POST'，
dataType：' json'，
数据：{clientID：

.ajax({ url: '@Url.Action("GetProductData", "Home")', type: 'POST', dataType: 'json', data: { clientID:

这篇关于ASP.NET MVC：根据下拉列表中的选定值填充表单字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！