使用复杂模型更新部分视图

时间:2018-09-10 18:50:03

标签: jquery asp.net razor model-view-controller asp.net-mvc-partialview

我有一个带有大量下拉列表作为过滤器的主视图。 这些过滤器在控制器中用于从数据库中检索数据(复杂查询)。 检索数据后,我想用图表更新局部视图(我也有几个局部视图)。 这是我的结构的简化示例:

模型

public class MainViewModel
{
    public FilterAModel FilterAModel { get; set; }
    public FilterBModel FilterBModel { get; set; }
}
public class FilterAModel
{
    public IEnumerable<int> SelectedItems { get; set; }
    public IEnumerable<SelectListItem> AllItems { get; set; }
}
public class FilterBModel
{
    public IEnumerable<int> SelectedItems { get; set; }
    public IEnumerable<SelectListItem> AllItems { get; set; }
}

查看

<div>
    @using (Html.BeginForm("GetDBValues", "Home",FormMethod.Post))
    {
        @Html.DropDownListFor(a => a.FilterAModel.SelectedItems,Model.FilterAModel.AllItems, new { multiple = "multiple" })
        @Html.DropDownListFor(b => b.FilterBModel.SelectedItems, Model.FilterBModel.AllItems, new { multiple = "multiple" })
        <input id="RegisterBtn" type="submit" />
    }
    <div id="testDiv">
        @{Html.RenderPartial("_PartialView", Model);}
    </div>
</div>

PARTIAL VIEW

@model MainViewModel

<div>@Html.DisplayFor(m=>m.FilterAModel.SelectedItems)</div>
<div>@Html.DisplayFor(m => m.FilterBModel.SelectedItems)</div>

和控制器

    public ActionResult Index()
    {
        Entities context = new Entities();
        MainViewModel model = new MainViewModel();

        FilterAModel modelA = new FilterAModel();
        modelA.AllItems=new MultiSelectList(context.FilterATable,"Id","Text");

        FilterBModel modelB = new FilterBModel();
        modelB.AllItems = new MultiSelectList(context.FilterBTable, "Id", "Text");

        model.FilterAModel = modelA;
        model.FilterBModel = modelB;

        return View(model);
    }
    [HttpPost]
    public ActionResult GetDBValues(MainViewModel model)
    {
        //Code here to retrieve values from DB
        //...

        return PartialView("_PartialView",model);
    }

在此示例中,我只想刷新“部分视图”而不重新加载整个视图,并保留用户在两次调用之间的选择。

我想知道没有JQuery是否有可能实现这一目标... 如果没有,我可以使用这种类型的脚本,但是如何将模型传递给控制器​​的参数化操作GetDBValues

脚本

<script type="text/javascript">
    $(function(){
        $('#RegisterBtn').click(function () {
            $("#testDiv").load('@Url.Action("GetDBValues", "Home")')
        });
    });
</script>

非常感谢您的帮助,这是我的第一个mvc应用程序...

0 个答案:

没有答案