结合两个Action Result MVC Scaffold

Question

我是MVC的新手。如何在以下代码中组合两个操作结果：

public ActionResult TreeView()
    {
        var db = new PCNMSContext();
        return View(db.AssetRegisters.Where(x => !x.ParentAssetID.HasValue).ToList());
    }

public ActionResult AssetRegisterIndex(string SearchString)
    {
        var assetregisters = from m in db.AssetRegisters
                             select m;

        if (!String.IsNullOrEmpty(SearchString))
        {
            assetregisters = assetregisters.Where(s => s.AssetNumber.Contains(SearchString));
        }

        return View(assetregisters);
    }

上面的ActionResult是..第1，在TreeView上生成列表，第2是使用Table函数在Search上生成列表。

我的型号：

public class AssetRegister
{
     public int AssetID {get;set;}
     public string AssetNumber {get;set}
     public string AssetDescription {get;set;}
     public int? ParentAssetID {get;set;}

     [ForeignKey("ParentAssetID")]
     public virtual AssetRegister Parent {get;set;}
     public virtual ICollection<AssetRegister> Childs {get;set;}
}

我的看法：

<div class="row">
       <div class="col-lg-4">
           <div id="jstree">
               @(Html.TreeView(Model)
                     .EmptyContent("root")
                     .Children(m => m.Childs)
                     .HtmlAttributes(new { id = "tree" })
                     .ChildrenHtmlAttributes(new { @class = "subItem" })
                     .ItemText(m => m.AssetNumber)
                     .ItemTemplate(
                          @<text>
                              <a href="@item.AssetID" desc="@item.AssetID">@item.AssetNumber</a>
                           </text>)
                    )
           </div>
        </div>
        @using (Html.BeginForm())
        {
            <div class="col-lg-1">
           @Html.TextBox("SearchString")
           <button class="btn" type="submit" value="Search">View</button>
        </div>
        }

        <div class="col-lg-7">
            <table> I didnt copy all, but this table contains a column of 'AssetRegister' model. There are 4 columns. AssetID,ParentID, AssetNumber,AssetDescription
</table>
        </div>
    </div>

我的jsTree脚本：

<script>
    $(function () {
        var selectedData;
        $('#jstree').jstree({
            "core": {
                "multiple": true,
                "check_callback": true,
                'themes': {
                    "responsive": true,
                    'variant': 'small',
                    'stripes': false,
                    'dots': true
                }
            },
            "types": {
                "default": {
                    "icon": "glyphicon glyphicon-record"
                },
                "root": {
                    "icon": "glyphicon glyphicon-ok"
                }
            },
            "plugins": ["dnd", "state", "types", "sort"]
        }).on('changed.jstree', function (e, data) {
            var i, j, r = [];
            for (i = 0, j = data.selected.length; i < j; i++) {
                r.push(data.instance.get_node(data.selected[i]).text);
            }
            $('#SearchString').val(r.join(', '));
    });
</script>

因此，当我单击节点时，节点的文本将出现在@Html.TextBox上。 问题是，在表上加载数据并在treeview上加载数据是不同的。 1.我如何组合这些ActionResult？ 2.当文本框收到来自节点的文本时，不应单击“提交”按钮，但应自动单击。我怎样才能做到这一点？

谢谢。

Answer 1

为什么不让ViewModel包含您想要在View中返回的那些？

return View(new MyModel{List1 = list1,List2 = list2});

Answer 2

此类要求的最佳解决方案是使用ajax填充数据，然后进行过滤。

您提交的表单用于搜索目的，这不是一个好习惯。

检查我的解决方案是否可以帮助您。

第一步：

更改您的Action方法并返回JsonResult而不是ViewResult：

public ActionResult AssetRegisterIndex(string SearchString)
{
  var assetregisters = from m in db.AssetRegisters
                             select m;

  if (!String.IsNullOrEmpty(SearchString))
    {
           assetregisters = assetregisters.Where(s => s.AssetNumber.Contains(SearchString));
    }

   return Json(assetregisters,JsonRequestBehavior.AllowGet);
}

第二步：

一世。删除@html.BeginForm

II。将按钮类型更改为“按钮”。

iii。为表格创建html。

<div class="col-lg-1">
        @Html.TextBox("SearchString")
        <button class="btn" type="button" value="Search" id="btnsearch">View</button>
</div>

<div class="row">
<div class="col-lg-4">
    <div id="jstree">
            @(Html.TreeView(Model)
                     .EmptyContent("root")
                     .Children(m => m.Childs)
                     .HtmlAttributes(new { id = "tree" })
                     .ChildrenHtmlAttributes(new { @class = "subItem" })
                     .ItemText(m => m.AssetNumber)
                     .ItemTemplate(
            @<text>
                <a href="@item.AssetID" desc="@item.AssetID">@item.AssetNumber</a>
            </text>)
            )
        </div>
</div>

<div class="col-lg-1">
    @Html.TextBox("SearchString")
    <button class="btn" type="button" value="Search" id="btnsearch">View</button>
</div>

<div class="col-lg-7">
    <table class="tbl table-bordered">
        <thead>
            <tr>
                <th>Col1</th>
                <th>Col2</th>
                <th>Col3</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

第三步：

最后是ajax电话。

在页面首次加载时加载包含所有数据的表，然后在按钮上单击加载搜索文本。

 <script type="text/javascript">
    $(function () {
        // Loading Entire table on page loading
        LoadTable("");

        // on search
        $('#btnsearch').click(function () {
            var searchData = $('#SearchString').val();
            if(!searchData){
              alert("please enter your text");
              return;
            }
            LoadTable(searchData);
        });

        function LoadTable(searchString) {

            var table = $("table tbody");
            var tBody = "";

            $.ajax({
                type: "POST",
                url: "/ControllerName/AssetRegisterIndex",
                dataType: "json",
                data: { SearchString: searchString },
                success: function (data) {

                    $.each(data, function (idx, elem) {
                        tBody = tBody + "<tr><td>" + elem.Col1PropertyName + "</td><td>" + elem.Col2PropertyName + "</td><td>" + elem.Col3PropertyName + "</td></tr>";
                    });

                    table.html(tBody);
                }
            })
        };
    });
</script>

希望它能帮到你!!