如何使用MVC 4從第一個下拉列表中選擇一個項目的表格jQuery和AJAX

//嗨所以我要建立一個MVC4項目，我有一個程序列表，每個程序都綁定到一個列表奧特萊斯，我試圖顯示一個Outlets的表，一旦用戶從我的下拉列表中選擇一個程序，到目前爲止，我有一個jQuery功能，只要選擇發生變化就會觸發，我可以檢索它的程序ID ..很好，但如何我做一個阿賈克斯電話填充與該程序相關的插座的表格如何使用MVC 4從第一個下拉列表中選擇一個項目的表格jQuery和AJAX

我有一個局部視圖，負責繪製我的插座表，所有我需要做的是從我的jQuery函數做一個ajax調用我的控制器中的函數並傳遞編程，在本例中爲var $input = $(this).find('option:selected').val();

控制器

public ActionResult AddOutletFromExisting() 
    { 
     int selectedValue = 0; 

     ViewBag.Programs = new SelectList(new ProgramRepository().GetPrograms(), "ProgramID", "ProgramName", selectedValue); 
     return View(); 
    } 
[HttpPost] 
    public ActionResult AddOutletFromExisting(FormCollection collection, int selectedValue=0) 
    { 
     var outlets = new OutletRepository().GetStoresByProgram(selectedValue).ToPagedList(1, 10); 
     return PartialView("_Outlets", outlets); 
    }

查看

@Html.DropDownList("ProgramID", (SelectList)ViewBag.Programs, string.Empty, new { id="dropdown" })

jQuery的

$("#dropdown").change(function() { 
    var $input = $(this).find('option:selected').val(); 
    //call a function in my controller and pass $input to this function 
});

來源

2013-07-24 Alireza K.

要篩選基礎上下拉值的網格，對不對？
你必須按照下面的步驟。

創建一個控制器動作，其結果基於該參數（其將來自AJAX調用 - 你看到在下一步驟）
創建此行動的圖，該過濾器。它會包含代碼表
呼叫使用jQuery AJAX動作方法/ POST方法
更新網格內容

這裏是link-Filtering a Grid of Data in ASP.NET MVC與例如

UPDATE

解釋

$("#dropdown").change(function() { 
    var selectedValue = $(this).find('option:selected').val(); 
    //call a function in my controller and pass $input to this function 
    $.ajax({ 
     url:"/Controller/GridFilterActionMethod", 
     type: "POST", 
     data: { selectedValue: selectedValue }, 
     success:function(result){ 
      $("#div1").html(result); //here, div1 would be your grid-div id 
     } 
    }); 
});

根據上面的代碼，你的動作方法參數名應該是selectedValue - 應該與json對象名稱匹配。

來源

2013-07-24 15:30:52 Paritosh

感謝您的建議，這正是我如何接近它，我更新了我的問題 –

@ user2599836：如果這不能解決您的問題，請顯示您的過濾器操作方法以獲得更多的說明 – Paritosh

感謝您的跟進我欣賞它，看到更新的問題 –

一種方法是對服務器執行ajax調用，然後檢索網點列表的HTML。然後簡單地將列表追加到頁面上的元素：

$("#dropdown").change(function() { 
    var $input = $(this).find('option:selected').val(); 
    $.get('/outlets/' + input, function(data) { 
     $('.result').html(data); 
    }); 
});

另一種解決方案是，而不是操作方法返回HTML，它會返回JSON。在這種情況下，您將綁定到您定義的模板。這有點複雜，但允許action方法只關注返回數據而不用擔心渲染。

來源

2013-07-24 15:32:18

我更新了我的問題，希望它更清楚我想做什麼:( –

如何使用MVC 4從第一個下拉列表中選擇一個項目的表格jQuery和AJAX

回答

相關問題