Ajax not loading data in View (MVC 4)

Question

My Index View is

@model IEnumerable<W.Models.Abc
@using (Ajax.BeginForm("getAbcListA", "Home", new AjaxOptions { UpdateTargetId = "AbcDetails" }))
{
    <b>Search By:</b>@Html.RadioButton("Searchby", "Name", true, new { style = "width:20px;" }) <text>Name</text>
    @Html.RadioButton("Searchby", "Id", new { style = "width:20px;" })  <text>ID</text>
    @Html.TextBox("Search") <input type="submit" value="Search" class="Searchbtn"/>
}
<div id="AbcDetails" style="width: 35%; height: 130px; display:none;">
</div>

and my java script file is

$(document).ready(function () {
   $.ajax({
        url: '/Home/getAbcList',
        contentType: 'application/html; charset=utf-8',
        type: 'GET',
        dataType: 'html'
    })
       .success(function (result) {
           $('#AbcDetails').show();
           $('#AbcDetails').html(result);
       })
       .error(function (xhr, status) {
           alert('from function');
       });

    $(".Searchbtn").click(function () {
        $("#AbcDetails").hide();
    });
 });

and my controller is

public ActionResult getAbcList()
        {
            var obj = repository.Searchlist();
             return View("_getAbcList",obj);
        }

and second function (called by Ajax form) is

  public ActionResult getAbcListA(string a, string b)
            {
                var obj = repository.Searchlist(a,b);
                return View("_getAbcList",obj);
            }

and my partial view is

@model IEnumerable<W.Models.Abc>

 @{
     WebGrid grid = new WebGrid(Model,
         columnNames: new[] { "FirstName", "SurName", "Date", "Address", "PostCode", "ContactNumber" }
         , defaultSort: "FirstName"
         , rowsPerPage: 15
         , canPage: true
         // canSort: true
         );
    }

The problem is that when the page loads first time it doesnt display the partial view and sends an error(from function) which i defined in method. Even if I render the partial view in my Index View

<div id="AbcDetails" style="width: 35%; height: 130px; display:none;">
   @{Html.RenderPartial("~/Views/Home/_getAbcList.cshtml");}
</div>

then the partial view displays the data but the grid goes down the footer tag (body and footer content is being displayed as a background of grid). I want to load the data via ajax when page first loads and the when User clicks on button then the partial view should be displayed I know I have to define another div to show and current one to hide....Please help.....

Have you tried wth @{Html.RenderAction("_getAbcList","YourController")} your index view — Satpal
– Satpal, Commented Jul 8, 2014 at 11:55
Thanks. randerAction Or RenderPartial will be called after User click the button BUT my main problem is that data not being loaded when the page first loads. $.ajax({ url: '/Home/getAbcList', contentType: 'application/html; charset=utf-8', type: 'GET', doesnt load any data ... — Khan
– Khan, Commented Jul 8, 2014 at 12:19

Ehsan Sajjad · Accepted Answer · 2014-07-08 14:24:14Z

1

Instead of :

 $.ajax({
        url: '/Home/getAbcList',
        contentType: 'application/html; charset=utf-8',
        type: 'GET',
        dataType: 'html'
    })
       .success(function (result) {
           $('#AbcDetails').show();
           $('#AbcDetails').html(result);
       })

do like :

 $.ajax({
        url: '@Url.Action("getAbcList","Home")',
        contentType: 'application/html; charset=utf-8',
        type: 'GET',
        dataType: 'html',
        success:function (result) {
           $('#AbcDetails').show();
           $('#AbcDetails').html(result);
       }
    })

answered Jul 8, 2014 at 14:24

Ehsan Sajjad

62.6k16 gold badges113 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Khan Over a year ago

Could you please hav a look at another question while I try this please....stackoverflow.com/questions/24634399/…

Collectives™ on Stack Overflow

Ajax not loading data in View (MVC 4)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related