ドロップダウンリストで選択した値に応じてテキストボックスを入力しようとしています

Question

Im new to ASP.Net MVC。私は約2時間を探していて、それを得ることができないようです。 データベースの製品のドロップダウンリストがあります。私が欲しいのは、テキストボックスの説明です。は、ドロップダウンリストの選択項目によってリアルタイムで表示されます。ここで

は私がこれまで持っているものです。

はここ

public ActionResult Index() 
{ 
     IEnumerable<SelectListItem> items = db.Products.Select(i => new SelectListItem 
     { 
      Value = i.ProductName, 
      Text = i.ProductName 
     } 
    ); 
     ViewBag.ProductItems = items; 
     return View(); 
} 

マイドロップダウンリスト

@using (Ajax.BeginForm("GetDescriptionByProductName", "PurchaseOrder", new AjaxOptions{ InsertionMode = InsertionMode.Replace,UpdateTargetId = "description"})) 
     { 
      @Html.DropDownList("ProductItems", (SelectList)ViewBag.Values, new { onchange = "this.form.submit();" }) 
     } 

私のドロップダウンリストを読み込む私のコントローラで私のActionResultです

[HttpPost] 
public ActionResult GetDescriptionByProductName(string ProductItems) 
{ 
    var data = db.Products.Where(x => x.Description.Contains(ProductItems)); 
    return RedirectToAction("Index"); 
} 

This is what it looks like. I select an item from the dropdownlist and it will autofill in the textbox description

UPDATE：このすべては、RIGHT NOW BACK INDEXページにMEを指示され、BLANK

Answer 1

スニペットのコードから、私はその製品の説明を得るために毎回サーバーにヒットする必要はないと思います。

： - あなたのプロダクトモデル

public class Product 
    { 
     public int Id { get; set; }   
     public string Display { get; set; }   
     public string Description { get; set; } 
    } 

を再利用し、対処方法にすることができます

は、製品のモデルを作成：これは私がやっていることであるhttps://dotnetfiddle.net/1lyHWW

- 私はここでフィドルを作成しました

[HttpGet] 
public ActionResult Index() 
{ 
    var productsList = new List<Product> 
    { 
    new Product{Id= 1,Display = "Product 1", Description = "prod 1 description"}, 
    new Product{Id= 2,Display = "Product 2", Description = "prod 2 description"}, 
    new Product{Id= 3,Display = "Product 3", Description = "prod 3 description"}, 
    new Product{Id= 4,Display = "Product 4", Description = "prod 4 description"}, 
    new Product{Id= 5,Display = "Product 5", Description = "prod 5 description"}, 
      }; 

    ViewBag.Products = productsList; 
    return View(); 
} 

。CSHTML

@using (Html.BeginForm()) 
      { 
       <select name="drpProducts" id="drpProducts"> 
       @{ 
        foreach(var product in ViewBag.Products) 
        { 
         <option value="@product.Id" 
          data-desc="@product.Description"> 
          @product.Display 
         </option> 
        } 
       } 
       </select> 

      <input type="text" id="txtProductDescription"/> 
      } 



<script> 
     $(document).ready(function(){ 

      $("#drpProducts").change(function(){ 

       var selectedItemDesc = $("#drpProducts option:selected").attr("data-desc"); 
       $("#txtProductDescription").val(selectedItemDesc); 

       }); 

     }); 
    </script> 

注 - 私はあなたがデータバインディングをサポートする任意のフレームワークを使用していない場合は、手動ではJavaScriptを使用してテキストボックスを更新する必要があります。このアプローチ

Answer 2

されているデフォルト値にリセットされますDOES以下のため
1.変更イベントステップしてみてくださいドロップダウンオプションを変更する
2.変更イベントでコントローラ - >アクションにajax calを作成する
3.受信したデータをテキストボックスに表示

Answer 3

かみそりビュー（.cshtmlファイル）の中に、あなたは以下のようなもの持つことができます、あなたのコントローラ内部の

@using (Html.BeginForm("GetDescriptionByProductName", "PurchaseOrder")) 
{ 
    <div class="form-group"> 
     @Html.Label("Textbox") 
     @Html.TextBox("txt", (string)ViewBag.selected) 
     @Html.DropDownList("ProductItems", (List<SelectListItem>)ViewBag.Values, 
      new { onchange = "this.form.submit();" }) 
     <input type="submit" value="Submit"/> 
    </div> 
} 

そして、このような何か：

public ActionResult GetDescriptionByProductName(string ProductItems) 
{ 
    var query = from d in db.Products 
       where d.ProductName == ProductItems 
       select d; 

    // Here you can query your list of items for the passed in ProductItems 
    ViewBag.selected = String.IsNullOrEmpty(ProductItems)?"NONE": ProductItems; 

    return Json(query); 
} 

それともとしても、AJAXを使用することができます他の人は$.ajaxを使用して、同じアクションメソッドを呼び出し、jQueryを使用して取得できるselectedItemIdを$('select[name="ProductItems"]').val()のように渡すことを提案しています。

これが役に立ちます。