结合两个 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是..第一，在TreeView上生成列表，第二是用Search函数在Table上生成列表。

我的模型：

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上。
问题是，在表中加载数据和在树视图上加载数据是不同的。

1. 我怎样才能结合那些ActionResult？
2.当文本框接收到来自节点的文本时，提交按钮不应该被点击，而是应该被自动点击。我该怎么做？

谢谢。

Answer 1

为什么没有一个 ViewModel 包含你想在 View 中返回的那些？

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

Answer 2

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

您提交表单是为了搜索，这不是一个好的做法。

如果对您有帮助，请查看我的解决方案。

第一步：

更改您的操作方法并返回 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

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

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>

希望对你有帮助！！