ListBox更新視圖的另一部分

Question

我想要一個ListBox，當提交時，它會將其選定的值發送到控制器，並且來自該控制器的響應將用於更新視圖的一小部分。

以下代碼能夠更新視圖的一部分，並獲取選定的值，但只能單獨使用。我無法從列表框獲取值，同時更新頁面的一部分：即能選擇的值返回控制器

代碼：

public ActionResult GetInput(ListBoxModel mod) 
{ 
    OtherModel data = new OtherModel(); 
    data.selected = mod; 
    return View("HomePage", data); 
} 

@model App.Models.MainViewModel 
@using(Html.BeginForm("GetInput", "Home", FormMethod.Post)) 
{ 
    <label for="optionList">Options:</label> 
    @Html.ListBox("optionList", Model.listBoxMod.list) 
    <input type="submit" value="Submit"/> 
} 

這個代碼能夠更新的一部分

public ActionResult GetInputAndUpdate(ListBoxModel mod) 
{ 
    //get values out of mod and put them in NewList selectedValues 
    //but no values appear in mod 
    //I can put fake data in selectedValues and it will be put on the page 
    return PartialView("PartialViewUpdate", selectedValues); 
} 

主要景觀：

的頁面，但不能從ListBox中獲取數據210

@model App.Models.MainViewModel 
@using(Html.BeginForm("GetInputAndUpdate", "Home", FormMethod.Post)) 
{ 
    <label for="CGSelected">Care Gaps:</label> 
    @Html.ListBox("CGSelected", Model.listBoxMod.list) 
    <input id="submitButton" data-url="@Url.Action("GetInputAndUpdate")" type="submit" value="Submit" /> 
    <!-- <input id="loadFromMainFrame" data-url="@Url.Action("CareGapSubmitInit", Model ???)" type="submit" value="Submit" /> This doesn't work! --> 

//The partial view html gets put here 
<div id="selectedValuesItem"></div> 
} 

管窺：

@model App.Models.NewList 
    @foreach(var str in Model) 
    { 
     @str 
     <br /> 
    } 

代碼更新局部視圖：

$(function() 
{ 
    $("#submitButton").click(function (e) 
    { 
     e.preventDefault(); 
     var url = $(this).data("url"); 
     $("#selectedValuesItem").load(url); 
    }); 
}); 

Answer 1

我從別人的幫助，這樣做的正確的方法是：

@using(Ajax.BeginForm("GetInput", "Home", new AjaxOptions{UpdateTargetId = "selectedValuesItem"})) 
{ 
    <label for="optionList">Care Gaps:</label> 
    @Html.ListBox("optionList", Model.listBoxMod.list) 
    <input type="submit" value="Submit" /> 
} 

，然後包含這個腳本中，像這樣的項目： @Scripts .Render（「〜/ Scripts/jquery.unobtrusive-ajax.js」）

這將在列表框中返回正確的模型/選定項目，並將響應視圖/ html放入到selectedValuesItem div中。它也將工作多選框。

Answer 2

如果你想打電話GetInputAndUpdate

$(function() 
{ 
    $("#submitButton").click(function (e) 
    { 
     e.preventDefault(); 
     var url = "@Url.Action("GetInputAndUpdate")?selectedValue=" + $("#optionList").val(); 
     $("#selectedValuesItem").load(url); 
    }); 

這

public ActionResult GetInputAndUpdate(ListBoxModel mod) 

成爲該

public ActionResult GetInputAndUpdate(string selectedValue)