Showing partial-view, only after search has been submitted Asp.Net MVC

Question

I am new to Asp.Net Mvc. I couldn't find a solution that worked for me here, if I am blind just redirect me.

I am trying to make a web-app where i can search through clients, without displaying the entire table of clients. Only after the user presses search, the search result should show as a partial view. I understand that using Ajax is the most popular way of handling something like this.

Any pointers on how to accomplish this?

My first thought was to just make a display: block/none script connected to the submit button but the page updates each time you search rendering this idea useless. That's why i could use some help with how to asynchronously update the web page with the search result.

HomeController:

        using testForAutofill.Models;

        //Search Functionality
        [HttpPost]
        public PartialViewResult Index(string searchTerm)
        {
            test_Db_Context db = test_Db_Context();
            List<ViewNewOrderSum> orderSums;
            if (string.IsNullOrEmpty(searchTerm))//Fix this.
            {
                orderSums = db.ViewNewOrderSum.ToList();
            }
            else
            {
                orderSums = db.ViewNewOrderSum.Where(x => 
                                   x.ClientName.Equals(searchTerm)).ToList();
            }

            return PartialView(orderSums);
        }

Index View:

@model IEnumerable<testForAutofill.Models.ViewNewOrderSum>

@using (Html.BeginForm())
{
    <b>Kundenavn:</b>
    @Html.TextBox("searchTerm", null, new { id = "txtSearch" })
    <input type="submit" value="🔍 Search" class="btn btn-primary" id="btn-search" />
}

<div id="posts-wrapper"></div>


<div class="client-div" runat="server" style="max-width: 20rem;">
    <div class="card-header">Header</div>
    <div class="card-body" id="client-Card">
        <h4 class="card-title">Client info</h4>
        <table id="client-table">
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.ClientName)
                </th>
            </tr>
            @foreach (var item in Model)
            {
                @Html.Partial("_OrderSum", item)
            }
        </table>

    </div>
</div>

Partial View:

@model testForAutofill.Models.ViewNewOrderSum

<tr>

    <td>
        @Html.DisplayFor(modelItem => Model.ClientName)
    </td>
</tr>

Answer 1

No need of using Ajax . You can submit search text in Form Post. Fetch your data and filter based on your searchTerm retun to View with model. If your model is not null or empty show table else do not display table.

Checkout the below code :

View :

@model List<testForAutofill.Models.ViewNewOrderSum>

@using (Html.BeginForm()) {
   <b>Kundenavn:</b>
   @Html.TextBox("searchTerm", null, new { id = "txtSearch" })
   <input type="submit" value="🔍 Search" class="btn btn-primary" id="btn-search" />
}

@if (Model != null && Model.Count() > 0) {
<div class="client-div" runat="server" style="max-width: 20rem;">
    <div class="card-header">Header</div>
    <div class="card-body" id="client-Card">
        <h4 class="card-title">Client info</h4>
        <table id="client-table">
            <tr>
                <th>
                   ClientName
                </th>
            </tr>
            @foreach (var item in Model) {
                 @Html.Partial("_OrderSum", item)
            }
        </table>

    </div>
</div>
}

Controller :

public ActionResult Index()
{
    //if you want to load all the clients by default
    test_Db_Context db = test_Db_Context();
    List<ViewNewOrderSum> orderSums; 
    orderSums = db.ViewNewOrderSum.ToList();
    return View(orderSums);
}

 [HttpPost]
 public ActionResult Index(string searchTerm) {

     test_Db_Context db = test_Db_Context();
        List<ViewNewOrderSum> orderSums;
        if (!string.IsNullOrEmpty(searchTerm))
        {
            orderSums = db.ViewNewOrderSum.Where(x => 
                               x.ClientName.Equals(searchTerm)).ToList();
        }

     return View(result);
 }

Answer 2

My first thought was to just make a display: block/none script connected to the submit button but the page updates each time you search rendering this idea useless.

You can prevent the page from updating using something like the following (using jQuery):

    <script type="text/javascript">
        $('form').submit(function (evt) {
          evt.preventDefault();

          ... your code

      });
    </script>

Then you can make your ajax POST call, get the data, unhide table headers and append the html results from your partial view.