更新视图另一部分的列表框

Question

我想要一个列表框，当提交时，它会将其选择的值发送到控制器，控制器的响应将用于更新一小部分视图。

以下代码能够更新视图的一部分，并获取选定的值，但只能单独进行。我无法在更新页面的一部分时从 ListBox 获取值：

能够return选择值到控制器的代码：

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);
}

主视图：

@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

如果你想调用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)

Answer 2

我得到了某人的帮助，正确的做法如下：

@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")

这将 return ListBox 中正确的 Model/selected 项，响应 view/html 将被放入 selectedValuesItem div。它也适用于多选框。

更新视图另一部分的列表框

ListBox that updates another part of View

html

c#

asp.net-mvc

listbox

razor