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,