How can I bring the selected value from partialview into main view

Question

User-1355965324 posted

I have a sales view. From the sales view I am trying to popup a customer search partial view  and to select the customer code from partial view  and have to bring the  selected customer code into the customer code column of the sales view html if I click the button btnSelect  in the partailview. Please help

 

salescontoller

Sales Controller

public IActionResult salesview(salesmodel sales)
        {
            
                
            return View(salesview);
        }

public IActionResult SearchCustomer()
        {
            CustomerModel Customer = new CustomerModel();
            ViewBag.Customers  = EmployeeService.GetCameoCustomer(connectionSettings);
            return PartialView("CustomerSearch");
            
        }

Salesview.cshtml

                    <div class="col-sm-3">
                        <input type="text" class="form-control" asp-for="CustomerCode" id="lblCustomer">
                        <button type="button" class="btn btn-primary form-control" onclick="ShowCustomerSearch()">Search</button>
                    </div>

CustomerSearch.cshtml

            <div class="form-group">

                <div class="col-sm-3">
                    <button type="submit" class="btn btn-primary form-control" id="btnSelect">Select</button>
                </div>


            </div>

<div class="row">
        <div class="col-md-12 att-area">
            <div class="table-responsive">
                <table id="CustomerSearch" style="width:100%">
                    <thead>
                        <tr>
                            <th>Customer Code</th>
                            <th>Customer Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (CustomerModel customer in ViewBag.Customers as List<CustomerModel>)
                        {
                            <tr>
                                <td> @customer.CustomerCode</td>
                                <td> @customer.CustomerName</td>
                            </tr>

                        }
                    </tbody>


                </table>


            </div>
        </div>

    </div>

Partialview Javascript

<script type="text/javascript">

    $(document).ready(function () {
        var table = $('#CustomerSearch').DataTable({
            scrollY: "500px",
            scrollX: true,
            paging: true,
            "lengthMenu": [[100, -1], [100, "All"]] 
            
        }

        );
        var table = $('#CustomerSearch').DataTable();
        $('#CustomerSearch tbody').on('click', 'tr', function () {
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
            }
            else {
                table.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
            }



        });


    });







</script>

Answer 1

User711641945 posted

Hi polachan,

You could use bootstrap Modal to popup a search partial view.Please pay attention to the mark in green.And it could make mistake if you change them.Here is a working demo as follow:

1.Model:

public class CustomerModel
    {
        [Key]
        public string CustomerCode { get; set; }
        public string CustomerName { get; set; }
    }

2.View:

• Index.cshtml:

@model CustomerModel
<div class="col-sm-3">
    <input type="text" class="form-control" id="lblCustomer" asp-for="CustomerCode">
    <button type="button" class="btn btn-primary form-control" data-toggle="modal" data-target="#myModal" onclick="ShowCustomerSearch()">Search</button>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div id="CustomerSearchDiv">
        <div id="CustomerSearchModal"></div>
    </div>
</div>
    @section Scripts{
        <script type="text/javascript">
            function ShowCustomerSearch() {
                var url = "/CustomerModels/SearchCustomer";
                $("#CustomerSearchDiv").load(url, function (res) {
                    $("#CustomerSearchModal").html(res);
                })
            }
        </script>
    }

• CustomerSearch.cshtml:

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <div class="row">
                <div class="col-md-12 att-area">
                    <div class="table-responsive">
                        <table id="CustomerSearch" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Customer Code</th>
                                    <th>Customer Name</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (CustomerModel customer in ViewBag.Customers as List<CustomerModel>)
                                {
                                    <tr>
                                        <td> @customer.CustomerCode</td>
                                        <td> @customer.CustomerName</td>
                                        <td> <a asp-route-id="@customer.CustomerCode" asp-action="Index">select</a></td>
                                    </tr>  
                                    <tr></tr>
                                }
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal -->

3.Controller:

 public IActionResult SearchCustomer()
        {
            CustomerModel Customer = new CustomerModel();
            ViewBag.Customers = _context.CustomerModel.ToList();//get all the customers
            return PartialView("CustomerSearch");
        }
       
public async Task<IActionResult> Index(string id,CustomerModel customerModel)
        {
            customerModel.CustomerCode = id;
            return View(customerModel);
        }

4.Result:

When you click on Search button,it would popup a partial view:

When you select one record,it would show CustomerCode on the input in index.cshtml:

Best Regards,

Rena

Answer 2

User-1355965324 posted

Thanks Rena

But I am using javascript Datatable for getting search facility. I have to bring the data from javascript  datatable  into index view 

Answer 3

User475983607 posted

polachan, you have a lot of experience in these forums and this particular programming problem has been explained to you many times.  Partial view run on the server and return HTML.  jQuery DataTable runs in the browser and expects JSON to render dynamic data.  

You are having difficulty because you are not following the jQuery DataTable documentation.  You'll need to set aside time to learn jQuery DataTable then come up with a design.  

JQuery DataTable and AJAX.  This approach requires returning JSON rather than a Partial View (HTML)

https://datatables.net/reference/option/ajax

Or use the standard filter feature in jQuery DataTable.  This option can be slow if you have a lot of data and does not require a partial view but you can use one of you like.  

https://datatables.net/reference/api/filter()

https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html

Answer 4

User711641945 posted

Hi polachan,

As mgebhard said, you could not use partial view.Anyway,Here is a working demo with DataTable:

1.Model:

public class CustomerModel
    {
        [Key]
        public string CustomerCode { get; set; }
        public string CustomerName { get; set; }
    }

2.View(Index.cshtml):

<h1>Index</h1>
<div class="col-sm-3">
    <input type="text" class="form-control" id="lblCustomer">
    <button type="button" class="btn btn-primary form-control">Search</button>
</div>
<div id="CustomerSearchDiv">
    <div id="CustomerSearchModal">
    </div>
</div>
<div class="form-group">

    <div class="col-sm-3">
        <button type="submit" class="btn btn-primary form-control" id="btnSelect">Select</button>
    </div>
</div>
<div class="row">
    <div class="col-md-12 att-area">
        <div class="table-responsive">
            <table id="CustomerSearch" style="width:100%">
                <thead>
                    <tr>
                        <th>CustomerCode</th>
                        <th>CustomerName</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

@section Scripts{
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var table = $('#CustomerSearch').DataTable({
                "ajax": {
                    "url": "/CustomerModels/GetJson"
                },
                "columns": [
                    { "data": "customerCode" },
                    { "data": "customerName" }
                ]
            });
            //var table = $('#CustomerSearch').DataTable();
            $('#CustomerSearch tbody').on('click', 'tr', function () {
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                }
                else {
                    table.$('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                }
            });
            $('#btnSelect').click(function () {
                var select = table.row('.selected').data()['customerCode'];
                console.log(select);
                $('#lblCustomer').val(select);
    } );
          
        });
    </script>
}

3.Controller:

public async Task<IActionResult> Index()

        {
            return View();
        }
public JsonResult GetJson()
        {
            var customer= _context.CustomerModel.ToList();
            return Json(new { data = customer }); ;
        }

4.Result:

When you choose one record:

Click the select button and the input would show the CustomerCode:

Best Regards,

Rena