Populate HTML Table on Button Click using jQuery AJAX in ASP.Net MVC

Souro

SOLVED CLOSED ACTIVE ANSWERED
User: Souro
Posted: on Dec 11, 2018 08:00 AM
Forum: ASP.Net MVC
Answer: 1
Views: 18688
Sample Code: Download

I want to Search my data using Id and show it to the html table(Search reasult) but When I execute the code on the browser and after clicking on the search button It only shows the table(design of the table) without any data. I googled to get hint but didn't find any appropriate help.

Controller:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using WebApp.Controllers;
    using WebApp.Models;

    namespace WebApp.Controllers
    {
        public class SearchByIdController : Controller
        {
            MvcTstEntities ob = new MvcTstEntities();
            // GET: SearchById
            public ActionResult Index()
            {
                return View();
            }
            public JsonResult Search(string Email)
            {
                var str = (from test in ob.Emp where test.EmailId == Email select test).FirstOrDefault();
                return Json(str, JsonRequestBehavior.AllowGet);
            }
        }
    }

View:

<body>
    <form class="form-inline">
    <div class="form-group mx-sm-3 mb-2">
        <label for="exampleInputEmail1">
            Email</label>
        <input type="email" class="form-control" id="Email1" aria-describedby="emailHelp"
            placeholder="Enter email">
    </div>
    <button type="button" id="Button1" class="btn btn-primary mb-2">
        Search</button>
    </form>
    <div>
        <div class="container" id="Div1">
            <table class="table table-striped">
                <tr>
                    <th>
                        ID
                    </th>
                    <th>
                        Name
                    </th>
                </tr>
                <tr>
                    <td id="Td1">
                    </td>
                    <td id="Td2">
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#tbleshow").hide();

            $("#btnsearch").click(function (e) {
                debugger
                e.preventDefault();
                $("#tbleshow").show();
                return myfunction();

            });

            function myfunction() {
                var model = {
                    Email: $("#exampleInputEmail1").val()
                }
                $.ajax({
                    type: 'GET',
                    url: "/SearchById/Search",
                    dataType: 'json',
                    data: { Email: model.Email },
                    success: function (run) {
                        $("#ide").val(run.EmailId);
                        $("#nm").val(run.Name);
                        if (run) {
                            alert("This is the details");
                        }
                        else {
                            alert("Something wrong in success");
                        }
                    },
                    error: function () {
                        console.log('something went wrong - debug it!');
                    }
                });
            }
        });
    </script>
</body>

Can anyone give me any idea please on how to get the value on table from controller and bind it to the table.

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Dec 12, 2018 12:46 AM
Modified: on Dec 12, 2018 12:48 AM
Report

Souro says:
$("#ide").val(run.EmailId);

$("#nm").val(run.Name);

Instead of val property you have to use html property to assign the value to the td.

$("#ide").html(run.EmailId);
$("#nm").html(run.Name);

Check the below sample for reference.

Database

CREATE TABLE Users(
	[UserId] [int] IDENTITY(1,1) NOT NULL,
	[UserName] [varchar](50) NOT NULL,
	[Email] [nvarchar](50) NOT NULL
)
GO
INSERT INTO Users VALUES('Jacob','jacob@bngg.com')

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult Search(string email)
    {
        UsersEntities entities = new UsersEntities();
        var str = (from test in entities.Users where test.Email == email select test).FirstOrDefault();
        return Json(str, JsonRequestBehavior.AllowGet);
    }
}

View

<body>
    <form class="form-inline">
    <div class="form-group mx-sm-3 mb-2">
        <label for="exampleInputEmail1">
            Email</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
            placeholder="Enter email">
    </div>
    <button type="button" id="btnsearch" class="btn btn-primary mb-2">
        Search</button>
    </form>
    <div>
        <div class="container" id="tbleshow">
            <table class="table table-striped">
                <tr>
                    <th>
                        ID
                    </th>
                    <th>
                        Name
                    </th>
                </tr>
                <tr>
                    <td id="ide">
                    </td>
                    <td id="nm">
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#tbleshow").hide();
            $("#btnsearch").click(function (e) {
                e.preventDefault();
                $("#tbleshow").show();
                return myfunction();
            });
            function myfunction() {
                var model = { Email: $("#exampleInputEmail1").val() }
                $.ajax({
                    type: 'GET',
                    url: "/Home/Search",
                    dataType: 'json',
                    data: { Email: model.Email },
                    success: function (run) {
                        $("#ide").html(run.Email);
                        $("#nm").html(run.UserName);
                        if (run) {
                            alert("This is the details");
                        }
                        else {
                            alert("Something wrong in success");
                        }
                    },
                    error: function () {
                        console.log('something went wrong - debug it!');
                    }
                });
            }
        });
    </script>
</body>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Populate HTML Table on Button Click using jQuery AJAX in ASP.Net MVC

Company

Explore

Follow us

Contact Us