asp.net-mvc - query and result on the same page

Question

I'm trying to look for a good example in asp.net MVC query controls and results.Aka posting controls values and displaying result on the same page.

I Google on this but can't find any example

Answer 1

I'll take a crack at what I THINK you are after, which is having a form + results on the same page. I recently had the issue where I wanted that pattern, with the added complication that both methods (the form, and the form + results) needed to be GETs. Not a GET and a POST. Here's how I did it:

Controller methods:

// GET: /Reports/Refund
public ActionResult Refunds()
{
    var refundVM = new RefundCheckReportViewModel();
    return View(refundVM);
}

// GET: /Reports/Refund
public ActionResult RefundsResult(RefundCheckReportViewModel refundVM) 
{
    string errorMsg;
    var ready = refundVM.IsReadyToRun(out errorMsg);

    if (!ready)
        ModelState.AddModelError("StartDate", errorMsg);
    else
        refundVM.LoadReportData(); // this method on the ViewModel fetches the report data.

    return View("Refunds", refundVM);
}

View in Razor, which holds the form, plus the table for the report results:

@model MembershipCenter.ViewModels.Report.RefundCheckReportViewModel

@{
    ViewBag.Title = "Refunds";
}

<div class="formStandard">


    @using (Html.BeginForm("RefundsResult", "Reports", FormMethod.Get))
    {

        <div class="fsHeader">
            <span class="reqLabel"><a class="req">*</a>required field</span>
            <strong>Refund Check Report</strong>
        </div>

         <div class="fsBlock">
            <div class="text">Date Range: <a class="req">*</a></div>
            <div class="elem">
                <span class="dateRangePicker">
                    From: @Html.TextBoxFor(model => model.StartDate, new { @class = "short datepicker" })
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    To: @Html.TextBoxFor(model => model.EndDate, new { @class = "short datepicker" })
                    @Html.ValidationMessageFor(model => model.StartDate)
                </span>
            </div>
        </div>



        <div class="fsFinalActions">
            <input type="submit" value="Generate Report" />
        </div>
    }

</div> <!-- end .formStandard -->



@if (Model.ReportData != null)
{
    if (Model.ReportData.Any()) {
        <table class="colorTable" style="margin-top: 30px;" id="resultTable">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Member #</th>
                    <th>Amount</th>
                    <th>Check #</th>
                    <th>Name</th>
                    <th>Reason</th>
                </tr>
            </thead>
            <tbody>
                @foreach (MembershipCenter.ViewModels.Report.RefundCheckReportViewModel.RefundReportResultItem item in Model.ReportData)
                {
                    <tr>
                        <td>@item.PrintedDate</td>
                        <td>@Html.GetMemberLink(item.MemberNumber)</td>
                        <td>@item.Amount</td>
                        <td>@item.CheckNumber</td>
                        <td>@item.PayeeName</td>
                        <td>@item.Reason</td>
                    </tr>
                }
            </tbody>
        </table>
    }
    else {
        <div><strong>There are not Refunds for the criteria above.</strong></div>
    }
}

And finally, for reference, my ViewModel:

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Membership = Biz.Business.Membership;
using Printing = Biz.Business.Printing;

namespace MembershipCenter.ViewModels.Report
{
    public class RefundCheckReportViewModel
    {
        [Required]
        public DateTime? StartDate { get; set; }
        [Required]
        public DateTime? EndDate { get; set; }

        public List<RefundReportResultItem> ReportData = null;

        public RefundCheckReportViewModel()
        {
        }

        public bool IsReadyToRun(out string errorMessage)
        {
            errorMessage = string.Empty;

            if (!StartDate.HasValue || !EndDate.HasValue)
                errorMessage = "Please enter a start and end date";

            else if (StartDate.Value <= new DateTime(2012, 11, 1).Date)
                errorMessage = "Please enter a date greater than 11/1/2012 for the Start Date.";

            return (errorMessage.IsNullOrEmpty());
        }

        public void LoadReportData()
        {
            ReportData = new List<RefundReportResultItem>();

            var refunds = Membership.Getrefunds(blah);
            var checks = Printing.GetChecks(blah);

            foreach (var refund in refunds)
            {
                var check = checks.SingleOrDefault(c => c.RequestReferenceId == refund.Request.Id);
                if (check != null)
                    ReportData.Add(new RefundReportResultItem(refund, check));
            }
        }

        public class RefundReportResultItem
        {
            public int CheckNumber { get; set; }
            public decimal Amount { get; set; }
            public string PayeeName { get; set; }
            public string MemberNumber { get; set; }
            public string Reason { get; set; }
            public string PrintedDate { get; set; }

            public RefundReportResultItem(Membership.Refund refund, Printing.PrintedCheck check)
            {
                MemberNumber = refund.MemberId;
                Reason = refund.Note;
                Amount = refund.Amount;

                PayeeName = check.Payee;
                CheckNumber = check.CheckNumber;
                PrintedDate = check.QueuedToPrint.ToShortDateString();
            }
        }
    }
}

That RefundReportResultItem class under the ViewModel is a holder class for the data for each result item in the report.