Thumb

Dynamically Loading Content With Jquery Ajax | ASP.NET MVC


7/21/2017 12:00:00 AM

 

Step 1 : Create A Database Table (EmployeeInfo)


Step 2 : Click On Visual Studio Create A New Project (DynamicallyLoadingContant)

Step 3 : Connect Your Database(Using EntityFramework Like As Video).

Step 4 : Create A Controller  (Or Use Default Home Controller ) And Write Down The Below Code In Your Controller

public class HomeController : Controller
    {
        MVCTutorialEntities db = new MVCTutorialEntities();
        public ActionResult Index()
        {
            return View(db.EmployeeInfoes.ToList());
        }

        public ActionResult EmployeeInfo(int id)
        {
            List<EmployeeInfo> EmpInfo = db.EmployeeInfoes.Where(x => x.EmployeeId == id).ToList();
            return View(EmpInfo);
        }
    }

Step 5: Add View (Or Use Default Home Controller Like As Video) And WriteDown The Below Code In Your View

@model IEnumerable<DynamicallyLoadingContant.Models.EmployeeInfo>
           <br /><br />
<div class="container">
    <h3 style="text-align:center">-----Employee List-----</h3><br />
    <table class="table table-bordered">
        <tr>
            <th style="width:20%">ID</th>
            <th style="width:80%">Name</th>
        </tr>
       @foreach (var item in Model)
       {
           <tr>
               <td>@item.EmployeeId</td>
               <td><a href="#" data-toggle="popover" data-trigger="hover" id="@item.EmployeeId">@item.EmployeeName</a></td>
           </tr>
       }
    </table>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
    $(document).ready(function () {
        $('[data-toggle="popover"]').popover({
            title: setData,
            html: true,
            placement:'right'

        });
        function setData(id) {
            var set_data = '';
            var element = $(this);
            var id = element.attr("id");
            $.ajax({
                url: "/Home/EmployeeInfo?id" + id,
                method: "post",
                async: false,
                data: { id: id },
                success: function (data) {
                    set_data = data;
                }

            });
            return set_data;
        }
    });
</script>

Step 6: Create Another View (EmployeeInfo) And WriteDown The Below Code In Your View

@model IEnumerable<DynamicallyLoadingContant.Models.EmployeeInfo>
@{
    ViewBag.Title = "EmployeeInfo";
}
<div class="container">
    <h4 style=" text-align:center;border-bottom:1px solid #808080">EmployeeInfo</h4>
    @foreach (var item in Model)
    {
        <p><label>Name : </label> @item.EmployeeName</p>
        <p><label>Email : </label> @item.Email</p>
        <p><label>Phone : </label> @item.Phone</p>
        <p><label>Experience : </label> @item.Experience</p>
    }
</div>

Run This Project

About Teacher

Reza Karim

Software Engineer

More about him