更新视图另一部分的ListBox

本文关键字:ListBox 一部分 另一部 新视图 更新 | 更新日期: 2023-09-27 17:57:26

我想要一个ListBox,它在提交时会将其选定的值发送到一个控制器,该控制器的响应将用于更新视图的一小部分。

以下代码可以更新视图的一部分,并获取选定的值,但只能单独使用。在更新页面的一部分时,我无法从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"/>
}

此代码可以更新部分页面,但无法从ListBox获取数据:

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

更新视图另一部分的ListBox

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

我得到了某人的帮助,正确的方法如下:

@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.inobstructrajax.js")

这将在ListBox中返回正确的Model/selected项,响应视图.html将放在selectedValuesItem分区中。它也可以在多选框中工作。