[RESOLVED]How to load PartialView using Ajax on button click – ASP.NET MVC

AJAX, Api, HTML, Jquery, View, Web Forms, , , , ,

Hi,
I want to load partial view inside view using Ajax and JQuery Ajax handler (to show loading).

Now i successfully loading the partial view when action result called and this is my code :

<script>
        $(function load () {
            var myDiv = $('#mydiv');
            $.ajax({
                url: myDiv.data('url'),
                type: 'GET',
                cache: false,
                context: myDiv,
                success: function (result) {
                    this.html(result);
                }
            });
        });

        $(document).ajaxStart(function () {
            $("#loading").show();
        });

        $(document).ajaxComplete(function () {
            $("#loading").hide();
        });

    </script>

<div id="mydiv" data-url="@Url.Action("Create", "Home")"></div>
<div id="loading"> loading... </div>
</body>

This is Action Result :

        public ActionResult Create()
        {

            var model = new AIEntities();

            if (Request.IsAjaxRequest())
            {
                return PartialView("Students", model.Students.ToList());
            }
            else
            {
                return View(model);
            }
        }

Now i want to load this partial view on button Click :

<input type="button" onclick="load();" />

Its not working , any suggestions ?

any better way to do it ?

Thanks Guys,

Please move code loading partial view to a new function

<script type="text/javascript">
    $(function load() {
            LoadPartialView();
        }
    );

   

    function LoadPartialView()
    {
        var myDiv = $('#mydiv');
        $.ajax({
            url: myDiv.data('url'),
            type: 'GET',
            cache: false,
            context: myDiv,
            success: function (result) {
                this.html(result);
            }
        });

    }

    $(document).ajaxStart(function () {
        $("#loading").show();
    });

    $(document).ajaxComplete(function () {
        $("#loading").hide();
    });

</script>

<input
type="button"
value="Load
Partial"
onclick="LoadPartialView();"
/>

I would go with below approach.

// button
<input type="button" id="btnLoad" />

// binding click event with button
$("#btnLoad").on("click",function(e){
// call your function here
       load();
});

The problem is not solved yet , please any suggestions ??
It’s beginner issues !

Problem Solved by using Ajax.ActionLink , its included in MVC.

Don’t forget to import Java script files :

jquery-1.7.1.min.js
jquery.unobtrusive-ajax.min.js
<html>
<head>
    <style>
        .testClass
        {
            font-size: xx-large;
            text-transform: capitalize;
        }
    </style>
    <script src="~/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>

    <script>
        $(document).ajaxStart(function () {
            $("#loading").show();
        });

        $(document).ajaxComplete(function () {
            $("#loading").hide();
        });

    </script>


</head>
<body>

    @{
        AjaxOptions AjaxOptionObj = new AjaxOptions()
        {
            HttpMethod = "Get",
            UpdateTargetId = "divTest",
            InsertionMode = InsertionMode.Replace

        };
    }

    @Ajax.ActionLink("call create","Create",null,AjaxOptionObj,new {@class="testClass"})

    
    <div hidden="hidden" id="loading">
        Loading ...
    </div>
    <div id="divTest">
    </div>
</body>
</html>

Thanks Guys,

Leave a Reply