传递ViewModel两次查看

Question

I have the following index-method in my homecontroller:

    var homeIndexModel = new HomeIndexModel()
    {
        ActiveTasks = tasks.Where(
            task =>
                task.TaskStatus != TaskStatusEnum.Deferred &&
                task.TaskStatus != TaskStatusEnum.Verified && task.TaskStatus != TaskStatusEnum.Resolved),
        ClosedTasks = tasks.Where(
                task =>                            
                    task.TaskStatus == TaskStatusEnum.Resolved),
        DeferredTasks = tasks.Where(
            task =>
                task.TaskStatus == TaskStatusEnum.Verified ||
                task.TaskStatus == TaskStatusEnum.Deferred),
        Rules = m_errandSvc.GetAllRules(),
        Sources =
            Enum.GetValues(typeof(TaskSourceEnum)).Cast<TaskSourceEnum>().AsEnumerable().OrderBy(taskSource => taskSource.AsString()),
        Types = 
            Enum.GetValues(typeof(TaskTypeEnum)).Cast<TaskTypeEnum>().AsEnumerable().OrderBy(taskSource => taskSource.AsString()),
        Counties = counties,
        Reports = null,
    };

    return this.View(homeIndexModel);

This homeIndexModel Is passed to the view when you visit the firstpage. As you can see, I assaign a Report-object to null.

I want to use thise Report-property of homeIndexModel when I do a search On the firstpage. When I hit "Search", a modal should appear and the search result printed out.

Here Is my search-method in the controller:

  [HttpPost]
        public ActionResult SearchReport(string searchVal, string searchParam)
        {
            var reports = m_errandSvc.GetReportSearch(searchVal, searchParam).ToList();
            var homeIndexModel = new HomeIndexModel()
            {
                Reports = reports
            };
            return this.View(homeIndexModel);
        } 

As you can see, I assaign the Report-property with the result of GetReportSearch. I want to loop through this object below:

<!-- Modal -->
<div class="modal" id="myModalSearch" aria-hidden="true" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4>FISH</h4>
                        @if (Model.Reports != null)
                        {

                        }
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

The problem I have is that when I add a foreach, like this below, my debug-mode quits.

   @if (Model.Reports != null)
   {
      foreach(var itm in Model.Reports)
      {
          <div>@itm.Report_id</div>
          <div>@itm.ReportSource</div>
      }
   }

How can I solve this whole thing with homeIndexViewModel and print out my search-result as I want to?

Herer is my jQuery that I use to post to the search-method:

    $('#searchReports').click(function () {

        var searchVal = $('#searchVal').val();

        $.ajax({
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            type: "POST",
            url: DataReview.BASE + "/Home/SearchReport",
            data: JSON.stringify(
                {
                    'searchVal': searchVal,
                    'searchParam': searchParam
                }
            )
        }).done(function (data) {
            console.log("YES");
        }).fail(function(data) {
            console.log("Fail " + data);
        });
    });

Answer 1

Pass back the view model again on search and then assign the report to it this way.

 [HttpPost]
        public ActionResult SearchReport(string searchVal, string searchParam, HomeIndexModel homeIndexModel )
        {
            var reports = m_errandSvc.GetReportSearch(searchVal, searchParam).ToList();

            homeIndexModel.Reports = reports      

            return this.View(homeIndexModel);
        } 

Or the best practice is you can do a Ajax call and then get only the reports data and update your View page. But this requires Jquery , let me know if you want help on implementing this.

EDIT 1: Making small change to your code to get this job done by ajax.

    $.ajax({
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            type: "POST",
            url: DataReview.BASE + "/Home/SearchReport",
            data: JSON.stringify(
                {
                    'searchVal': searchVal,
                    'searchParam': searchParam
                }
            )          
        })
        .done(function (reportData ) {              
            var $panelHeading = $('#myModalSearch .panel-heading');
            $('#myModalSearch .panel-heading').contents(':not(h4)').remove(); //remove previous search results
           $.each(reportData, function(i,v){             
                $panelHeading.append("<div>"+this.Report_id+"</div<div>"+this.ReportSource+"</div>");  //append new result
           });

        })

Your controller must return JSON rather than a view, So change the code to below one.

[HttpPost]
    public ActionResult SearchReport(string searchVal, string searchParam)
    {
        var reports = m_errandSvc.GetReportSearch(searchVal, searchParam).ToList();

        return Content( new JavaScriptSerializer().Serialize(reports), "application/json");
    }