我想填充一个下拉列表并相应地填充文本框?

时间:2012-08-03 16:39:17

标签: javascript asp.net-mvc asp.net-mvc-3 model-view-controller

我有两个下拉列表,我想,如果我从这两个下拉列表中选择一些内容,第三个文本框将自动使用java脚本填充,如... 这是我的控制器..

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using CommerceSuite.Web.Models.Product;
using CommerceSuite.Services;
using CommerceSuite.Web.Models.AdjustStock;
using CommerceSuite.Data.Models;

namespace CommerceSuite.Web.Controllers
{
public class AdjustStockController : Controller
{
    private readonly IProductStockService _productStock;
    private readonly IProductService _product;
    private readonly ILocationDetailService _locationDetail;
    public AdjustStockController(IProductStockService productStock, IProductService product, ILocationDetailService locationDetail)
    {
        this._productStock = productStock;
        this._product = product;
        this._locationDetail = locationDetail;
    }
    //
    // GET: /AdjustStock/

    public ActionResult Index()
    {
        var model = new AdjustStockModel();
        model.products = PopulateProductId();
        model.locations = PopulateLocation();
        return PartialView("_AdjustStock", model);
    }

    [HttpGet]
    public ActionResult StockAdjust()
    {
        var model = new AdjustStockModel();
        return PartialView("_AdjustStock",model);
    }

    private List<SelectListItem> PopulateProductId()
    {
        var collectionProduct = new SelectList(_product.GetAllProduct(), "ProductId", "Name").ToList();
        return collectionProduct;
    }
    private List<SelectListItem> PopulateLocation()
    {
        var collectionLocation = new SelectList(_locationDetail.GetAllLocationDetail(), "LocationId", "Name").ToList();
        return collectionLocation;
    }

    CommerceSuiteWMDBContext context = new CommerceSuiteWMDBContext();
    public JsonResult GetData(AdjustStockModel model)
    {
       var data = context.ProductStocks.Where(o => o.ProductId == model.ProductId && o.LocationId == model.LocationId);
       var data = (from t in context.ProductStocks
                   where t.ProductId == model.ProductId && t.LocationId == model.LocationId
                    select t).SingleOrDefault();
        var jsonData = new
        {
            quantity=data.QuantityAvailable
        };
        return Json(jsonData, JsonRequestBehavior.AllowGet);
    }

这是我的观点..

@model CommerceSuite.Web.Models.AdjustStock.AdjustStockModel



@Html.ValidationSummary(true)

    <div class="editor-label">
        @Html.LabelFor(model => model.ProductId)

    </div>
    <div class="editor-field">
        @Html.DropDownListFor(model => model.ProductId, Model.products, "Select Product")
        @Html.ValidationMessageFor(model => model.ProductId)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.LocationId)
    </div>
    <div class="editor-field">
        @Html.DropDownListFor(model=>model.LocationId,Model.locations,"Select Location")
        @Html.ValidationMessageFor(model => model.LocationId)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.SystemStock)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model=>model.SystemStock)
        @Html.ValidationMessageFor(model => model.SystemStock)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.ActualStock)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model=>model.ActualStock)
        @Html.ValidationMessageFor(model => model.ActualStock)
    </div>

    <br />

    <div class="block-footer align-right">
        <input type="submit" id="popupConfirmBtn" class="big-button" value="Confirm" />
        <input id="popupCloseBtn" type="button" class="big-button" value="Cancel" onclick="csPopupClose()" />
    </div>

    <div id="popLoading" style="display:none; position:absolute; margin-top:-180px; margin-left:150px; border:none;">
        <img src="../../Content/images/loader.gif" alt="Loading" />
    </div>

现在我怎样才能编写一个java脚本来实现这个功能......所以当我选择任何一个dropbox时,一个文本框会根据Json返回的值自动填充。

1 个答案:

答案 0 :(得分:0)

由于您使用的是MVC,我会看一下Knock Out MVC library。您可以通过NuGet添加它。 This example有一个更新div的下拉列表。在线有很多有据可查的例子和教程。