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)